Dropdown Menu in Css and Html
DROPDOWN MENU IN CSS AND HTML
HTML
<ul id="menu">
<li><a href="#">Mobile</a>
<ul class="submenu">
<li><a href="#">sony</a></li>
<li><a href="#">apple</a></li>
<li><a href="#">micromax</a></li>
</ul>
</li>
<li class="tablet"><a href="#">tablet</a></li>
<li class="accessries"><a href="#">accessries</a></li>
</ul>
CSS
ul#menu,ul#menu ul.submenu{
margin:0;
padding:0;
}
ul#menu li,ul#menu ul.submenu li
{
list-style-type:none;
display:inline-block;
}
ul#menu li a,ul#menu ul.submenu li a{
text-decoration:none;
color:#666;
background:#fff;
display:inline-block;
padding:5px;
}
ul#menu li{
position:relative;
}
ul#menu li ul.submenu{
display:none;
position:absolute;
top:30px;
left:0px;
}
ul#menu li:hover ul.submenu{
display:block;
}
HTML
<ul id="menu">
<li><a href="#">Mobile</a>
<ul class="submenu">
<li><a href="#">sony</a></li>
<li><a href="#">apple</a></li>
<li><a href="#">micromax</a></li>
</ul>
</li>
<li class="tablet"><a href="#">tablet</a></li>
<li class="accessries"><a href="#">accessries</a></li>
</ul>
CSS
ul#menu,ul#menu ul.submenu{
margin:0;
padding:0;
}
ul#menu li,ul#menu ul.submenu li
{
list-style-type:none;
display:inline-block;
}
ul#menu li a,ul#menu ul.submenu li a{
text-decoration:none;
color:#666;
background:#fff;
display:inline-block;
padding:5px;
}
ul#menu li{
position:relative;
}
ul#menu li ul.submenu{
display:none;
position:absolute;
top:30px;
left:0px;
}
ul#menu li:hover ul.submenu{
display:block;
}
Comments
Post a Comment