下拉菜单悬停不包括整个文本

Question

屏幕截图1：

屏幕截图2：

如果您查看screenshot1，您可以看到当您将鼠标悬停在网页设计上时，它不会完全改变背景颜色。但是，如果您将鼠标悬停在屏幕截图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>

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

有谁知道我该如何解决这个问题？ 谢谢。

Answer 1

尝试在width: 100%上设置#nav ul li a。

Answer 2

你的嵌套＆lt; a＆gt;标签由css选择器#nav ul li a匹配，因此向左浮动。

尝试在float:none;

中添加#nav ul li ul li a