anony1

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:

http://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.

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 🙂

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!

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

Where abouts should I put that in the style.css?
Thanks

Problem resolved 🙂

Awesome.

Thank you both so much 😀