Writing DropDown menu in CSS

SheoNarayan
Posted by SheoNarayan under CSS 3 category on | Views : 4854
This code snippet brings you a single item DropDown menu using CSS.

Write this code inside body, this will bring the menu.
    <ul id="TTPM">
<li id="TTPMI"><a href="/Profile/">My Profile</a>
<ul>
<li><a title="My Photo" href="/Users/Photo.aspx">My Sales</a></li>
<li><a href="/Users/MyOrders.aspx" title="My Orders">My Orders</a></li>
<li><a href="/Profile/Tutorials" title="My Tutorials">My Tutorials</a></li>
</ul>
</li>
</ul>


write below code inside <head></head> tag

<style>
/* START - toptop menu */
ul#TTPM
{
list-style: none;
float: left;
margin:0px;
padding:0px;
}

ul#TTPM li ul {
display: none;
}
ul#TTPM li
{
list-style: none;
font-weight:bold;
}
ul#TTPM li:hover > ul {
display: block;
position:absolute;
z-index:500;
padding:0px;
}
/* END - toptop menu */
</style>

Run your code and you should be able to see the link, mouse over and you should see a dropdown menu.

For a complete css multiple tab menu, look at this simple and cute example http://pinkandyellow.com/tutorials/menu.html

Thank you.

Comments or Responses

Login to post response