Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

3rd level submenu using pure css/css3 WordPress

Hi there,

Site..: http://www.urimagnation.com
Issue: 3rd level menu is not displaying as expected.

For this issue I need to resolved it using pure css/css3, I might just be mixing or misplacing the 3rd level lines

The full Navigation code:

/* stely.css NAV Main Navigation*/
#nav {float: right; height: 68px; position:relative; left: -50%;}
#nav_list { height: 63px; position:relative; left: 50%;
line-height: 63px; list-style: none outside none; margin: 0 auto;}
#nav_list li { display: block; float: left; padding: 0 1em;}
#content {clear: both;}
#nav_list li.current_page_item{background: url(images/current_item.png) top center no-repeat;}
#nav_list li a{ color:#fff; text-decoration: none; display: block;}


/* style.css 1st level sub-Menus works as expect */
#nav_list li {position: relative;}
#nav_list li ul {position: absolute; left: 0; top: 55px;
width: 175px; line-height: 25px;
background: #1D3B5F; display: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
#nav_list li:hover ul {display: block;}
#nav_list li ul li a:hover {font-style:italic;}

<strong>/* style.css; 3rd level sub-menus not working/showing as expected*/</strong>
#nav_list li:hover ul li ul {display: none;}
#nav_list li li ul {position: absolute; left: 0; top: 55px;
width: 175px; line-height: 25px;
background: #1D3B5F; display: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

/*header.php at end of file*/
<!-- header -->
<?php
wp_nav_menu( array(
'menu' => 'Main Nav',
'menu_id' => 'nav_list',
'container' => 'div',
'container_id' =>
'nav', 'container_class' => '',
'depth' => 0)
); ?>

2012-01-02 by Alf Baez

Answers (3)

2012-01-02

designchemical answers:

Try:


#nav_list li:hover ul li ul {display: none;}

#nav_list li:hover ul li:hover ul, #nav_list li ul li:hover ul {display: block;}

#nav_list li li ul {position: absolute; left: 175px; top: 0;

width: 175px; line-height: 25px;

background: #1D3B5F;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;}

designchemical comments:

Any response on my answer?

2012-01-02

Christianto answers:

Hi,

your 3rd level menu is not style for open when mouse hover on the list, try this..
/*For 3nd level of sub-Menus */
/* style.css; 3rd level sub-Menus still not working*/
#nav_list li:hover ul li ul {display: none;}
#nav_list li li ul {position: absolute; left: 0; top: 55px;
width: 175px; line-height: 25px;
background: #1D3B5F; display: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
<strong>#nav_list li ul li ul { position: absolute; left: 175px; top: 0;}
#nav_list li ul li:hover ul {display: block;}</strong>
notice code I add on bold.

Alf Baez comments:

Hi Christianto,

I'll follow your solution it just need some adjustment to the hover, please take a look
http://www.urimagnationcom and test it and you'll notice that when trying to select the item it can't be selected.


Thanks in advance.

Christianto comments:

This because you put padding on li element and the element width isn't wide enough
try to delete padding on style.css line 49
#nav_list li {
display: block;
float: left;
<strong>padding: 0 1em;</strong>
}
and put it inside anchor element/<a> style.css line 52
#nav_list li a {
color: white;
text-decoration: none;
display: block;
<strong>padding: 0 1em;</strong>
}
and define list width same as its parent element/<ul>
<strong>#nav_list li ul li{ width: 175px }</strong>


if you have another 4th element then all style should be different.
Why don't you use javascript/jquery solution like [[LINK href="http://users.tpg.com.au/j_birch/plugins/superfish/"]]superfish[[/LINK]], it degrades gracefully without JavaScript so menu still can be access?

2012-01-02

Manoj Raj answers:

add this at the end of your css file..It wont affect other elements i guess (I have used #nav container instead of #nav_list)

#nav ul li ul { display:none; }
#nav ul li:hover > ul { display:block; position:absolute; top:55px; padding-left: 1em; }
#nav ul li:hover > ul li{ float:left; margin:0px; padding:0px; list-style:none; display: block; width: 175px; text-align: left;}


#nav ul li > ul li ul { display:none; }
#nav ul li > ul li:hover > ul { display:block; position:absolute; left: 175px; top: 0; background: transparent; padding-left: 2px;}
#nav ul li > ul li:hover ul li { margin:0px; padding:0px 2px; float:none; list-style:none; width:11em; position:relative; background: #1D3B5F;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

Manoj Raj comments:

this is a better and perfect solution.. Have a try.. Just add this at the end of your current css file.



#nav ul li ul { display:none; }

#nav ul li:hover > ul { display:block; position:absolute; top:55px; padding-left: 1em; }

#nav ul li:hover > ul li{ float:left; margin:0px; padding:0px; list-style:none; display: block; width: 175px; text-align: left;}





#nav ul li > ul li ul { display:none; }

#nav ul li > ul li:hover > ul { display:block; position:absolute; left: 176px; top: 0; background: #1D3B5F; padding-left: 1em;}

#nav ul li > ul li:hover ul li { margin:0px; padding:0px 2px; float:none; list-style:none; width:11em; position:relative;}

It works perfect for me..

Alf Baez comments:

Raj,

Tried on my end it doesn't work,
I could try your solution again but work with me on the naming convention please

I implemented as follow:

#nav_list ul li ul { display:none; }
#nav_list ul li:hover > ul { display:block; position:absolute;
top:55px; padding-left: 1em; }
#nav_list ul li:hover > ul li{ float:left; margin:0px; padding:0px;
list-style:none; display: block;
width: 175px; text-align: left;}
#nav_list ul li > ul li ul { display:none; }
#nav_list ul li > ul li:hover > ul { display:block; position:absolute;
left: 175px; top: 0; background: transparent; padding-left: 2px;}
#nav_list ul li > ul li:hover ul li { margin:0px; padding:0px 2px; float:none;
list-style:none; width:11em; position:relative; background: #1D3B5F;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

Manoj Raj comments:

the main division of your navigation container is <em><strong>nav</strong></em>. Thats the reason i used it... You can just copy and paste the whole code into your css.. It should work..

Manoj Raj comments:

You need not replace "#nav" with "#nav_list". You can just copy the code below and place it at the end of your current navigation block.

#nav ul li ul { display:none; }

#nav ul li:hover > ul { display:block; position:absolute; top:55px; padding-left: 1em; }

#nav ul li:hover > ul li{ float:left; margin:0px; padding:0px; list-style:none; display: block; width: 175px; text-align: left;}


#nav ul li > ul li ul { display:none; }

#nav ul li > ul li:hover > ul { display:block; position:absolute; left: 176px; top: 0; background: #1D3B5F; padding-left: 1em;}

#nav ul li > ul li:hover ul li { margin:0px; padding:0px 2px; float:none; list-style:none; width:11em; position:relative;}

I made the code just as an additional thing to make your existing css for menus works right.

Alf Baez comments:

Ok Raj,

Thanks for the prompt response and explanation, just implemented it works as you said it would. One more thing, how can I move the 3rd level/child sub menu so it shows up closer or a bit overlapping the parent menu? Please take a look http://www.urimagnation.com

Thanks in advance


Manoj Raj comments:

#nav ul li > ul li:hover ul li { margin:0px; padding:0px 2px; float:none; list-style:none; width:11em; position:relative;}


In the above line.. <em>padding:0px 2px;</em> is declared.. Change it to <em>padding:0px 0px;</em>

Manoj Raj comments:

You implemented the 1st solution given by me it seems.. Its better if you use the recent one.. Anyway i am pasting the code here again..


#nav ul li ul { display:none; }

#nav ul li:hover > ul { display:block; position:absolute; top:55px; padding-left: 1em; }

#nav ul li:hover > ul li{ float:left; margin:0px; padding:0px; list-style:none; display: block; width: 175px; text-align: left;}


#nav ul li > ul li ul { display:none; }

#nav ul li > ul li:hover > ul { display:block; position:absolute; left: 168px; top: 0; background: #1D3B5F; padding-left: 1em;}

#nav ul li > ul li:hover ul li { margin:0px; padding:0px 2px; float:none; list-style:none; width:175px; position:relative;}

In the above code, try changing the <em>left: 168px;</em> to whatever value you want for the spacing between the parent and the child