Выпадающие меню при наведении и списках

В настоящее время я пытаюсь создать вертикальную навигационную панель, используя списки, однако я столкнулся с проблемами, когда, когда я наводил курсор мыши на ul, все выпадающие меню в li появляются или они не появляются вообще. Есть ли этому решение?Выпадающие меню при наведении и списках

HTML:

<body> 
    <div class="navbar"> 
     <ul> 
      <li>title</li> 
      <li>main text</li> 
       <div class="dropdown-content"> 
        <a href="#">text</a> 
        <a href="#">text</a> 
        <a href="#">text</a> 
       </div> 
      <li>main text</li> 
       <div class="dropdown-content"> 
        <a href="#">text</a> 
        <a href="#">text</a> 
        <a href="#">text</a> 
       </div> 
      <li>main text</li> 
       <div class="dropdown-content"> 
        <a href="#">text</a> 
        <a href="#">text</a> 
        <a href="#">text</a> 
       </div> 
     </ul> 
    </div> 
</body>

CSS:

.dropdown { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    border-radius: 15px; 
} 

.dropdown-content a { 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

.dropdown-content a:hover { 
    background-color: #f1f1f1; 
    border-radius: 15px; 
} 

.navbar ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 200px; 
    border: 1px solid #000000; 
    float: left; 
    border-radius: 25px; 
    background-color: #9cddf0; 
    height: 500px; 
    overflow: hidden; 
    line-height: 35px; 
} 

.navbar ul li { 
    display: block; 
    color: #000000; 
    padding: 0px; 
    text-decoration: none; 
    text-align: left; 
    padding-left: 5px; 
} 

.navbar ul:hover .dropdown-content { 
    display: block; 
}

На последних трех строках CSS, если я изменить его .navbar ul li:hover .dropdowncontent, выпадающее меню не отображается на всех.

В HTML, если я разместил выпадающий контент в листе, следующие два, которые должны отображаться в списке, выходят за пределы поля.

Заранее спасибо.

источник

2016-05-08 kappa322

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

Таким образом, в основном вам нужно поместить элементы контента в ли и стиль, это селектор зависания. Кстати, как раз для будущей ссылки, неупорядоченный список может иметь только li как своих детей, иначе это недействительный HTML.

https://jsfiddle.net/eo0shney/

<div class="navbar"> 
<ul> 
<li>title</li> 
<li> 
    main text 
    <div class="dropdown-content"> 
    <a href="#">text</a> 
    <a href="#">text</a> 
    <a href="#">text</a> 
    </div> 
</li> 
<li> 
    main text 
    <div class="dropdown-content"> 
    <a href="#">text</a> 
    <a href="#">text</a> 
    <a href="#">text</a> 
    </div> 
</li> 
<li> 
    main text 
    <div class="dropdown-content"> 
    <a href="#">text</a> 
    <a href="#">text</a> 
    <a href="#">text</a> 
    </div> 
</li>

источник

2016-05-08 14:46:59

Выпадающие меню при наведении и списках

ответ

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