Использование дочернего комбинатора для отображения дочернего элемента при наведении

Question

Использование дочернего комбинатора для отображения дочернего элемента при наведении

0

Я пытаюсь создать меню навигации. У меня есть этот код HTML:

<div class="primaryNavigationContainer"><ul id="menu-menu-1" class="menu"><li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children menu-item-5"><a href="http://merrycode.com/cheekoo/wp/">Home</a>
<ul class="sub-menu">
    <li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="http://www.xyz.com">MerryCode</a></li>
    <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a href="http://www.google.com">Google</a></li>
</ul>
</li>
<li id="menu-item-6" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6"><a href="http://merrycode.com/cheekoo/wp/?page_id=2">Sample Page</a></li>
</ul></div>

И это CSS:

.menu a
{
    font: normal 14px Helvetica, sans-serif;
    padding-left:5px;
    padding-top:5px;
    padding-right:5px;
    float:left;
    color:black;

}
.menu-item a{

text-decoration:none;

}

.menu li a:hover > ul {

    display:block !important;
}

.sub-menu
{
display: none;
position: absolute;
top:120px;
width: 170px;
height:auto;
background: #edebeb;
z-index: 100000;
z-index: 99999;
-moz-box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.06);
-webkit-box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.06);
box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.06);
list-style-type: none;

}
.sub-menu a
{
float: none;
}

Я пытаюсь сделать подменю видимым, когда кто-то нависает над элементом меню. И следующий CSS, похоже, не работает:

 .menu li a:hover > ul {

        display:block !important;
    }

Что я делаю не так?

Umair Khan Jadoon 17 янв. 2014, в 21:37

Источник

0

Можете ли вы возиться с нами для редактирования.
saopayne 17 янв. 2014, в 20:39
0

Здесь вы идете: jsfiddle.net/NjpNN
Umair Khan Jadoon 17 янв. 2014, в 21:03

Теги:

html

css

2 ответа

1

Вы можете использовать :hover на <li> вместо тега <a>, попробуйте:

.menu li:hover > ul {
  display:block !important;
}

Если это необходимо, вы также наведете подменю.

DaniP 17 янв. 2014, в 19:06

Ещё вопросы

Можете ли вы возиться с нами для редактирования.

Adrift · Accepted Answer · 2014-01-17T18-48-00.000Z

Вместо этого используйте соседний комбинатор:

.menu li a:hover + ul {
    display: block !important; /* The UL is a sibling of a, not child */
}

Большое спасибо. Можете ли вы сказать мне еще одну вещь? Как сделать так, чтобы меню оставалось на экране, пока пользователь не откроет подменю или пункт меню? В настоящее время он исчезает, когда мы открываем элемент меню (извините, что беспокою).