request assistance with creating horizontal submenu

[laraby]

I know this question has been asked before - I promise that I have researched this topic for hours and tried every solution I can find. I'm desperate!

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 (lots of extra code about blocks and classes is 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

 

THANK YOU SO MUCH in advance for your help.

 

 

[anevins]

Sorry could you rephrase the question & re-post the CSS in code tags

[laraby]

I would like to create a horizontal sub-menu in wordpress.

I have researched for hours and hours and tried every bit of css I could figure out.

I would really appreciate the help.

 

the site is: youradminpro.com

 

thanks in advance

 

I am using the headway theme which inserts a lot of extra html for blocks and classes - it is a drag & drop theme using blocks.

 

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

 

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

 

[anevins]

I'm not sure if wordpress is any different and why but normally, horizontal menus can be created with styling the <li> to float left.

 

In your case:

.sub-menu li{ float: left; }

 

Your -9999px indent looks supsicious, if this is the problem, 8px looks alright instead.

[anevins]

Do you have the styles to hide the sub-menu until interacted with?