I’m using wordpress 3.4.1, and the headway theme. I’m not sure if headway is messing this up but I’m hoping someone can point me in the right direction.
The basic request – a submenu that displays horizontally when hover or click on the main menu item.
Here’s my html (the block ids and lots of code are inserted by headway):
<nav id="block-10" class="custom_YAP_menu block block-type-navigation block-fluid-height block-mirrored block-mirroring-10 block-original-97">
<div class="block-content">
<div class="nav-horizontal nav-align-center">
<ul id="menu-yap-menu" class="menu">
<li id="menu-item-750" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-750">
<a href="#" title="Solutions">Solutions</a>
<ul class="sub-menu">
<li id="menu-item-764" class="nav2 menu-item menu-item-type-post_type menu-item-object-page menu-item-764">
<a href="http://youradminpro.com/business-solutions-2/business-solutions/">Business Solutions</a>
</li>
<li id="menu-item-780" class="nav2 menu-item menu-item-type-post_type menu-item-object-page menu-item-780">
<a href="http://youradminpro.com/pricing/">Pricing</a>
</li>
</ul>
here’s the css:
body.custom #block-10 {position: relative; width: 100%;}
.block {-moz-box-sizing: float: left;}
menu, nav {display: block;}
.block-type-navigation li ul.sub-menu {left: -9999px; position: absolute; width: auto;
z-index: 150;}
.block-type-navigation ul { display: inline-block; }
ol, ul { list-style: none outside none;}
body.custom .block-type-navigation ul.sub-menu li a {margin: 5px 0 -5px -48px !important; padding: 3px 0 30px; }
body.custom .block-type-navigation ul li a {margin: 0 -10px 0 -20px; }
.block-type-navigation li ul.sub-menu li a {-moz-box-sizing: border-box; max-width: 500px;
min-width: 175px; width: auto; }
.block-type-navigation ul li a {display: block; white-space: nowrap; }
Inherited from: ul.sub-menu ol, ul { list-style: none outside none; }
I hope I copied everything you would need.
the site is: youradminpro.com
