Third-level menu

Guess it’s going to take some time for me to figure this one out? I’m trying to edited it using firebug but i’m not having much luck. I’m pretty new to this css styling. I’m not sure what code to use to complete the snippet of code you supplied me with above.

Andre, thanks for the themes’ URL, it’s very helpful.

What do you want to achieve exactly with the 3rd level menu?

I’m trying to get it to perform like the 2nd level. It does not shift to the right far enough and it should have a grey box that appears when hovering over the text. I’m sure I’ll figure this out, it’ll just take a little time…lol

I can’t thank you enough for all your help. I’ll update this thread as to how i fixed it once completed.

Add this to the bottom of your Child Theme style.css file:

#header .dropdown-menu li a {
 color: #fff;
 line-height: 30px;
}

.dropdown-menu li a {
 display: block;
 padding: 3px 20px;
 clear: both;
 font-weight: normal;
 line-height: 20px;
 color: #333333;
 white-space: nowrap;
}

#header .dropdown-menu li a:hover,
#header .dropdown-menu li a:focus,
#header .dropdown-submenu:hover a,
#header .dropdown-submenu:focus a {
 background: none repeat scroll 0 0 #E7E7E7;
 color: #5E7349;
 filter: none;
}

.nav ul ul {
 margin:0;
}

Close but it’s preforming like the 2nd level again.

I’m sorry it’s not clear what you want:

I’m trying to get it to perform like the 2nd level

Sorry i’ll try to be more clear. Under the (areas serviced) tab on the menu there are 4 more tabs that display on the drop down menu when the (areas serviced) tab is hovered over, the bottom 3 are Pasco county roofing, Apollo beach roofing and Tampa Bay roofing these tabs should be hidden behind the top tab (service areas) and only shown when the service areas tab is hovered over.

I hope that helps!

Try adding this:

.nav ul ul {
 display: none;
}

.nav ul a:hover ~ ul {
 display: block;
}

So close I can almost touch it. The 3 tabs are now hidden behind the service areas tab but they don’t shift right when the tab is hovered over. They just appear underneath the service areas tab.

So try adding this instead:

#header .dropdown-menu li a {
 color: #fff;
 line-height: 30px;
}

.dropdown-menu li a {
 display: block;
 padding: 3px 20px;
 clear: both;
 font-weight: normal;
 line-height: 20px;
 color: #333333;
 white-space: nowrap;
}

#header .dropdown-menu li a:hover,
#header .dropdown-menu li a:focus,
#header .dropdown-submenu:hover a,
#header .dropdown-submenu:focus a {
 background: none repeat scroll 0 0 #E7E7E7;
 color: #5E7349;
 filter: none;
}

.nav ul ul {
 display: none;
 /* The "20px" here controls how far left you want it */
 margin-left: 20px;
}

.nav ul li:hover ul {
 display: block;
}

Take note to the line of code below this comment:

/* The “20px” here controls how far left you want it */

Hey Andrew I really do thank you, I’m satisfied with what I’ve accomplished with your guidance. I can tweak it from here “I think” .

Thanks!

Excuse me.
Sorry but i don’t like create a new topic for my small case.
I want to resize W*H of slide. Smaler than present

Picture
Thanks

sorry, this is my pictures

@a145026
You can probably receive a more detailed answer from one of the forum member above but until someone responds maybe I can help point you in the right direction…. If it was me, I would review the code using firebug ” a Firefox add-on for developers” it’s fairly easy to use.

Then when you find the code needed to make the change your after paste new code changes in the child themes custom CSS style sheet.

Hope this helps some.

Roger