Question

Newbe question here.

When I do a mouse-over on a menu item then only fixed region is highlighted. The problem is that the next item on the menu consists of 2 long words and hover doesn’t cover it all, only a part of it.
Here is the code that makes it happen:

navlist {
    margin-left: -3px;
    padding-left: 0px;
    white-space: nowrap;
    position: absolute;
    height: 26px;
    width: 777px;
    top: 225px;
    background: url(images/mb2.jpg) repeat-x top left;
    font-family: Arial;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 20px;
}
#navlist li {
    display: inline;
    list-style-type: none;
}
#navlist li a {
    padding: 3px 10px;
    height: 20px;
    width: 91px;
    display: inline;
    position: absolute;
    text-align: center;
    color: #FFF;
    text-decoration: none;
    margin-top: 5px;
}
#navlist li a span {
    padding: 3px 10px;
    height: 20px;
    width: 71px;
    display: inline;
    position: absolute;
    text-align: center;
    color: #FFF;
    text-decoration: none;
    margin-top: -5px;
    font-weight: bolder;
}


#navlist a:hover {
    background: #0687eb;
    height: 10px;
    cursor: pointer;
}

Is it something that can be fixed (covering both words of menu item? I tried playing with width: 91px; value – the problem is that it can increase the area of being covered but hten it becomes to long and infringes on other menu items when you cover the first one)

Thanks.
Ideally I would like to highlight text only (letters of the text) – but not sure if it;s possible at all to do that for 2-words items)

Thank you.

Answer 1

Is your link in two lines of text and second line can not be hovered?
If so, try to remove height from #navlist li a span. this may help, but can also break layout.