Css menu hover отображает окно

Итак, я хотел создать панель навигации css, где, когда пользователи нависают над ней, она показывает коробку с концом.

Перед тем как наведите указатель мыши.

После наведения.

Возможно ли это, что я пытался, но не смог. Благодарю.Css menu hover отображает окно

источник

2013-09-29 CHASE

Да, вполне возможно, с чистым CSS. Что вы пробовали? –

Я пробовал сделать ul с li и li: hover отображает ul между оригиналом li – CHASE

Что-то вроде этого? http://jsfiddle.net/X367v/1/ –

Check out this Demo.

Да это может быть достигнуто за счет ввода наведении окна в элементу LI, а затем давая позицию родительского элемента по отношению и ребенок один абсолютный.

HTML

<ul> 
    <li>Home</li> 
    <li class="box">Categories 
     <div class="arrow_box">Box with Content</div> 
    </li> 
</ul>

CSS

ul { 
    margin: 0; 
    list-style: none; 
} 
ul li { 
    display: inline-block; 
    padding: 25px 10px; 
} 
ul li.box { 
    position: relative; 
} 
.arrow_box { background: #88b7d5; border: 4px solid #c2e1f5; } .arrow_box:after, .arrow_box:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-bottom-color: #88b7d5; border-width: 30px; left: 50%; margin-left: -30px; } .arrow_box:before { border-color: rgba(194, 225, 245, 0); border-bottom-color: #c2e1f5; border-width: 36px; left: 50%; margin-left: -36px; } 
.arrow_box { 
    position: absolute; 
    top: 68px; 
    padding: 10px 10px; 
    display: none; 
    width: 150px; 
    left: -50px; 
} 
ul li.box:hover .arrow_box { 
    display: block; 

}

Используется для создания CSS стрелка ->http://cssarrowplease.com/

источник

2013-09-29 04:55:08

Это очень близко, но как только вы наведите указатель мыши на категории и переместите курсор вниз по полю, он исчезнет. Это можно сделать? – CHASE

Да проверить обновленную скрипку сейчас http://jsfiddle.net/X367v/2/ .. на самом деле вам просто нужно играть с заполнением элементов li, и это можно решить. –

Большое спасибо – CHASE

уверен, вы можете попробовать вот так. Предполагая, что меню навигации имеет тег:

div { 
    display: none; 
} 
a:hover ~ div:nth-child(n) { 
    display: block; 
    background-color: RED; 
    height: 250px; 
    width: 960px; 
}

заменить n на порядок yor div. Например, если поместить DIV рядом с меткой, то значение п будет 2.

UPDATE:

вы также можете попробовать использовать имя класса или идентификатор DIV:

a:hover ~ .classname { 
    display: block; 
    background-color: RED; 
    height: 250px; 
    width: 960px; 
}

источник

2013-09-29 04:42:51

Css menu hover отображает окно

ответ

Смежные вопросы