[Code] Navbar Drop Menu

demo: http://vovanan05.forumvi.com/h1-page

chèn ở over_head nơi muốn hiện navbar ( thay link với thay chữ đi nhé ) :

Code:: <ul id="nav"> <li class="top"><a href="#nogo1" class="top_link">Home</a></li> <li class="top"><a href="#nogo2" id="products" class="top_link">Products</a> <ul class="sub"> <li><a href="index.html" class="fly">Cameras</a> <ul> <li><a href="#nogo4">Nikon</a></li> <li><a href="#nogo5">Minolta</a></li> <li><a href="#nogo6">Pentax</a></li> </ul> </li> <li><a href="#nogo7" class="fly">Lenses</a> <ul> <li><a href="index.html">Wide Angle</a></li> <li><a href="#nogo9">Standard</a></li> <li><a href="#nogo10">Telephoto</a></li> <li><a href="#nogo11" class="fly">Zoom</a> <ul> <li><a href="#nogo12">35mm to 125mm</a></li> <li><a href="#nogo13">50mm to 250mm</a></li> <li><a href="#nogo14">125mm to 500mm</a></li> </ul> </li> <li><a href="#nogo15">Mirror</a></li> <li><a href="#nogo16" class="fly">Non standard</a> <ul> <li><a href="#nogo17">Bayonet mount</a></li> <li><a href="#nogo18">Screw mount</a></li> </ul> </li> </ul> </li> <li><a href="#nogo19">flash Guns</a></li> <li><a href="#nogo20">Tripods</a></li> <li><a href="#nogo21">Filters</a></li> </ul> </li> <li class="top"><a href="#nogo22" id="services" class="top_link">Services</a> <ul class="sub"> <li><a href="#nogo23">Printing</a></li> <li><a href="#nogo24">Photo Framing</a></li> <li><a href="#nogo25">Retouching</a></li> <li><a href="#nogo26">Archiving</a></li> </ul> </li> <li class="top"><a href="#nogo27" id="contacts" class="top_link">Contacts</a> <ul class="sub"> <li><a href="#nogo28">Support</a></li> <li><a href="#nogo29" class="fly">Sales</a> <ul> <li><a href="#nogo30">USA</a></li> <li><a href="#nogo31">Canadian</a></li> <li><a href="#nogo32">South American</a></li> <li><a href="#nogo33" class="fly">European</a> <ul> <li><a href="#nogo34" class="fly">British</a> <ul> <li><a href="#nogo35">London</a></li> <li><a href="#nogo36">Liverpool</a></li> <li><a href="#nogo37">Glasgow</a></li> <li><a href="#nogo38" class="fly">Bristol</a> <ul> <li><a href="#nogo39">Redland</a></li> <li><a href="#nogo40">Hanham</a></li> <li><a href="#nogo41">Eastville</a></li> </ul> </li> <li><a href="#nogo42">Cardiff</a></li> <li><a href="#nogo43">Belfast</a></li> </ul> </li> <li><a href="#nogo44">French</a></li> <li><a href="#nogo45">German</a></li> <li><a href="#nogo46">Spanish</a></li> </ul> </li> <li><a href="#nogo47">Australian</a></li> <li><a href="#nogo48">Asian</a></li> </ul> </li> <li><a href="#nogo49">Buying</a></li> <li><a href="#nogo50">Photographers</a></li> <li><a href="#nogo51">Stockist</a></li> <li><a href="#nogo52">General</a></li> </ul> </li> <li class="top"><a href="#nogo53" id="shop" class="top_link">Shop</a> <ul class="sub"> <li><a href="#nogo54">Online</a></li> <li><a href="#nogo55">Catalogue</a></li> <li><a href="#nogo56">Mail Order</a></li> </ul> </li> <li class="top"><a href="#nogo57" id="privacy" class="top_link">Privacy Policy</a></li> </ul>

chèn vào css:

Code:: .preload1 {background: url(http://www.stunicholls.com/menu/pro_dropdown_2/three_1.gif);} .preload2 {background: url(http://www.stunicholls.com/menu/pro_dropdown_2/three_1a.gif);} #nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(http://www.stunicholls.com/menu/pro_dropdown_2/three_0.gif) repeat-x; position:relative; z-index:200; font-family:arial, verdana, sans-serif;} #nav li.top {display:block; float:left; height:38px;} #nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(http://www.stunicholls.com/menu/pro_dropdown_2/three_0.gif);} #nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://www.stunicholls.com/menu/pro_dropdown_2/three_0.gif) right top no-repeat;} #nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://www.stunicholls.com/menu/pro_dropdown_2/three_0a.gif) no-repeat right top;} #nav li:hover a.top_link {color:#fff; background: url(http://www.stunicholls.com/menu/pro_dropdown_2/three_1.gif) no-repeat;} #nav li:hover a.top_link span {background:url(http://www.stunicholls.com/menu/pro_dropdown_2/three_1.gif) no-repeat right top;} #nav li:hover a.top_link span.down {background:url(http://www.stunicholls.com/menu/pro_dropdown_2/three_1a.gif) no-repeat right top;} /* Default list styling */ #nav li:hover {position:relative; z-index:200;} #nav li:hover ul.sub {left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; height:auto; z-index:300;} #nav li:hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;} #nav li:hover ul.sub li a {display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;} #nav li ul.sub li a.fly {background:#bbd37e url(http://www.stunicholls.com/menu/pro_dropdown_2/arrow.gif) 80px 6px no-repeat;} #nav li:hover ul.sub li a:hover {background:#6a812c; color:#fff; border-color:#fff;} #nav li:hover ul.sub li a.fly:hover {background:#6a812c url(http://www.stunicholls.com/menu/pro_dropdown_2/arrow_over.gif) 80px 6px no-repeat; color:#fff;} #nav li:hover li:hover ul, #nav li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover li:hover ul {left:90px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; z-index:400; height:auto;} #nav ul, #nav li:hover ul ul, #nav li:hover li:hover ul ul, #nav li:hover li:hover li:hover ul ul, #nav li:hover li:hover li:hover li:hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} #nav li:hover li:hover a.fly, #nav li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover li:hover a.fly {background:#6a812c url(http://www.stunicholls.com/menu/pro_dropdown_2/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;} #nav li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li:hover li a.fly {background:#bbd37e url(http://www.stunicholls.com/menu/pro_dropdown_2/arrow.gif) 80px 6px no-repeat; color:#000; border-color:#bbd37e;}