CSS: Create a dropdown menu with CSS

In this tutorial you will learn how to create your own menu using simple CSS properties to have a nice navigation menu bar on the website.

Here's how:

Homepage

Html-css
Iphone tips
More

Joomla

vBulletin

Network

It solution

Here is CSS:

.nav{ list-style-type:none; }
.nav li {float:left; display:block; background:#484848;}
.nav li a{display:block; padding:5px; color:#fff; text-decoration:none;}
.nav li a:hover{text-decoration:none; background:#fafafa; color:#000}

li.moreitem > a{ background:#484848; display:block; overflow:hidden }
li.moreitem{ position:relative; }

.moredropdown div{ padding:5px 0; display:block; clear:both; overflow:hidden}
li.moreitem div.moredropdown a{}

.moredropdown{ display:none; position:absolute; background:#484848; padding:5px; margin-top:20px; top:0; left:0; width:180px;}

li.moreitem:hover .moredropdown { display:block; }

HTML CODE:

<ul class="nav">
<li><a href="/http://itjungles.com">Homepage</a></li>
<li><a href="http://itjungles.com/html-css">Html-css</a></li>
<li><a href="/http://itjungles.com/iphone-tips">Iphone tips</a></li>
<li class="moreitem">
<a href="/http://itjungles.com/more">More</a>
<div class="moredropdown">
<div><a href="#">Joomla</a></div>
<div><a href="#">vBulletin</a></div>
<div><a href="#">Network</a></div>
<div><a href="#">It solution</a></div>
</div>
</li>
</ul>

Did you like this tip?

Comments (0)

< Prev		Next >