CSS, Помогите добавить подменю в раскрывающееся меню

Question

Я пытаюсь добавить «подменю» в раскрывающееся меню. Скажем, я хотел добавить подменю в пункт 3 (см. Html), как бы я это сделал?

Спасибо,

Вот мой CSS:

.nav_menu { 
    width:100%; 
    background-color:#EFEFEF; 
    z-index:2000; 
    border:1px solid #ccc; 
} 
.selected { 
    background-color:#ccc; 
    color:#333; 
} 
.nav_menu a:link { 
    color:#007dc1; 
} 
.nav_menu a:visited { 
    color:#007dc1; 
} 
.nav_menu a:hover { 
    color:#007dc1; 
} 
.nav_menu ul { 
    text-align: left; 
    display: inline; 
    margin: 0; 
    padding: 15px 4px 17px 0; 
    list-style: none; 
} 
.nav_menu ul li { 
    font-size:16px; 
    display: inline-block; 
    margin-right: -4px; 
    position: relative; 
    padding: 8px 22px; 
    font-weight:600; 
    transition: all 50ms linear; 
    transition-delay: 0s; 
} 
.nav_menu ul li ul { 
    padding: 0; 
    position: absolute; 
    top: 37px; 
    left: 0; 
    width: 230px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
    display: block; 
    opacity: 0; 
    -webkit-transition: opacity .2s; 
    z-index:50000; 
} 
.nav_menu ul li ul li { 
    background-color:#535353; 
    border-top:1px solid #fff; 
    display: block; 
    font-size:12px; 
    color:#fff; 
} 
.nav_menu ul li ul li:hover { 
    background: #B2B2B2; 
} 
.nav_menu ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
} 

Вот мой HTML:

<ul> 
<li>All Items 
    <ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3 with Sub Menu</li> 
    </ul> 
</li> 
</ul> 

Answer 1

Во-первых, так как ваше меню основано просто на CSS: парить псевдо-класс, чтобы убедиться, что ваши ул и Ли элементы делают у них нет места между ними, потому что это приведет к исчезновению всего меню.

HTML-код

<div class='nav_menu'> 
    <ul> 
    <li>All Items 
     <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li class='nav_menu_sub'>Item 3 with Sub Menu 
      <ul> 
      <li>SubItem 3.1</li> 
      <li>SubItem 3.2</li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</div> 

Так же, как ниспадающего что вы уже предоставили, просто добавив уль элемент внутри элемента LI должно быть достаточно, чтобы создать подменю. Я добавил в класс класс nav_menu_sub, который открывает подменю, что упрощает выбор через CSS (избегая .nav_menu ul li ul li).

CSS-код

.nav_menu_sub { 
    padding:0; 
    margin:0; 
} 

.nav_menu_sub ul { 
    margin-top:-7px; 
    display: none !important; 
} 

.nav_menu_sub:hover ul { 
    display: block !important; 
    opacity: 1; 
    visibility: visible; 
} 

Маржа-топ: -7px на уль элемент был добавлен, чтобы гарантировать, что она прекрасно вписывается против ли.

Добавить важный атрибут отображения, чтобы он перезаписывал ранее объявленный стиль.

Рабочая jsFiddle: http://jsfiddle.net/akhrbkug/

Answer 2

Судя по CSS вы публикуемую:

.nav_menu ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
} 

Это выглядит, как вы нужно добавить ano Ther уль в подменю Ли:

<ul> 
<li class='nav-menu'>All Items 
    <ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3 with Sub Menu 
     <ul> 
     <li>SubItem 3.1</li> 
     <li>SubItem 3.2</li> 
     </ul> 
    </li> 
    </ul> 
</li> 
</ul> 

Fiddle для демонстрации http://jsfiddle.net/ee9ebv2s/