Drop down menu hover does not cover whole text

[sanjeev40084]

Screenshot1:

Screenshot 2:

If you look at the screenshot1, you can see when you hover over web design it doesn’t completely change the background color. However it does in case you hover over text ‘Search Engine’ in Screenshot 2.

Here is the markup:

HTML:

My Health


Fitness


Diet & Nutrition



Webdesign


Development


Illustration


Search engine


WordPress






Stress Management

CSS:

#nav {

width: 100%;

height: 36px;

background: url('../images/nav-bg.png') repeat;

margin-bottom: 10px;

}

#nav ul li a{

display: block;

float: left;

font: bold 15px Arial, Helvetica, sans-serif;

color: #FFFFFF;

padding: 9px 14px;

}

#nav ul li a:hover{

color: #355da5;

background: #fff;

border: medium black;

}

#nav ul li ul{

display: none;

position: absolute;

top: 130px;

margin: 8px 0px 0px 180px;

background: url('../images/nav-bg.png') repeat;

}

#nav ul li ul li a{

text-align: center;

font-size: 12px;

}

#nav ul li:hover ul, li.over ul{

display: block;

}

How can i fix this issue?

Thank you.

Sanjeev

[SgtLegend]

Try setting a 100% width on the anchor element like in example below.

#nav ul li ul li a {

width: 100%;

}

Also i noticed you have set a 130 pixel offset for your child menus, instead of doing that simply set a relative position on the parent LI element and remove the top offset and it will open at the exact same position on the page.

[connectuma]

Try this

#nav ul li ul li:hover { background:#fff;}

[Author]

Posts