nategg

Lovely, thanks!

Thanks, I think I’ve managed to find where to put the code now. It’s still not working though…

This is what my code looks like…

/* @ Main Nav */

.main_nav {
line-height: 1.1em;
text-align: left;
margin: auto;
z-index:28; /* Fancybox Uses 30 */
position: relative;
width: 952px;

}

.main_nav .content-pad{
padding-top: 0px;
background color: #000;
}
.main_nav ul{
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
}
.main_nav li{display: block; float: left; position: absolute;}
.main_nav ul li{
margin-left: 0px;
padding: 0px;
display: block;
float: left;
text-align: left;
vertical-align: baseline;
}
.main_nav li a{
background:#e3e4e5;
padding: 10px 15px 10px;
text-decoration: none;
display: none;
float: left;
border: 1.5px solid white;
border-bottom:none;

}

.main-nav li a{
font-size: .85em;
}

/*IE6 border color (transparent border fix)*/
*html .main_nav li a{ border-color: white; }

/* Drop Down */
.main_nav ul ul {
background-color:#000;
display:none;
left:0;
padding:0;
top:30px;
width:10em;
}
.main_nav ul ul li {
display: block;
float: left;
}

#primary-nav ul.main-nav {
width:952px;
}
ul.sf-menu, .sf-menu * {
margin-left: 0px;
padding: 0;
list-style: none;
background-color: #e3e4e5;
}

ul.sf-menu ul.sub-menu, ul.sf-menu ul.children {
display:block;
float:left;
margin-top:0;
padding: 0px;
text-align:left;
width:10em;
}
ul.sf-menu, .sf-menu * {
background-color:#e3e4e5
}
.main-nav li a:hover,
background-color:#60615f
}
.main-nav li.current_page_item a
background-color:#a2a1a1
}

.sf-menu { line-height: 1.0; }
ul.sf-menu ul.sub-menu, ul.sf-menu ul.children {
display: block;
float: left;
width: 10em; /* left offset of submenus need to match (see below) */
margin-top: 0;
padding: 0;
text-align: left;
}

ul.sf-menu li:hover { visibility: inherit; /* fixes IE7 ‘sticky bug’ */ }
ul.sf-menu li {
display: block;
float: left;
margin: 0;
}

ul.sf-menu li a{ padding: 10px 15px 10px; display: block; float: left;}
ul.sf-menu ul li a{ width: 120px; padding: 10px 15px 10px; display: inline; float: left; }
.sf-menu a {
display: block;
float: left;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
width: 120px;
top: 34px; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}

Thanks!

Hi Aaron,

I think this may be also the answer I’ve been looking for. i.e. I want the drop-down menu from the primary navigation to go across the screen rather than down so that the drop-down menu does not obscure the site content.

Would you be able to explain further as to where this code needs to go? I’m using pagelines pro and there seem to be alot of different css files relating to navigation… Also what do you mean by referencing the code?

Many thanks!!!