Corporate Theme – Drop Down Menu doesn't display correctly

[danielleB]

The corporate theme is my favorite thus far and I was having a grand time designing a pretty cool site with it (went to bed with a smile yesterday!) and then spent all day trying to solve a problem with the drop-down menu with zero success and I can't take it anymore! Any help will be greatly appreciated. Here's what I did that screwed things up:

1) First, I wanted my header and primary navigation full-width, so I changed the CSS to reflect this: 1400 px
2) To align the primary navigation 'list' to the width of the rest of the page, I tweaked the CSS by adding a margin to:

#nav ul {
float: left;
margin: 0 0 0 160px; (this moved the menu to the right, which line it up perfectly with the content area)
width: 100%;

3) So far, I was pleased. But when I added child pages to the parents, I noticed that the drop-down menu didn't line up under the 'parent' menu item, so I tweaked the CSS again to move the drop-down menu directly beneath it's parent by adding to:

#nav li li {
margin: 0 0 0 -160px;

It worked, except that the block shrunk so that only two of the 4 sub-menu items now show up. It's as though the other items are hidden behind what's left of the drop-down block.

I wish I could provide a link, but I'm designing locally.

Can anyone help?

---

Danielle

[danielleB]

UPDATE...

I suspect it's the actual size of the drop-down box that prevents the sub-menu from displaying correctly.

Where in the CSS would I find the correct place to resize the drop-down menu box? Here is the current code for primary navigation:

/* Primary Navigation
------------------------------------------------------------ */

#nav {
background: url(images/nav.png);
border-top: 1px solid #fff;
clear: both;
color: #fff;
font-family: 'Droid Sans', arial, serif;
font-size: 12px;
margin: 0 auto;
overflow: hidden;
width: 1400px;
}

#nav ul {
float: left;
margin: 0 0 0 160px;
width: 100%;
}

#nav li {
border-right: 1px solid #333;
float: left;
list-style-type: none;
}

#nav li li {
border: none;
/*border-top: 1px solid #fff;*/
margin: auto -160px;
}

#nav li a {
border-right: 1px solid #000;
color: #fff;
display: block;
padding: 11px 20px 10px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}

#nav li a:hover,
#nav li a:active,
#nav .current_page_item a,
#nav .current-cat a,
#nav .current-menu-item a {
background: url(images/nav-hover.png);
color: #fff;
}

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

#nav li li a,
#nav li li a:link,
#nav li li a:visited {
background: none;
background-color: #333;
border: 1px solid #111;
border-top-width: 0;
color: #fff;
font-size: 12px;
padding: 6px 10px 5px;
position: relative;
text-transform: none;
width: 138px;
}

#nav li li a:hover,
#nav li li a:active {
background: none;
background-color: #111;
color: #fff;
}

#nav li ul {
height: auto;
left: -9999px;
position: absolute;
width: 160px;
z-index: 9999;
}

#nav li ul a {
width: 140px;
}

#nav li ul ul {
margin: -32px 0 0 159px;
}

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

/* Primary Navigation Extras
------------------------------------------------------------ */

#nav li.right {
float: right;
padding: 10px 10px 8px;
}

#nav li.right a {
background: none;
border: none;
display: inline;
text-decoration: none;
}

#nav li.right a:hover {
color: #444;
text-decoration: none;
}

#nav li.search {
padding: 0 10px;
}

#nav li.rss a {
background: url(images/rss.png) no-repeat center left;
margin: 0 0 0 10px;
padding: 0 0 0 16px;
}

#nav li.twitter a {
background: url(images/twitter-nav.png) no-repeat center left;
padding: 0 0 0 20px;
}

---

Danielle

[Author]

Posts