html вложенные списки - PullRequest
Новая
       3

html вложенные списки

0 голосов
/ 12 июля 2011

Я пытаюсь создать навигационное меню, используя вложенные списки, однако всякий раз, когда я устанавливаю высоту для li, она разбивает списки, а подменю лежат над окончательным li, я имею ссылку на то, что я имею в виду,

Пример вложенного списка

Как я могу исправить свой код, чтобы получить что-то похожее на следующее?

  • Элемент списка
  • Элемент списка
    • Элемент подсписка
    • Элемент подсписка
    • Элемент подсписка
    • Элемент подсписка
  • Элемент списка

Ответы [ 2 ]

1 голос
/ 12 июля 2011

Несколько проблем здесь: 

.seconday_nav {
  width: 95px;
  float: left;
  margin: 32px 0px 0px 0px; }
  .seconday_nav ul li, .seconday_nav ul.subnav li {
    width: 93px;
    text-align: right;
    padding: 10px 0px;
    border: 1px solid green;
    display: block;
    height: 25px; } /* PROBLEM 1 */
    .seconday_nav ul li a, .seconday_nav ul.subnav li a {
      background-image: -webkit-gradient(linear, left top, right top, color-stop(0.35, white), color-stop(0.68, #f4f5f5));
      background-image: -moz-linear-gradient(left center, white 35%, #f4f5f5 68%);
      display: block;
      width: 100%; /* PROBLEM 2 */
      height: 100%;
      padding: 0px 10px 0px 10px; }

Проблема 1: вы задаете высоту 25px для элемента, который содержит все элементы подсписка .seconday_nav ul li влияет на li, который содержит subnav.

Проблема 2 .: Вы задаете заполнение для элемента, ширина которого объявлена ​​равной 100%, что всегда дает 100% родительского + заполнение, поэтому оно переполняет родительский. Поскольку вы уже присваиваете a элементов display: block, нет необходимости указывать им 100% ширины, только высоту.

Это должно помочь вам начать решать вашу проблему:)

1 голос
/ 12 июля 2011

Измените свой CSS на это. 

.seconday_nav {
  width: 95px;
  float: left;
  margin: 32px 0px 0px 0px;
}
ul.subnav {
   margin-left: 60px;
}
.seconday_nav ul.subnav li {
    width: 93px;
    text-align: right;
    padding: 10px 0px;
    border: 1px solid green;
    display: block;
    height: 25px;
}
.seconday_nav ul li a, .seconday_nav ul.subnav li a {
      background-image: -webkit-gradient(linear, left top, right top, color-stop(0.35, white), color-stop(0.68, #f4f5f5));
      background-image: -moz-linear-gradient(left center, white 35%, #f4f5f5 68%);
      display: block;
      width: 100%;
      height: 100%;
      padding: 0px 10px 0px 10px;
}

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

...