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

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

0 голосов
/ 15 октября 2011

В моем #header #nav у меня есть <ul> в <li>, которое отображается на li:hover. Я хочу поставить рамку вокруг всего, но по какой-то причине добавление рамки вокруг основной <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, примененная к li#thisli. Может кто-нибудь помочь мне разобраться в чем дело?

1 Ответ

1 голос
/ 15 октября 2011

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

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

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

...