Попытка создать раскрывающийся список в CSS3

Question

Я безуспешно пытался над этим поработать, по какой-то причине подсписок просто не отображается! Я пробовал: nav > ul > li:hover > ul{}, но это, похоже, нарушает функциональность кода. Я уверен, что это довольно простая проблема.

nav > ul {
  list-style: none;
}
nav > ul > li {
  padding: 20px;
  float: left;
}
nav > ul > li {
  background-color: #fff;
}
nav > ul > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
}
nav > ul > ul > li {
  float: none;
  width: 200px;
}
nav > ul > li:hover {
  color: #4169E1;
  display: block;
  visibility: visible;
}
body {
  background: black;
}

<nav>
  <ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Secure</li>
    <ul>
      <li>How secure are we?</li>
      <li>We are not secure enough!!</li>
    </ul>
    <li>Mad</li>
  </ul>
</nav>

html css

0

IE8IsBetterThenGoogleChrome 30 Сен 2014 в 09:51

Взгляните на это cssdeck.com/labs/another-simple-css3-dropdown -меню

–

Ruchan

30 Сен 2014 в 09:54

Когда я добавляю дополнительный 'ul' после :hover, кажется, что это нарушает функциональность кода. Например, цвет текста больше не меняется при наведении курсора на элемент.

–

IE8IsBetterThenGoogleChrome

30 Сен 2014 в 09:59

Answer 1

Упростите селекторы (nav ul ul) - это нормально
Сделайте родительский li position: relative так, чтобы раскрывающиеся списки position: absolute располагались по отношению к ним. Используйте подходящее значение top
В вашем примере visibility: visible ничего не делает. display: none и display: block используются, чтобы скрыть / показать
Правильно размещайте свои списки. Это правильный способ:

<ul>
    <li>Top Menu Item
        <ul>
            <li>Sub-menu Item</li>
        </ul>
    </li>
</ul>

Подробнее: Вложенные списки на w3.org

CSS / HTML / Демо

* {
  margin: 0;
  padding: 0;
}
nav ul {
  list-style: none;
  padding: 0;
}
nav ul li {
  padding: 20px;
  float: left;
  background-color: #fff;
  position: relative;
}
nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
}
nav ul ul li {
  width: 200px;
  background: #FFF;
  padding: 10px;
}
nav ul li:hover ul {
  color: #4169E1;
  display: block;
}
body {
  background: black;
}

<nav>
  <ul>
    <li>Home</li>
    <li>About Us
      <ul>
        <li>This is us!</li>
        <li>This is us!</li>
        <li>This is us!</li>
        <li>This is us!</li>
      </ul>
    </li>
    <li>Secure
      <ul>
        <li>How secure are we?</li>
        <li>We are not secure enough!!</li>
      </ul>
    </li>
    <li>Mad</li>
  </ul>
</nav>

1

misterManSam 30 Сен 2014 в 10:19

Answer 2

Чтобы указать на одну из ваших ошибок

   <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Secure
           <ul> **--> this should be inside li** 
                <li>How secure are we?</li>
                <li>We are not secure enough!!</li>
            </ul>
        </li>

        <li>Mad</li>
    </ul>

И ваш css

Добавь это

nav > ul > li:hover > ul{
  display: block;
  opacity: 1;
  visibility: visible;
}

Проверить скрипку http://jsfiddle.net/ruchan/4fk6y2wu/

0

Ruchan 30 Сен 2014 в 10:07

Answer 3

Используйте больше возможностей css3 !

См. Демо здесь

См. Полноэкранный режим

enter image description here

<nav>
    <ul id="menu">
        <li class="category top_level"><a class="selected" href="#">Home</a></li>
        <li class="category top_level"><a href="#">About</a></li>
        <li class="category top_level"><a href="#">Secure</a>
                    <ul class="dropdown">
                <li class="item"><a href="#">How secure are we?</a></li>
                <li class="item"><a href="#">We are not secure enough!!</a></li>
            </ul>
        </li>
        <li class="category top_level last"><a href="#">Mad</a>
        </li>
    </ul>
</nav>

css

body {
    font-family:'Montserrat', sans-serif;
    background:#000;
}
ul {
    list-style-type: none;
}
#menu a {
    text-decoration: none;
    white-space: nowrap;
    color: #222;
    background-color: #fff;
}
#menu li.top_level {
    vertical-align: top;
    zoom: 1;
    display: block;
    float: left;
    width: 16.5%;
    margin-right: 0.2%;
    position: relative;
    text-align:center;
}
#menu li.last {
    margin-right: 0px;
}
#menu .dropdown {
    float: none;
    z-index: 100;
    position: absolute;
    width: 100%;
    height: 0;
    overflow: hidden;
}
#menu .category:hover .dropdown, #menu .category:focus .dropdown {
    height:auto;
}
#menu .item a, #menu .category a, #menu .category a:visited, #menu .item a:visited {
    line-height:2em;
    display:block;
    padding:.6em;
    border-top: #ffffff 2px solid;
}
#menu .item a:hover, #menu .category a:hover, #menu .item a:focus, #menu .category a:focus {
    background:#007dac;
    -webkit-transition: background-color 940ms;
    -moz-transition: background-color 940ms;
}
#menu a.selected {
    color: #ffffff;
    background-color: #007dac;
}

0

Suresh Karia 30 Сен 2014 в 10:29

Пожалуйста, включите свой CSS в ответ.

–

Jon P

30 Сен 2014 в 10:28

Попытка создать раскрывающийся список в CSS3

3 ответа

Похожие вопросы

Новые вопросы

html