Html 下拉菜单悬停不覆盖整个文本

屏幕快照1:

屏幕截图2:

<div id="nav">
    <ul>
        <li><a href="#" >My Health</a></li>         
        <li><a href="#" >Fitness</a></li>
        <li><a href="#" >Diet &amp; Nutrition</a>
            <ul>
                <li><a href="#">Webdesign</a></li>
                <li><a href="#">Development</a></li>
                <li><a href="#">Illustration</a></li>
                <li><a href="#">Search engine</a></li>
                <li><a href="#">WordPress</a></li>
            </ul>           
        </li>
        <li><a href="#">Stress Management</a></li>                          
    </ul>
</div>

#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;                 
                    }

如果你看屏幕截图，你会发现当你在网页设计上停留时，背景颜色并没有完全改变。不过，如果您将鼠标悬停在屏幕截图2中的文本“搜索引擎”上，它会这样做。 以下是标记： Html:

<div id="nav">
    <ul>
        <li><a href="#" >My Health</a></li>         
        <li><a href="#" >Fitness</a></li>
        <li><a href="#" >Diet &amp; Nutrition</a>
            <ul>
                <li><a href="#">Webdesign</a></li>
                <li><a href="#">Development</a></li>
                <li><a href="#">Illustration</a></li>
                <li><a href="#">Search engine</a></li>
                <li><a href="#">WordPress</a></li>
            </ul>           
        </li>
        <li><a href="#">Stress Management</a></li>                          
    </ul>
</div>

#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;                 
                    }

有人知道我该怎么解决这个问题吗？

---

谢谢。

在

#nav ul li a

上尝试设置

宽度：100%

在

#nav ul li a

上尝试设置

宽度：100%

您的嵌套标记与css选择器

#nav ul li a

匹配，因此向左浮动

尝试添加

float:none

内部

#nav ul li a

您的嵌套标记与css选择器

#nav ul li a

匹配，因此向左浮动

---

尝试添加

float:none内部
#nav ul li li a
+1-这把小提琴会告诉你哪里出了问题。链接不是块级元素。这意味着它们会收缩以适应其内容。通过给出明确的100%宽度，他们现在将填充容器。将宽度：100%添加到
#nav ul li a
以查看修复。它最终给了我一些奇怪的结果。+1-这把小提琴会告诉你哪里错了。链接不是块级元素。这意味着它们会收缩以适应其内容。通过给出明确的100%宽度，他们现在将填充容器。将宽度：100%添加到
#nav ul li a
以查看修复。结果给了我一些奇怪的结果。