CSS dropdown padding

Question

Без корректировки моего padding для моего «nav ul li», потому что он используется для разделения ссылок навигации, как я могу заполнить всю ширину выпадающих ссылок фона «nav ul li ul li», поскольку это только кажется для заполнения половины цвета фона.

(HTML): 

    <nav> 
    <ul> 
     <li><a href="#">Num 1</a></li> 
     <li><a href="#">Num 2</a></li> 
     <li><a href="#">Num 3</a></li> 
     <li><a href="#">Num 4</a></li> 
     <li><a href="#">Num 5</a></li> 
     <li><a href="#">Num 6</a> 
      <ul> 
       <li><a href="#">Drop 1</a></li> 
       <li><a href="#">Drop 2</a></li> 
      </ul></li> 
     <li><a href="#">Num 7</a></li> 
    </ul> 
</nav> 

    (css) 

JSFIDDLE

Примечание: Выбор не загружать CSS, как я должен использовать систему реферирования Гарварда и любые сходства по сравнению с онлайн-фрагментах возвращает как более высокий плагиате процент, даже если это моя собственная работа, так я захочу загрузить более точный код на JSFiddle, поскольку он не возвращается из теста плагиата.

Answer 1

хорошо быстрый способ, чтобы исправить это вместо того, чтобы добавлять отступы вы просто добавить 30px справа и слева от общей ширины нав уль Ли, которая заканчивает тем, что 125px

nav ul li { 
    border-right: 1px solid #355e7f; 
    display: inline-block; 
    float: left; 
    width: 125px; 
} 

Вот обновлено JSFIDDLE

Надеюсь, что это поможет!

Answer 2

Вот working demo

Измените свою обивка из li в a:

nav ul li a {width:65px; display:inline-block; padding:0 30px} 

и добавить дисплей и плавать приличия в second-level li:

nav ul li ul li { padding:0; border:none;display: list-item;float: none }