Secondary nav – submenu drop down problem

it’s hard to edit ul list while we watch ur website , but may that would be useful for u

#secondary-nav li ul{
z-index:9999;
position:absolute;
height:30px;
width:188px;
margin-left:250px;
padding:0pt;
}

try it out

paste the code on your style.css

root website /wp-content/themes/current theme/style.css
, paste it on the last line

I will try that.

Would it help if I pasted the code I already have for this section below?

/***** Secondary Nav Menu ********************/

#secondary-nav {
	margin: 10px 30px 0 30px;
	overflow: hidden;
	clear: both;
	font-family: "Helvetica Neue", 'Kreon', serif;
	border-top: 1px dashed #cccccc;
	border-bottom: 1px dashed #cccccc;
}

#secondary-nav ul {
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0 0 0 0px;
}

#secondary-nav ul ul {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 0px rgba(0, 0, 0, 0);
    margin:  0 0 0;
    padding: 0;
}

#secondary-nav li {
	display: inline;
	list-style: none;
}

#secondary-nav li a {
	color: #333333;
	font-size: 17px;
    font-weight: 300;
    margin: 0;
	padding: 8px 20px 10px 20px;
	text-decoration: none;
	display: block;
	display: inline-block;
	position: center;
}

#secondary-nav li a:hover, #secondary-nav li a:active {
	color: #FF0080;
}

#secondary-nav li a .sf-sub-indicator {
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	position: absolute;
}

#secondary-nav li li a, #secondary-nav li li a:link, #secondary-nav li li a:visited {
	color: #888888;
	width: 168px;
	font-size: 14px;
	margin: 0;
	padding: 5px 10px 5px 10px;
	border-bottom: 1px solid #efefef;
	text-transform: none;
	position: relative;
}

#secondary-nav li li a:hover, #secondary-nav li li a:active {
	background: transparent;
	color: #333333;
}

#secondary-nav li ul {
	z-index: 9999;
	position: absolute;
	left: -999em;
	height: auto;
	width: 188px;
	margin: 0 0 0 -1px;
	padding: 0 0 0 0;
}

#secondary-nav li ul a {
	width: 170px;
}

#secondary-nav li ul ul {
	margin: -33px 0 0 189px;
}

#secondary-nav li:hover ul ul, #secondary-nav li:hover ul ul ul, #secondary-nav li.sfHover ul ul, #secondary-nav li.sfHover ul ul ul {
	left: -999em;
}

#secondary-nav li:hover ul, #secondary-nav li li:hover ul, #secondary-nav li li li:hover ul, #secondary-nav li.sfHover ul, #secondary-nav li li.sfHover ul, #secondary-nav li li li.sfHover ul {
	left: auto;
}

#secondary-nav li:hover, #secondary-nav li.sfHover {
	position: static;
}

`hmm…. u know it’ hard too,i’m at work
if i finished my job after 2 hours may i solve it , time now 10:39 12 i finish

I’m sure the answer is in there somewhere! I’ll have another go too.

Would really appreciate your help if you have the time to take a look at it later.

Thanks again for all your help ??
Victoria.

I looked at your code and it looks like you did not change the margin-left to 250px — when that’s changed it works fine — so in the existing CSS here, change the margin

#secondary-nav li ul {
	z-index: 9999;
	position: absolute;
	left: -999em;
	height: auto;
	width: 188px;
	margin: 0 0 0 250px;
	padding: 0 0 0 0;
}

Thanks WPyogi – I changed that like you suggested (actually changed the margin to 227px which made it line up perfectly)

‘#secondary-nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 188px;
margin: 0 0 0 227px;
padding: 0 0 0 0;
}’

BUT

If any other menu item has a submenu the drop down just goes in the same place and doesn’t line up to it’s parent.

Ideas? :-S

Thanks!

Still having problems getting the submenus to line up. Would be really grateful if anyone could help me out ??

Cheers

It actually seems to be fine on my machine (Firefox 11 on a Mac). Maybe try clearing your browser cache and viewing again.

Looks like you also have quite a few CSS and Mark-up validation errors, so you might look at those too, in case they are causing problems in one browser vs. another.

Hi WPyogi – my firefox is on the blink at the moment (needs reinstalling no doubt) but I’m experiencing the problem in Chrome, Safari and in Safari on my iphone.

I’ve put a page up with screen grabs showing what I’m seeing:

How will I know how to spot and fix any errors? I’m not very fluent in HTML/CSS etc :-/

Thanks ??

Okay, gotcha — didn’t understand the alignment you were referring to. Try adding the text-align: left; to this (line 613 in style.css)

#secondary-nav li {
    display: inline-block;
    list-style: none outside none;
    text-align: left;
}

See the page I linked to about the Validation errors — it’s important to get rid of errors that can cause problems. Others are not really errors but a result of changing coding standards and/or browser support variations.

Sorry, it was my fault I wasn’t clear. Should have put up a screen grab first!

Thanks I will have a read and look into those errors.

Have tried that code if you want to have a look – still not quite right. What can I try next?

Thanks ??

Do you mean that the drop downs are just a bit too far to the left now?

If so, you can add a “margin-left: 15px;” to the above — which should move them over a bit.

It does also move over the top level names — so if you don’t like that, try adding this instead:

`#secondary-nav ul li ul li {
margin-left: 15px;
}

I meant that instead of just the text moving within the box that the entire box and text should move over so that it looks like this:

https://victoriaeightyfive.com/wp-content/uploads/2012/05/Screen2.jpg

So the text is central in the box and the whole text and box drop down is centrally underneath its parent on the main menu.

I’ve had a bit of a break through I made the following ‘position’ value to center.
The sub menus ARE centered but now they’re in full view all the time instead of being hidden until rolled over.

Ideas? :-S

#secondary-nav li ul {
z-index: 9999;
position: center;
left: -999em;
height: auto;
width: 168px;
margin: 0 0 0 0px;
padding: 0 0 0 0px;