|
|
Line 1: |
Line 1: |
| <html> | | <html> |
| | | |
| + | <ul id="sddm"> |
| + | <li><a href="#" |
| + | onmouseover="mopen('m1')" |
| + | onmouseout="mclosetime()">Home</a> |
| + | <div id="m1" |
| + | onmouseover="mcancelclosetime()" |
| + | onmouseout="mclosetime()"> |
| + | <a href="#">HTML Drop Down</a> |
| + | <a href="#">DHTML Menu</a> |
| + | <a href="#">JavaScript DropDown</a> |
| + | <a href="#">Cascading Menu</a> |
| + | <a href="#">CSS Horizontal Menu</a> |
| + | </div> |
| + | </li> |
| + | <li><a href="#" |
| + | onmouseover="mopen('m2')" |
| + | onmouseout="mclosetime()">Download</a> |
| + | <div id="m2" |
| + | onmouseover="mcancelclosetime()" |
| + | onmouseout="mclosetime()"> |
| + | <a href="#">ASP Dropdown</a> |
| + | <a href="#">Pulldown menu</a> |
| + | <a href="#">AJAX Drop Submenu</a> |
| + | <a href="#">DIV Cascading Menu</a> |
| + | </div> |
| + | </li> |
| + | <li><a href="#">Order</a></li> |
| + | <li><a href="#">Help</a></li> |
| + | <li><a href="#">Contact</a></li> |
| + | </ul> |
| + | <div style="clear:both"></div> |
| | | |
- | <style>
| |
- | h1.firstHeading { display: none; }
| |
- |
| |
- | p {text-align: justify;}
| |
- |
| |
- | a:link { color: #00b0e6; text-decoration: none}
| |
- | a:visited { color:#00b0e6; text-decoration: none}
| |
- | a:hover { color:#f29400; text-decoration: none}
| |
- | a:active { color:#f29400; text-decoration: none}
| |
- |
| |
- | #bodyContent { padding: 10px auto; width: 910px; margin: auto; clear: none; }
| |
- |
| |
- | table#team_members { text-align: justify; border: 0; }
| |
- | table#team_members h2, table#team_members h3 { clear: both; }
| |
- |
| |
- |
| |
- | /*-----------------------------------------------------------------------------------------------*/
| |
- | div.MenuBar ul li ul.DropDownMenu {
| |
- | display: none; /* Hides all drop-down menus. */
| |
- |
| |
- | }
| |
- | /*
| |
- | li:hover works in IE7 and FF2.
| |
- | a:hover works in IE6 and FF2.
| |
- | a:hover breaks li:hover in FF2.
| |
- | */
| |
- | div.MenuBar ul li:hover ul.DropDownMenu li ul.SideMenu,
| |
- | div.MenuBar ul li a:hover ul.DropDownMenu li a ul.SideMenu {
| |
- | display: none; /* Hides all side menus. */
| |
- | }
| |
- | /*------------------------------------------------------------------------------------- Menu Bar */
| |
- | div.MenuBar {
| |
- | font: arial, helvetica, sans-serif;
| |
- | height: 30px;
| |
- | width: 910px;
| |
- | /*width: 100%*/
| |
- | margin: 0;
| |
- | border-top: 0;
| |
- | border-right: 0;
| |
- | border-left: 0;
| |
- | padding: 0;
| |
- | background: black;
| |
- |
| |
- | }
| |
- | div.MenuBar ul {
| |
- | font: arial, helvetica, sans-serif;
| |
- | text-align: center;
| |
- | list-style-type: none;
| |
- | margin: 0.5em auto;
| |
- | border: 0;
| |
- | padding: 0;
| |
- | background: black;
| |
- | }
| |
- | div.MenuBar ul li {
| |
- | font: arial, helvetica, sans-serif;
| |
- | display: block;
| |
- | padding: 0;
| |
- | margin: 0;
| |
- | font-size: 1.3em;
| |
- | float: left;
| |
- | background: black;
| |
- | text-align: center;
| |
- | width: 107px;
| |
- | position: relative; /* Sets the positioning context for each drop-down menu. */
| |
- | }
| |
- |
| |
- | div.MenuBar ul li a {
| |
- | font: arial, helvetica, sans-serif;
| |
- | display: block;
| |
- | background: black;
| |
- | height: 22px; /* Keep height + padding-top + padding-bottom sync with the menu bar height. */
| |
- | color: #ffffff;
| |
- | padding-top: 4px;
| |
- | padding-bottom: 4px;
| |
- | padding-left: 1em; /* Sets the left space between top-level items. */
| |
- | padding-right: 1em; /* Sets the right space between top-level items. */
| |
- | text-decoration: none;
| |
- | }
| |
- |
| |
- | /*------------------------------------------------------------------------------ Drop-Down Menus */
| |
- | div.MenuBar ul li:hover ul.DropDownMenu,
| |
- | div.MenuBar ul li a:hover ul.DropDownMenu {
| |
- | display: block;
| |
- | width: 10em; /* Drop-down menu width.
| |
- | Use MenuTailor.css to customize. */
| |
- | height: 1em;
| |
- | padding: 1px; /* Sets the drop-down menu "effective border" width. */
| |
- | position: absolute;
| |
- | top: 23px; /* Places the drop-down menu under the menu bar.
| |
- | Keep it sync with the menu bar height. */
| |
- | left: 0; /* Aligns the drop-down menu to its top-level item. */
| |
- | background-color: black; /* Selected item. */
| |
- | color: #FFFFFF;
| |
- |
| |
- | }
| |
- | div.MenuBar ul li:hover ul.DropDownMenu li a,
| |
- | div.MenuBar ul li a:hover ul.DropDownMenu li a {
| |
- | width: 10em; /* Keep it sync with the drop-down menu width.
| |
- | Use MenuTailor.css to customize. */
| |
- | height: 1em;
| |
- | padding-left: 0;
| |
- | padding-right: 0;
| |
- | background-color: black; /* Selected item. */
| |
- | color: #FFFFFF;
| |
- | }
| |
- | ul.DropDownMenu li a span {
| |
- | display: block;
| |
- | padding-left: 0.75em; /* Sets the left space of each drop-down menu item. */
| |
- | padding-right: 0.25em; /* Sets the right space of each drop-down menu item. */
| |
- | text-align: right; /* Aligns the >> symbol to the right. */
| |
- | }
| |
- | ul.DropDownMenu li a span span {
| |
- | float: left; /* Aligns the text (back) to the left. */
| |
- | font: 12px arial, helvetica, sans-serif; /* Required for IE55. */
| |
- | height: 20px;
| |
- | color: #FFFFFF;
| |
- | }
| |
- | </style>
| |
| </html> | | </html> |