hover state menu item background

[dwlamb]

I am having a challenge with a hover state and css. In this pic of hovering over menu item Gallery the background bleeds down. This is the code for regular state:

#navigace ul.menu li a {
    display:block;
    font-size:11px;
    font-weight:bold;
    line-height:37px;
    padding:0 20px;
    text-transform:uppercase;
}

To get rid of the bleed state, all I could find that would work was

#navigace ul.menu li a:hover {
    display:inline;
}

However, if the user hovers over the active menu item - as in this pic of hovering over menu item Store the background effect changes to only encompass a smaller area of the anchor, not the whole menu item.

Input for how to rectify this so the hovered on menu item does not bleed down would be most appreciated.

[LastMitch]

@dwlamb

I am having a challenge with a hover state and css.

Instead of using:

display:block;

Try using:

display:inline-block;

Post the image if you can on how that looks.

I don't see any issue with your padding.

[ajbest]

Check for other CSS related to the <a> tags in their hover state. This looks like it could be a border issue or maybe a padding issue. If there are other css styles effecting the a:hover then you will need to reverse them for this nav element in it's hover state.

Note, I would not recomend changing your display type from one nav element state to another.

[dwlamb]

I followed the advice above of LastMitch. I am still having the same issue as depicted in the first screen shot shared above. However, only in Firefox (Kubuntu & Windows). Google Chrome (Kubuntu & Windows), Opera (Kubuntu & Windows), MSIE 8 (Windows) and Safari (Windows) all display the page as it should.

An inspection of the page in Firebug yields the following for all CSS declarations in use. It is identical to those listed in Opera or Chrome:

#navigace ul.menu li a:hover {
  background-color: #581B08;
  color: #F5F5DC;
}

#navigace ul.menu li a {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  line-height: 37px;
  padding: 0 20px;
  text-transform: uppercase;
}

#navigace li a:hover, #navigace li:hover a, #navigace li.sfHover a {
  text-decoration: none;
}

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, 
acronym, address, big, cite, code, del, dfn, font, 
img, ins, kbd, q, s, samp, small, strike, sub, sup, 
tt, var, center, dl, dt, dd, ul, li, fieldset, form, 
label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0 none;
  font-family: inherit;
  font-style: inherit;
  margin: 0;
  outline: 0 none;
}

#navigace li {
  list-style: none outside none;
}

I have tried toggling off font-size and line-height found in #navigace ul.menu li a but to no avail. Even looking at the Box-Model under Computed in Firebug and padding-bottom does not change in regular or hover.

[LastMitch]

@dwlamb

I have tried toggling off font-size and line-height found in #navigace ul.menu li a but to no avail. Even looking at the Box-Model under Computed in Firebug and padding-bottom does not change in regular or hover.

Are you using any CSS3 code?

try to adjust your padding:

padding: 0 20px;

The reason why because I don't see anything out of ordinary your CSS code.

[dwlamb]

Are you using any CSS3 code?

No, I am not.

[LastMitch]

@dwlamb

hover state menu item background

Post your nav menu code, so we can see how you put your menu in div container.