Проблема с выпадающим подменю

Question

Итак, я пытаюсь научить себя, как создавать и настраивать сайты WordPress, и я застрял на этом фрагменте кода в течение 2 дней. Поэтому я публикую здесь, поэтому, возможно, кто-то может помочь мне понять, что я делаю неправильно. Я начал учиться только примерно неделю или две назад, так что я знаю, что знаю.

Ну, я пытаюсь создать меню навигации, которое находится в заголовке веб-страницы только под контейнером заголовка сайта. Тема не предлагает расположение меню, кроме виджета боковой панели и нижнего колонтитула. Мне удалось пройти и добавить новое место темы для пользовательского меню через файлы тем.

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

.top-menu {} 
 
.top-menu ul { 
 
    list-style-type: none; 
 
    overflow: hidden; 
 
    width: 900px; 
 
    margin: 0px auto; 
 
    ; 
 
} 
 
.top-menu ul li { 
 
    width: 175px; 
 
    height: 50px; 
 
    float: left; 
 
} 
 
.top-menu ul li.current-menu-item { 
 
    background: blue 
 
} 
 
.top-menu ul li:hover { 
 
    background: red 
 
} 
 
.top-menu ul a { 
 
    font: 20px Cantarell, Arial, sans-serif; 
 
    color: #000; 
 
    display: block; 
 
    width: 175; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-decoration: none; 
 
    text-align: center; 
 
} 
 
.top-menu ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    background: #fff; 
 
    padding: 0 
 
} 
 
.top menu ul ul li { 
 
    float: none; 
 
    width: 200px; 
 
} 
 
.top menu ul ul a { 
 
    line-height: 120%; 
 
    padding: 10px 15px 
 
}

<div class="top-menu"> 
 
    <ul id="menu-header" class="menu"> 
 
    <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://notmymamaskitchen.com/home/">Home</a> 
 
    </li> 
 
    <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://notmymamaskitchen.com/about/">About</a> 
 
    </li> 
 
    <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-27"><a href="http://notmymamaskitchen.com/recipes/">Recipes</a> 
 
     <ul class="sub-menu"> 
 
     <li id="menu-item-51" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-51"><a href="http://notmymamaskitchen.com/category/appetizers-snacks/">Appetizers &amp; Snacks</a> 
 
     </li> 
 
     <li id="menu-item-52" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-52"><a href="http://notmymamaskitchen.com/category/breads/">Breads</a> 
 
     </li> 
 
     <li id="menu-item-53" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-53"><a href="http://notmymamaskitchen.com/category/breakfast/">Breakfast</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://notmymamaskitchen.com/contact/">Contact</a> 
 
    </li> 
 
    </ul> 
 
</div>

Пожалуйста, помогите !, Я бегу из волос вытащить:/

PS. Это мой первый вопрос, который я задал на этом сайте.

Answer 1

The jsfiddle of Michael comment поможет, я рекомендую вам использовать его, единственное, что мне не нравится это использование нижестоящих селекторов и использование opacity: 0 вместо display: none (я знаю, что для перехода но таким образом вы покажете пункт меню ниже), но в целом это хорошая отправная точка.

Я хочу дать вам несколько советов, которые помогут вам понять это, а другое - улучшить свой код.

Понимание поведения.

Вы есть .top-menu ul ul {display: none;} так что ваши .sub-menu не будет отображаться на всех (не имеет никакого влияния на макете) так, чтобы показать это, мы используем:

.menu-item{ 
    position: relative; /*with respect to this element sub-menu is positioned*/ 
    color: #333; 
} 
.menu-item:hover .sub-menu{ 
    display: block; /*show the menu when you hover the li.menu-item*/ 
} 

На этом этапе вы должны увидеть меню, но обратите внимание, что у вас есть .top-menu ul { overflow: hidden;}, поэтому переполнение обрезается, а остальная часть содержимого будет невидимой, в том числе до .sub-menu, просто удалите ее, и теперь вы можете увидеть свой .sub-menu, но у него будет стиль, слегка политый, потому что на него влияют стили .top-menu ul, .top-menu ul li и т. Д. .

Итак, моя рекомендация: используйте пример Майкла в качестве отправной точки, но избегайте использования Селекторы потомок не только это не работает, но и хрупко, так как изменения в HTML могут легко нарушить ваш CSS, желательно просто создать новый селектор классов CSS, который, кстати, вы уже используете в своем html, используйте их.

Проверьте это, это поможет вам улучшить свой код http://modernweb.com/2013/08/12/writing-better-css/?utm_source=html5weekly&utm_medium=email

Answer 2

Вы должны включить подменю на :hover родительского элемента:

.top-menu ul li:hover > ul { 
    display: block; 
} 

.top-menu ul { 
 
    list-style-type: none; 
 
    width: 900px; 
 
    margin: 0px auto; 
 
    position: relative; 
 
} 
 
.top-menu ul li { 
 
    width: 175px; 
 
    height: 50px; 
 
    float: left; 
 
} 
 
.top-menu ul li.current-menu-item { 
 
    background: blue 
 
} 
 
.top-menu ul li:hover { 
 
    background: red 
 
} 
 
.top-menu ul a { 
 
    font: 20px Cantarell, Arial, sans-serif; 
 
    color: #000; 
 
    display: block; 
 
    width: 175; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-decoration: none; 
 
    text-align: center; 
 
} 
 
.top-menu ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    background: #fff; 
 
    padding: 0 
 
} 
 
.top-menu ul ul li { 
 
    float: none; 
 
    width: 220px; 
 
} 
 
.top-menu ul ul a { 
 
    line-height: 120%; 
 
    padding: 10px 15px; 
 
    text-align: left; 
 
} 
 
.top-menu ul li:hover > ul { 
 
    display: block; 
 
}

<div class="top-menu"> 
 
    <ul id="menu-header" class="menu"> 
 
    <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://notmymamaskitchen.com/home/">Home</a> 
 
    </li> 
 
    <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://notmymamaskitchen.com/about/">About</a> 
 
    </li> 
 
    <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-27"><a href="http://notmymamaskitchen.com/recipes/">Recipes</a> 
 
     <ul class="sub-menu"> 
 
     <li id="menu-item-51" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-51"><a href="http://notmymamaskitchen.com/category/appetizers-snacks/">Appetizers &amp; Snacks</a> 
 
     </li> 
 
     <li id="menu-item-52" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-52"><a href="http://notmymamaskitchen.com/category/breads/">Breads</a> 
 
     </li> 
 
     <li id="menu-item-53" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-53"><a href="http://notmymamaskitchen.com/category/breakfast/">Breakfast</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://notmymamaskitchen.com/contact/">Contact</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 3

Между всеми ваши советы и помощь, а также некоторую помощь от этого video, мне удалось su ccessfully получить действующее и стилизованное выпадающее меню для сайта! Всем спасибо!