/ Published in: CSS
container id: nav
list class: dropdown-menu
list class: dropdown-menu
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/* DROPDOWN MENU */ /* !! dont insert fonts and colors here */ .dropdown-menu li{ float: left; position: relative; } /* 2 level */ .dropdown-menu li ul{ display: none; position: absolute; top: 30px; /* height of first level bar */ left: 0px; } .dropdown-menu li ul li{ float: none; } .dropdown-menu li ul li ul{ left: 120px; /* width 2+ level */ top: 0; } .dropdown-menu li:hover ul {/*show 2+ level*/ display: block; } .dropdown-menu li:hover ul li ul{/*hide 3+ level*/ display: none; } .dropdown-menu li ul li:hover ul{ display: block; } .dropdown-menu li ul li:hover ul li ul{ display: none; } .dropdown-menu li ul li ul li:hover ul{ display: block; } .dropdown-menu li ul li ul li:hover ul li ul{ display: none; } /* DROPDOWN MENU - end */ /* view - like u wish */ #nav{ width: 950px; height: 30px; margin: 0 auto; background: #ccc; } #nav ul li{ line-height: 30px; height: 30px; } #nav ul ul{ background: #bbb; } #nav ul ul ul{ background: #aaa; } #nav ul ul ul ul{ background: #999; } #nav ul li ul li{ width: 120px; }