Create Drop Down Menu Using CSS Only

There are various styles in creating drop down menu using css only (no scripts).

<ul class="nav container-inner group" id="menu-top-menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-25" id="menu-item-25"><a href="http://localhost/shedesiresholiness/">Home</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-36" id="menu-item-36"><a href="#">Sprituality</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-40" id="menu-item-40"><a href="http://localhost/shedesiresholiness/category/hyms/">Hyms</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-37" id="menu-item-37"><a href="#">DIY</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-35" id="menu-item-35"><a href="#">Yumies</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-26" id="menu-item-26"><a href="http://localhost/shedesiresholiness/about/">About</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-28" id="menu-item-28"><a href="#">Submenu 1</a>
	<ul class="sub-menu">
		<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30" id="menu-item-30"><a href="#">Submenu 1-1</a></li>
		<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31" id="menu-item-31"><a href="#">Submenu 1-2</a></li>
	</ul>
</li>
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-29" id="menu-item-29"><a href="#">Submenu 2</a>
	<ul class="sub-menu">
		<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-32" id="menu-item-32"><a href="#">Submenu 2-1</a></li>
		<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-33" id="menu-item-33"><a href="#">Submenu 2-2</a></li>
	</ul>
</li>
</ul>
</li>
</ul>

ul#menu-top-menu > li {
     float: none;
     display: inline-block;
}
ul#menu-top-menu > li > .sub-menu {
	position: absolute;
	display: none;
}
ul#menu-top-menu > li:hover > .sub-menu {
	display: block;
}
ul#menu-top-menu > li > .sub-menu > li {
	position: relative;
	width: 100px
}
ul#menu-top-menu > li > .sub-menu > li > .sub-menu{
	display: none;
	border: solid gray 1px;
	position: absolute;
	margin-left: 100px; /*must be the same as the width of ul#menu-top-menu > li > .sub-menu > li*/
	top:0;
}
ul#menu-top-menu > li > .sub-menu > li:hover > .sub-menu {
	display: block;
}

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPrint this pageEmail this to someone

Leave a Reply

Your email address will not be published. Required fields are marked *