home

Css3 Sprites

This is simple Css dropdown menu with multi levels almost 4 levels combination of html, every thing can manage with css, it will work in all major browsers (we tested i all browsers). Just check the code you will easily understand.

First Level Drop Down Menu HTML Code

This First level drop down menu html code, ul tag has id (#Navigation) inside this number of list tags are there

<ul id="menu">
<li class="top"><a href="#22" id="services" class="top_link"><span class="down">Css Tutorials</span></a>
<ul class="sub">
<li><a href="#23">Printing</a></li>
<li><a href="#24">Photo Framing</a></li>
<li><a href="#25">Retouching</a></li>
<li><a href="#26">Archiving</a></li>
</ul>
</li>
<li class="top"><a href="#22" id="services" class="top_link"><span class="down">HTML Tutorials</span></a>
</li>
</ul>

First Level Drop Down Menu Css Code

#Navigation {padding:0; margin:0; list-style:none; height:30px; background:#3D67BD;
position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#Navigation li.top {display:block; float:left;}
#Navigation li a.top_link {display:block; float:left; line-height:30px; color:#fff; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 0px; cursor:pointer;background: #3D67BD;}
#Navigation li a.top_link span {float:left; display:block; padding:0 20px 0 12px;background:#3D67BD;}
#Navigation li a.top_link span.down {float:left; display:block; background:#3D67BD;}
#Navigation li a.top_link:hover {color:#fff; background:#3D67BD;}
#Navigation li a.top_link:hover span {background:url(blank_over.gif) no-repeat right top;}
#Navigation li a.top_link:hover span.down {background:url(blank_overa.gif) no-repeat right top;}

#Navigation li:hover > a.top_link {color:#fff; background:#3D67BD;}
#Navigation li:hover > a.top_link span {background:#3D67BD;}
#Navigation li:hover > a.top_link span.down {background:#213866;}

Multi Level Drop Down Menu HTML Code

<li class="top"><a href="#27" id="contacts" class="top_link"><span class="down">Jquery Tutorials</span></a>
<ul class="sub">
<li><a href="#28">Support</a></li>
<li><a href="#29" class="fly">Sales</a>
<ul>
<li><a href="#30">USA</a></li>
<li><a href="#31">Canadian</a></li>
<li><a href="#32">South American</a></li>
<li><a href="#33" class="fly">European</a></li>
<li><a href="#47">Australian</a></li>
<li><a href="#48">Asian</a></li>
</ul>
</li>
<li><a href="#49">Buying</a></li>
<li><a href="#50">Photographers</a></li>
<li><a href="#51">Stockist</a></li>
<li><a href="#52">General</a></li>
</ul>
</li>

Multi Level Dropdown Menu Css Code

#Navigation ul,
#Navigation li:hover ul ul,
#Navigation li:hover ul li:hover ul ul,
#Navigation li:hover ul li:hover ul li:hover ul ul,
#Navigation li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}