Раскрывающееся меню html / css не выпадает

Question

редактировать JSfiddle

---

Простой вопрос, у меня есть следующий код, но я не знаю, что добавить в мой CSS, чтобы поднять дисплей: нет; Если вам нужно дальнейшее объяснение, не стесняйтесь спрашивать в комментариях.

<nav>
        <ul>
            <li>
               <a href="[[~[[+id]]]]" title="[[+pagetitle]]">
                 [[+longtitle:default=`[[+pagetitle]]`]] 
               </a>
               <ul>
                  <li>
                     <a href="#" title=lorem>
                        [[Wayfinder? &startId=`[[+id]]` &level=`2` ]]
                     </a>
                  </li>
               </ul>
            </li>
        </ul>
    </nav>

---

/** Navigation **/

#nav ul{list-style: none; padding: 0; display: block;}
#nav ul li{display: inline-block; position: relative;}
#nav ul li a{ display: block; padding: 5px 8px; text-decoration: none; font-size: 16px; }

#nav ul li ul{
    position: absolute;
    left: 0px;
    background: rgba(0,0,0,0.8);
    border-radius: 0 0 5px 5px;
    display: none;
    z-index: 9000;
    display:none;
}
.ie7 #nav ul li ul,
.ie8 #nav ul li ul{
    background: url('../../assets/img/transparent-black.png') repeat;
}
#nav ul li.last ul{ right: 0px; left: auto; }
#nav ul li.last ul li a{ text-align: right; }
#nav ul li:hover ul,
#nav ul li ul:hover{ display: block; }
#nav ul li ul li{
    display: block;
    padding: 0;
    overflow: hidden;       
}
#nav ul li ul li a{
    min-width: 100px;
    margin: 0;
    padding: 7px 14px;
    color: #ffffff;
}
#nav ul li ul li:hover{ background: #f1f1f1; }
#nav ul li ul li a:hover{ color: rgba(253,183,46,1); }


nav li:hover > nav li ul li{
    background-color:red;
    overflow:visible;
}
nav li ul li{
    display:none;
}

Answer 1

Попробуй это:

    nav ul li ul li{
    display:none;
}

    nav ul li:hover > ul li{
        display:block;
    }

http://jsfiddle.net/vpZ5J/4/

Answer 2

Я думаю, что вы ищете это:

nav ul li:hover > ul {
   display: block;
}

Кроме того, у вас нет div с id #navТаким образом, все ваши стили не подходят, вы должны использовать только nav

Answer 3

Попробуйте добавить это:

nav ul li:hover li,
nav ul li:hover ul{
    display:block;
}

jsfiddle

Answer 4

Вы пытались скрыть li пункты в подменю. Вместо этого скрыть подменю ul а затем отобразить его при наведении. Для этого изменить это

nav li ul li{
    display:none;
}

в

nav li ul{
    display:none;
}

и добавь это

nav li:hover > ul{
    display:block;
}

DEMO

Answer 5

Добавьте следующее правило:

nav li:hover, nav li:hover ul li{
    display:block;
}

http://jsfiddle.net/vpZ5J/