Навигация по выпадающему меню не охватывает весь текст

Question

Снимок экрана 1:

Скриншот 2:

Если вы посмотрите на скриншот1, то увидите, что при наведении курсора на веб-дизайн он не полностью меняет цвет фона. Однако это происходит в случае, если вы наводите курсор мыши на текст «Поисковая система» на снимке экрана 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

ваши вложенные теги сопоставляются селектором css #nav ul li a и поэтому плавают влево.

попробуйте добавить float:none; внутри #nav ul li ul li a