|
|
(8 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | <html>
| |
| | | |
- | <style>
| |
- | /*---- CROSS BROWSER DROPDOWN MENU ----*/
| |
- | #gumax-nav { display: block; margin: 0; padding: 0; position: relative; }
| |
- | #gumax-nav li { display: block; list-style: none; margin: 0; padding: 0; float: left; position: relative; }
| |
- | #gumax-nav a { display: block; font-family: 'Trebuchet MS', Georgia, Verdana, Sans-serif, Arial; font-size: 110%; text-decoration: none; }
| |
- | #gumax-nav ul { display: none; position: absolute; left: 0; margin: 0; padding: 0; z-index: 900; }
| |
- | * html #gumax-nav ul { line-height: 0; } /* IE6 "fix" */
| |
- | #gumax-nav ul a { zoom: 1; } /* IE6/7 fix */
| |
- | #gumax-nav ul li { float: none; }
| |
- | #gumax-nav ul ul { top: 0; }
| |
- |
| |
- | /* heading style */
| |
- | #gumax-nav li a#gumax-nav-heading { font-size: 150%; }
| |
- | #gumax-nav ul li span { padding: 3px 5px; }
| |
- |
| |
- | /* Essentials */
| |
- | #gumax-nav ul { width: 100%;}
| |
- | #gumax-nav ul ul { left: 201px; padding-bottom: 20px; }
| |
- | /* theming */
| |
- | /*#gumax-nav { height: 29px; background: #333; border-top: 1px solid #c7c7c7; border-bottom: 1px solid #e7e7e7;}/**/
| |
- | #gumax-nav { height: 45px; background: darkturquoise; } /* HERE I CHANGE COLOR OF DROP DOWN */
| |
- | #gumax-nav *:hover { background-color: none; }
| |
- |
| |
- | #gumax-nav a {
| |
- | font-weight: bold;
| |
- | color: #333; /* HERE I CHANGE COLOR OF LETTERS OF DROP DOWN*/
| |
- | padding: 10px 10px;
| |
- | line-height: 1;
| |
- | }
| |
- |
| |
- | #gumax-nav li.hover a, #gumax-nav ul li, #gumax-nav ul li a { background-color: transparent; /* drop down background */ }
| |
- | #gumax-nav ul { top: 30px;} /*drop down Y position*/
| |
- | #gumax-nav ul li a { font-weight: normal; color: black; padding: 6px 10px; /* white-space: nowrap; /* wrap long item */ }
| |
- | #gumax-nav a.hover, #gumax-nav ul a.hover { background-color: none; color: #fff; }
| |
- | #gumax-nav ul { border: none; opacity: 100.0; filter: alpha(opacity=100.0); }
| |
- | </style>
| |
- |
| |
- | <body>
| |
- | <ul id="gumax-nav" class="hover">
| |
- | <li><a id="gumax-nav-heading" href="Home" class=""> Home »</a>
| |
- | <li><a id="gumax-nav-heading" href="Team" class=""> Team »</a>
| |
- | <li id=>About Us
| |
- | <ul>
| |
- | <li><a href="#">History</a></li>
| |
- | <li><a href="#">Clients</a></li>
| |
- | <li><a href="#">Testimonials</a></li>
| |
- | <li><a href="#">Staff</a>
| |
- | <ul>
| |
- | <li><a href="#">George Orsmond</a>
| |
- | <ul>
| |
- | <li>Web Design</li>
| |
- | <li>Graphic Design</li>
| |
- | <li>HTML</li>
| |
- | <li>CSS</li>
| |
- | </ul>
| |
- | </li>
| |
- | <li><a href="#">Dave Macleod</a></li>
| |
- | </ul>
| |
- | </li>
| |
- | <li><a href="#">FAQs</a></li>
| |
- | </ul>
| |
- | </li>
| |
- | <li>Services
| |
- | <ul>
| |
- | <li><a href="#">Web Design</a></li>
| |
- | <li><a href="#">Graphic Design</a></li>
| |
- | <li><a href="#">Logo Design</a></li>
| |
- | </ul>
| |
- | </li>
| |
- | <li>Products
| |
- | <ul>
| |
- | <li class="dir"><a href="#">Templates</a></li>
| |
- | <li class="dir"><a href="#">Stock Images</a>
| |
- | <ul>
| |
- | <li><a href="#">Category 1</a></li>
| |
- | <li><a href="#">Category 2</a></li>
| |
- | <li><a href="#">Category 3</a></li>
| |
- | <li><a href="#">Category 4</a></li>
| |
- | <li><a href="#">Category 5</a></li>
| |
- | </ul>
| |
- | </li>
| |
- | <li><a href="#">Featured</a></li>
| |
- | <li><a href="#">Top Rated</a></li>
| |
- | <li><a href="#">Resources</a></li>
| |
- | </ul>
| |
- | </li>
| |
- | <li><a href="#">Gallery</a></li>
| |
- | <li>Contact Us
| |
- | <ul>
| |
- | <li><a href="#">Contact Form</a></li>
| |
- | <li><a href="#">How to get here</a></li>
| |
- | <li><a href="#">View the map</a></li>
| |
- | </ul>
| |
- | </li>
| |
- | </ul>
| |
- | </body>
| |
- |
| |
- |
| |
- | </html>
| |