Навигационная ширина и ширина выпадающего окна

Question

У меня есть пара проблем, к которым решение ускользало от меня. Первая проблема:

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

Вторая проблема связана с раскрывающимся элементом. В настоящий момент ширина автоматически настраивается на ширину самого длинного слова (т. Е. Пробелы заставляют слова переходить к следующей строке). Во-первых, как мне это остановить, и, во-вторых, можно ли регулировать ширину, чтобы она всегда была такой же широкой, как расстояние между границами по обе стороны от основных навигационных ссылок? (EDIT: Игнорируйте первую часть этого пункта я случайно удалил white-space:nowrap из CSS Вторая часть по-прежнему является проблемой, хотя..)

Link to fiddle

HTML:

<nav class="bg"> 
    <ul class="width nav"> 
     <li><span class="bord"></span></li> 
     <li><a href="#">DropLink</a> 
      <ul class="drop"> 
       <li><a href="#">LongerLinkName</a></li> 
       <li><a href="#">LongLink WithSpace</a></li> 
       <li><a href="#">Link</a></li> 
      </ul> 
     </li> 
     <li><span class="bord"></span></li> 
     <li><a href="#">Link</a></li> 
     <li><span class="bord"></span></li> 
     <li><a href="#">Link</a></li> 
     <li><span class="bord"></span></li> 
     <li><a href="#">Link</a></li> 
     <li><span class="bord"></span></li> 
     <li><a href="#">Link</a></li> 
     <li><span class="bord"></span></li> 
    </ul> 
</nav> 

CSS:

*{margin:0;padding:0;font-size:small;vertical-align:middle;} 
a{color:#F00;text-decoration:none;} 
.width{margin:0 auto;min-width:1000px;width:84%;} 
.bg,.drop{background:#000;} 
nav>ul{width:100%;text-align:justify;font-size:0;position:relative;} 
nav>ul:after{content:"";width:100%;display:inline-block;} 
nav li{list-style:none;display:inline-block;position:relative;} 
nav a{display:inline-block;background:rgba(0,0,0,0);transition:background 0.2s linear;padding:8px;} 
nav a:hover{background:rgba(0,0,255,1);} 
.drop{position:absolute;left:-1000px;top:-1000px;opacity:0;transition:opacity .5s,top 0 .25s,left 0 .25s;border-left:1px solid #BBB;border-right:1px solid #BBB;border-bottom:1px solid #BBB;} 
.nav li:hover .drop{left:0;top:100%;opacity:1;transition:opacity .5s,top 0s,left 0s;} 
.bord{border-left:1px solid #000;border-right:1px solid #555;padding:7px 0;} 

Кроме того, пока я нахожусь на этом, почему я не могу получить границы точно такой же высоты, как и сама навигационная панель? Если я увеличиваю заполнение, он становится слишком длинным. Если я уменьшу заполнение, он станет слишком коротким.

Приносим извинения, если вашему браузеру необходимы префиксы в коде. Я заменил префикс CSS для скрипта, который делает это для меня.

Answer 1

Вопрос 1: Я не 100% уверен, что вы хотите сделать здесь, но проблема у вас возникает, как представляется, вытекает из следующих функций:

.width{margin:0 auto;min-width:1000px;width:84%;} 

Изменения этой строки в следующем решает проблему, но может иметь другие проблемы, если вы намеренно имели ширину набор меньше:

.width{margin:0 auto;min-width:1000px;background:#000;width:84%;} 

вопрос 2: Я недавно ответил на очень похожий вопрос на: Li element breaking content even with display block

Answer 2

Для вашей первой проблемы я не смог ее повторить (возможно, я вас неправильно понял).

Для вашего второго вопроса вы можете остановить обертывание ссылки в нав со следующим CSS:

.nav a { 
    //other styles 
    white-space: nowrap; 
} 

Answer 3

Я думаю, что я получил то, что вы после:

HTML (удалено граница Ли, потому что родитель Ли из выпадающих должно быть полная шириной вы хотите выпадающий быть):

<nav class="bg"> 
<ul class="width nav"> 
    <li><a href="#">DropLink</a> 
     <ul class="drop"> 
      <li><a href="#">LongerLinkName</a></li> 
      <li><a href="#">LongLink WithSpace</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
</ul> 

CSS:

* {margin: 0; padding: 0; font-size: small; vertical-align: middle;} 
a {color: #F00; text-decoration: none;} 
.width {margin: 0 auto; min-width: 1000px; width: 84%; } 
.bg {min-width:1000px;} 
.bg, .drop {background: #000;} 
nav>ul {width: 100%; text-align: justify; font-size: 0; position: relative;} 
nav>ul:after {content: ""; width: 100%; display: inline-block;} 
nav ul li {border-right: 1px solid #555; list-style: none; display: inline-block; position: relative; text-align:center; width:19%;} 
nav ul li:first-child {border-left:1px solid #555;} 
nav a {display: inline-block; background: rgba(0,0,0,0); transition: background 0.2s linear; padding: 8px;} 
nav a:hover {background: rgba(0,0,255,1);} 
.drop {position: absolute;left: -1000px;top: -1000px;opacity: 0;transition: opacity .5s, top 0 .25s, left 0 .25s;border-left: 1px solid #BBB;border-right: 1px solid #BBB;border-bottom: 1px solid #BBB;} 
.nav li:hover .drop {left: 0;top: 100%;opacity: 1;transition: opacity .5s, top 0s, left 0s;} 
nav ul ul {min-width:100%;} 
nav ul ul li, 
nav ul ul li a {border:0;display:block;text-align:left;white-space:nowrap;width:auto;}