How can I achieve a sub-navigation like this? WordPress

Lisa comments:

no, not yet. I'm in the process of programming it.... Just trying to be proactive. Do you need the actual menu set up in order to provide assistance?

Gabriel Reguly comments:

Not needed at all, I was just curious if you saw it working somewhere.

Would a menu like this one [[LINK href="http://dev.omniwp.com.br/eventos/"]]http://dev.omniwp.com.br/eventos/[[/LINK]] be good enough?

Regards,
Gabriel

Lisa comments:

Hmmm, I do like that option- however the one I attached to this question is exactly what my client wants. If it isn't possible at all, i can show them that and ask.... Any way to do it the way I showed?

Gabriel Reguly comments:

designchemical, who answered below, has a nice page too.

[[LINK href="http://www.designchemical.com/lab/demo-wp-menu-css/parent-a/"]]http://www.designchemical.com/lab/demo-wp-menu-css/parent-a/[[/LINK]]

Regarding doing it exactly as you ask, sorry I can't do it. At least for $10. ;-)

Lisa comments:

Ok, understandable ;) How about telling me what CSS to use to achieve that one you recommended then?

Gabriel Reguly comments:

Surely, there it goes:


.menu {
font: normal 13px Arial, sans-serif;
background: url(../images/bg_blue_demo.png) repeat-x 0 -80px;
width: 100%;
height: 40px;
border-left: 1px solid #304B73;
position: relative; /* Required for positioning of sub-menus */
}
.menu li ul {
display: none; /* Required to hide menu when inactive */
position: absolute; /* Position the menu below and to the far left */
top: 40px;
left: 0;
}
/* This is the rule that displays sub-menus when a parent link is clicked */
.menu li.current-menu-parent ul, .menu li.current-menu-item ul {
display: block;
}
.menu li {
float: left;
margin: 0;
padding: 0;
font-weight: bold;
}
.menu li a {
float: left;
display: block;
color: #fff;
background: url(../images/bg_blue_demo.png) repeat-x 100% 0;
padding: 12px 25px;
text-decoration: none;
}
.menu li a:hover {
background-position: 100% -160px;
color: #fff;
}
/* Styling for current parent item */
.menu li.current-menu-item a, .menu li.current-menu-parent a{
background-position: 100% -40px;
color: #000;
}
/* Styling for sub-menus */
.menu li ul {
width: 904px;
background: url(../images/bg_blue_demo.png) repeat-x 0 -120px;
border: 1px solid #999;
border-top: none;
}
.menu li ul li {
padding: 6px 0;
}
.menu li.current-menu-item ul li a, .menu li.current-menu-parent ul li a {
background: url(../images/bg_bdr.png) repeat-y right center;
color: #666666;
padding: 6px 35px;
}
.menu li ul li a:hover {
color: #000;
}
/* Styling for current page sub-menu links */
.menu li.current-menu-parent ul li.current-menu-item a, .menu li.current-menu-parent ul li.current-menu-item a:hover {
color: #990000;
}


That is code [[LINK href="http://www.designchemical.com/blog/index.php/wordpress-tips/wordpress-tutorial-current-parent-menu-items-in-custom-menus/"]]http://www.designchemical.com/blog/index.php/wordpress-tips/wordpress-tutorial-current-parent-menu-items-in-custom-menus/[[/LINK]]

If you can afford a bigger prize, like $20, it would be nice to split it between him and me.

Lisa comments:

Thanks so much. I'll give it a shot in the next few days and keep you posted. ;)

Lisa comments:

I'll be using iThemes 'Builder' as the parent with a child theme for Builder activated as my main theme ;) I'm not really great at CSS :(

Duncan O'Neill comments:

Hi Lisa,

it's almost impossible to give you the css you need without knowing either
a) which iThemes Builder child you're going to be using OR
b) seeing a 'demo' or working version of your site.

But looking at the iThemes child theme [[LINK href="http://demos.ithemesbuilder.com/americana-libertas/"]]'liberatas'[[/LINK]], for example, getting rid of the following lines in the css will make the second-level menu lists display horizontally;


.builder-module-navigation li ul {
/* comment out by using slash asterisk , or get rid of, this line */ width:20em;
}

.builder-module-navigation li li {
/* comment out by using slash asterisk as I have, or get rid of, this line */ width:20em;
}


This may not help. If you want to let us know which child theme you're planning on using, I or someone here *may* be able to tell you what css changes you need to make. Some child themes look as if a horizontal 2nd-level menu would require too much hacking. OR you could message me with a url or FTP details, and I can try to edit the theme to achieve your desired menu.

best,

Lisa comments:

Hi Duncan,
I'm using the child them 'Default' from iThemes for builder.

Duncan O'Neill comments:

Can you point to the url of the demo please?

Duncan O'Neill comments:

For example, if you're using the same theme as this page;

[[LINK href="http://ithemes.com/builder-store/"]]http://ithemes.com/builder-store/[[/LINK]]

Just get rid of the line which begins "width".


.menu li ul {
left:-999em;
position:absolute;
width:150px;
}


And as long as your sub-menus are short enough to fit within the content area, you'll have horizontal rather than vertical 2nd-level menus.

Lisa comments:

Thanks Duncan. I don't have a demo URL as I haven't built the site yet. I will be very shortly. I just wanted to see if it was doable. Also, with your example, do you know if it is possible to get that little drop down bracket on the left side like my sample? Or is it too complicated?

Duncan O'Neill comments:

Lisa,

as others have said, yes, definitely doable, but again echoing Hai, and Gabriel, replicating your sample exactly is likely to cost more than $10. My code above is a starting point, and others have also offered code.