Hello. I've got a horizontal nav with a dropdown menu that is working fine in Safari, but in Firefox all the dropdowns hang from the left edge of the nav, not under their respective tabs. This site is my maiden voyage with WordPress, (but not my first time w/ CSS) and I don't know if that plays a part in it. I've tried to tease out where I messed up, but I think I've glazed over at this point.

Here is a link to the site: www.luciastrini.com

and I'm posting CSS below.

Any and all help would be most appreciated. Thank you, Katie

CSS overrides I put in the theme options box:

#content-container {
padding: 5px 25px 25px 25px;
}
h1.page-heading {
display: none;
}

h2 {
    font-size: 32px;
margin-top: 12px;
padding-top: 5px;
}
#intro h2 {
font-size: 32px;
padding-left: 5px;
text-align: left;
}

hr {
    border-top: 0px solid #ccc;
}


#searchform {
    margin-top: -5px;
        padding-bottom: 30px;
}

.sidebar-box h4 {
    border-bottom: 0px;
    margin-top: 5px;
        margin-bottom: 10px;
    padding-bottom: 0px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#menu ul li.menu-item a {
    padding: 12px 15px 13px;
}

#menu ul li.current-menu-item a, #menu ul li.current-menu-ancestor a {
   background-color: #0A195C;
    color: #FEF200;
}

#logo-container {
    float: none;
}

#menu-container {
    float: none;
   margin-top: -38px;
   max-width: 100%;
}

#menu ul {
    text-align: center;
}

#menu br {
    display: none;
}

#menu ul ul {
width: 130px;
    top: 27px;
    text-align: left;
    z-index: 20000;
background-color: #d4e9f8;
    display: none;
}

#menu ul ul li.menu-item a {
margin-left: -10px
margin-top: -6px;
padding-left: 10px;
padding-top: 6px;
padding-bottom: 12px;
background-color: #d4e9f8;
color: #636363;
}

#menu ul ul li.menu-item a:hover {
color: #0a195c;
}

#menu #search-input {
    margin: 0 20px;
}
#menu #sidebar_search {
    float: right;
    margin: -45px 0 0;
}

**CSS Code in the main style css (I made changes here too, before I found the place for the overrides in the theme options box)** 

    /*---------- CODE FOR DROP DOWN ------------*/
#menu ul,#menu ul * {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu ul {
    line-height: 1.0;
}

#menu ul ul {
    position: absolute;
    top: -999em;
    width: 14em; /* left offset of submenus need to match (see below) */
}

#menu ul ul li {
    width: 100%;
}

#menu ul li:hover {
    visibility: inherit; /* fixes IE7 'sticky bug' */
}

#menu ul li {
    position: relative;
}

#menu ul a {
    position: relative;
}

ul#menu ul li:hover li ul,ul#menu ul li.sfHover li ul {
    top: -999em;
}

ul#menu ul li li:hover ul,ul#menu ul li li.sfHover ul {
    left: 14em; /* match ul width */
    top: 0;
}

ul#menu ul li li:hover li ul,ul#menu ul li li.sfHover li ul {
    top: -999em;
}

ul#menu ul li li li:hover ul,ul#menu ul li li li.sfHover ul {
    left: 14em; /* match ul width */
    top: 0;
}


/*** DEMO SKIN ***/
#menu ul {
    margin-bottom: 1em;
}

#menu ul a {
    text-decoration: none;
}

#menu ul li:hover,#menu ul li.sfHover,#menu ul a:focus,#menu ul a:hover,#menu ul a:active
    {
    outline: 0;
}

/*** arrows **/
#menu ul a.sf-with-ul {
    padding-right: 2.25em;
    min-width: 1px;
    /* trigger IE7 hasLayout so spans position accurately */
}

.sf-sub-indicator {
    position: absolute;
    display: block;
    right: .75em;
    top: 1.05em; /* IE6 only */
    width: 10px;
    height: 10px;
}

a>.sf-sub-indicator { /* give all except IE6 the correct values */
    top: .8em;
    background-position: 0 -100px;
    /* use translucent arrow for modern browsers*/
}

/* apply hovers to modern browsers */
a:focus>.sf-sub-indicator,a:hover>.sf-sub-indicator,a:active>.sf-sub-indicator,li:hover>a>.sf-sub-indicator,li.sfHover>a>.sf-sub-indicator
    {
    background-position: -10px -100px;
    /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
#menu ul ul .sf-sub-indicator {
    background-position: -10px 0;
}

#menu ul ul a>.sf-sub-indicator {
    background-position: 0 0;
}

/* apply hovers to modern browsers */
#menu ul ul a:focus>.sf-sub-indicator,#menu ul ul a:hover>.sf-sub-indicator,#menu ul ul a:active>.sf-sub-indicator,#menu ul ul li:hover>a>.sf-sub-indicator,#menu ul ul li.sfHover>a>.sf-sub-indicator
    {
    background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
    padding: 0 8px 9px 0;
}

.sf-shadow ul.sf-shadow-off {
    background: transparent;
}

/*---------- END CODE FOR DROP DOWN ------------*/
/*-------------------------MENU---------------------------------*/
#menu-container {
    float: right;
    margin-top: 2px;
    max-width: 1000px;
    margin-left:auto;
    margin-right:auto;
}


#menu ul {
    text-align: right;
}

#menu ul li {
    display: inline;
}

#menu ul li a {
    text-transform: uppercase;
    /*text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);*/
    padding-left: 12px;
font-size: 13px;
    line-height: 0.15em;
    color: #535353;
    height: 8px;
    font-style: normal;
    letter-spacing: 1px;
}

#menu ul li a:last-child {
    padding-right: 0px;
}

#menu ul li a:hover {
    color: #0a195c;
    /*text-shadow: 1px 2px 0px rgba(0, 0, 0, 0.4);*/
    text-decoration: none;
}

#menu ul li.selected a {
    color: #f1f1f1;
}

.drop-arrow {
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    position: relative;
    top: -1px;
    left: 2px;
display: none;
}

/*---------- DROP DOWN ------------*/
#menu ul ul {
width: 150px;
    top: 27px;
    text-align: left;
    z-index: 20000;
background-color: #d4e9f8;
    display: none;
}

#menu ul ul li:last-child,#menu ul ul li:last-child a {
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius:  0 0 3px 3px;
    border-radius:  0 0 3px 3px;
}


#menu ul ul li:first-child,#menu ul ul li:first-child a {
    -moz-border-radius-topright: 3px;
    -moz-border-radius-topleft: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

#menu ul ul ul {
    top: 0px;
    left: 150px;
    padding: 0px;
}

#menu ul ul li a, #menu ul ul li a:visited {
    color: #636363;
font-size: 11px;
    height: 25px;
    text-align: left;
    line-height: 20px;
    display: block;
}


#menu ul ul ul {
    border-bottom-width: 1px;
    border-left-width: 0px;
}

a.sf-with-ul {
    display: inline;
}

#menu ul .sf-sub-indicator {
    top: 6px;
    right: 18px;
}

#menu ul ul li .sf-sub-indicator {
    top: 6px;
    right: 7px;
}

2 answers

danwellman 5600
1
point

Just set left:0; on the #menu ul ul selector, and that will then position the menus correctly in all browsers

If you set this in style.css, you might need to give the selector more specificity so that it overrides the styles set in cssLoader.php, which you could do by changing the selector to: #header-bg #menu ul ul

Firebug is a great resource for nailing issues such as this :)

Answered over 7 years ago by danwellman
0
points

You da man!!! Thank you!! I've used Firebug a bit. Can you explain how I could have used it in this instance to detect where the issue was?

Answered over 7 years ago by Katie Chester
  • Sure, to diagnose the issue, I used the HTML tab in Firebug to select one of the hidden submenus, then clicked into the #menu ul ul selector in the style tab at the right and added the left:0 style rule. This let me preview what the style would do. To be honest, I already had a strong suspicion that left:0 would be required. That didn't come from Firebug and unfortunately, there isn't a plugin for it, it's just experience ;) danwellman over 7 years ago
  • Thank you again. Katie Chester over 7 years ago