SHOW:
|
|
- or go back to the newest paste.
| 1 | - | Navbar: |
| 1 | + | /* |
| 2 | - | <div id="menu"> |
| 2 | + | LEVEL ONE |
| 3 | */ | |
| 4 | - | <div id="vline"> |
| 4 | + | ul.dropdown { position: relative; }
|
| 5 | - | <img src="images/vline.jpg" border="0"> |
| 5 | + | ul.dropdown li { font-weight: bold; float: left;}
|
| 6 | - | </div> |
| 6 | + | ul.dropdown a:hover { color: red; }
|
| 7 | - | <div id="menuwrap"> |
| 7 | + | ul.dropdown a:active { color: #ffa500; }
|
| 8 | - | |
| 8 | + | ul.dropdown li a { color: #0d88de; font-size:10pt; font-weight: bold;}
|
| 9 | - | <ul class="dropdown"> |
| 9 | + | |
| 10 | - | <li><a href="#"><img src="images/home.jpg" border="0"></a> |
| 10 | + | ul.dropdown li.hover, |
| 11 | - | <ul class="sub_menu" width="100%"> |
| 11 | + | ul.dropdown li:hover { color: red; position: relative; }
|
| 12 | - | <li><a href="#">Lorem</a></li> |
| 12 | + | ul.dropdown li.hover a { color: red; }
|
| 13 | - | <li> |
| 13 | + | |
| 14 | - | <a href="#">Ipsum</a> |
| 14 | + | ul.sub_menu li a {text-align: center; padding: 5px 0px 5px 0px;}
|
| 15 | - | <ul> |
| 15 | + | ul.sub_menu li a:not(:only-child) {background: url('images/redarrow.jpg') no-repeat right center;}
|
| 16 | - | <li><a href="#">Lorem</a></li> |
| 16 | + | /* |
| 17 | - | <li><a href="#">Ipsum</a></li> |
| 17 | + | LEVEL TWO |
| 18 | - | </ul> |
| 18 | + | */ |
| 19 | - | </li> |
| 19 | + | ul.dropdown ul { width: 100%; visibility: hidden; position: absolute; top: 100%; left: 0; }
|
| 20 | - | <li><a href="#">Lorem</a></li> |
| 20 | + | ul.dropdown ul li { font-weight: normal; background: #f6f6f6; color: #000;
|
| 21 | - | </ul> |
| 21 | + | border: 1px solid #ccc; float: none; margin-top:-1px;} |
| 22 | - | </li> |
| 22 | + | |
| 23 | - | |
| 23 | + | /* IE 6 & 7 Needs Inline Block */ |
| 24 | - | <li><a href="#"><img src="images/content.jpg" border="0"></a> |
| 24 | + | ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; }
|
| 25 | - | <ul class="sub_menu" width="100%"> |
| 25 | + | |
| 26 | - | <li><a href="articles.php">Questions</a></li> |
| 26 | + | /* |
| 27 | - | <li><a href="articles.php">Articles</a></li> |
| 27 | + | LEVEL THREE |
| 28 | - | <li><a href="articles.php">Experiments</a></li> |
| 28 | + | */ |
| 29 | - | <li><a href="articles.php">Software</a></li> |
| 29 | + | ul.dropdown ul ul { left: 100%; top: 0; }
|
| 30 | - | <ul> |
| 30 | + | ul.dropdown li:hover > ul { visibility: visible; } |
