Блог

Главная - Вопросы по программированию - Создание чистой унифицированной границы вокруг li и его ul с помощью CSS

Создание чистой унифицированной границы вокруг li и его ul с помощью CSS

#html #border

#HTML #граница

Вопрос:

В моем #header #nav , у меня есть <ul> внутри an <li> , который отображается на li:hover . Я хочу поместить границу вокруг всего, но по какой-то причине добавление границы вокруг main <li> приводит <ul> к тому, что внутри нее выравнивается на один пиксель слева.

Вот jsFiddle, чтобы показать, что я делаю:

http://jsfiddle.net/Mh3Hg/

Вот мой HTML:

 <div id="header">
  <div id="nav">
    <ul>
      <li id="thisli"><a href="#">Main Element</a>
        <ul id="children">
          <li><a href="#">First Child</a></li>
          <li><a href="#">Second Child</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- end nav -->
</div>

Граница, которая отбрасывает ее, является border-left:1px solid #99B3FF applied to li#thisli . Кто-нибудь может помочь мне понять, что не так?

Ответ №1:

Внутреннее ul всегда было внутри li . Граница — это то, что должно быть вокруг содержимого, поэтому теоретически ul она также находится вокруг внутреннего. Если вы явно определите положение внутреннего ul :

 #nav li:hover ul {
    display:block;
    z-index:100;
    left: 0px;
}

он выровнен: http://jsfiddle.net/Mh3Hg/4 /