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; }