Расстояние на панели навигации при наведении

У меня проблема с панелью навигации. Когда я навожу указатель мыши на «О программе» или «Текст» на панели навигации, он показывает интервал в левой части кнопки, я хочу, чтобы цвет наведения содержал всю ширину кнопки.

https://jsfiddle.net/jdd3h0sf/3/

HTML:

<div id="nav">
<ul> 
    <li class="home"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Text &#8964;</a>
      <ul class="submenu">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li></li>
        </ul>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact &#8964;</a>
        <ul class="submenutwo">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li></li>
        </ul>
</ul>

CSS:

#nav { 
    background-color: #333;
    height: 52px;
    text-align: center;
    margin: 0 auto;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#nav li  {
    border-right: 1.8px solid #191919;
    height: auto;
    width: 156.5px;
    padding: 0;
    margin: 0;
}
.home  {
   border-left: 1.8px solid #191919;
}
#nav ul li { 
    display: inline-block;
}
#nav ul li:hover { 
    background-color: #444;
}
#nav ul li a, visted { 
    color: #ccc;
    display: block;
    padding: 15px;
    margin: 0;
    text-decoration: none;
}
#nav ul li a:hover { 
    color: #ccc;
    text-decoration: none;
}
#nav ul li:hover ul {
    display: block;
}
#nav ul ul { 
    display: none;
    position: absolute;
    background-color: #444;
    border: 1px solid #333;
    border-top: 0;
    max-width: 169px;
}
#nav ul ul li {
    display: block;
}
#nav ul ul li a:visited {
    color: #ccc;
}
#nav ul ul li a:hover {
    color: #2980B9;
}

html css nav spacing
person Community    schedule 29.10.2015    source источник
comment
Привет QTRLDN, добро пожаловать в Stack Overflow. Вам не нужно добавлять «Я нашел решение» к вашему вопросу. Достаточно просто принять ответ (зеленая галочка), который помог решить вашу проблему.   -  person Dhaust    schedule 30.10.2015

Ответы (2)


arrow_upward
1
arrow_downward

Это часть display:inline-block;. Если вы хотите, чтобы они отображались inline-block, есть несколько различных решений (Читайте об этом в статье css-Tricks):

1 - Измените формат HTML:

Измените html вашего <li> следующим образом:

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

Или это:

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

Или даже с комментариями, например:

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

Или просто поместите все li в одну строку:

<ul><li>one</li><li>two</li><li>three</li></li>

Это грязно, но эффективно.

2 - Отрицательные поля:

Довольно просто:

li{
  display: inline-block;
  margin-right: -4px;
}

3 - Пропустить закрывающий тег:

На самом деле это прекрасно работает в HTML5, li не обязательно должен иметь закрывающий тег.

<ul>
  <li>one
  <li>two
  <li>three
</ul>

4 - Установите размер шрифта <ul> на 0:

ul {
  font-size: 0;
}
ul li {
  font-size: 16px;
}

5 - Или просто плавайте <li>:

Все, что плывет в вашей лодке.

person Jacob Gray    schedule 29.10.2015
comment
Нашел это интересным. Мне нравится ваш первый вариант, но, по моему личному мнению, простое размещение элементов списка в одной строке было бы самым чистым: <li></li><li></li>. Но, тем не менее, очень интересно посмотреть на обходные пути, позволяющие хранить элементы в отдельных строках. - person Grant Miller; 30.10.2015
comment
@goatmeal lol, спасибо ребятам из css-tricks :D Я знал только о первом и втором варианте до того, как прочитал эту статью - person Jacob Gray; 30.10.2015
comment
@JacobGray Спасибо, №4 мне подходит! Моя веб-страница XHTML. - person ; 30.10.2015

arrow_upward
0
arrow_downward

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

Вы также можете просто float элементы, и это решит проблему.

#nav ul li { 
    float: left;
}
person Andy Noelker    schedule 29.10.2015