Проблема с подменю в моем меню WordPress

Question

Проблема с подменю в моем меню WordPress

Я создаю свою первую тему WordPress. Это очень просто для сайта друга, который является музыкальным продюсером. Я создаю меню навигации. Одним из пунктов меню является прослушивание. Это не фактическая ссылка. Вы наведите курсор мыши на это, и должно появиться подменю. Поэтому я сделал «Слушай» пользовательской ссылкой.

Проблема в том, что подменю не появляется. Подменю имеет свой собственный класс. Но я не думаю, что WordPress читает CSS

Вот CSS:

ul.sub-menu {
display: none;
position: absolute;
padding: 0px;
margin-left: -20px;
}

ul.sub-menu li {
display: block;
text-align: left;
background-color: grey;
}

ul.sub-menu li:hover {
background-color: #dae0e6;
}

ul.main_nav li:hover ul.sub-menu {
display: block;
}

Вот код HTML и php в header.php:

<nav>

<?php

$defaults = array(
'container' => false,
'theme_location' => 'primary-menu',
'menu_class'    => 'main_nav'
);

wp_nav_menu( $defaults );

?>
<!--
<ul class="main_nav">
<li>
<a href="home.html">Home</a>
</li>
<li>
<a href="bio.html">Bio</a>
</li>
<li>
<a>Listen</a>
<ul class="sub-menu">
<li><a href="musicOriginal.html">Originals</a></li>
<li><a href="musicTvfilm.html">TV/Film</a></li>
</ul>
</li>
<li><a href="credits.html">Credits</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
-->
</nav>

1

css html5 php submenu wordpress

Решение

Другие решения

Вот мой подход:

Я изменил CSS, так что он показывает подменю меню с CSS.

JsFiddle Demo

nav
{
margin-top:15px
}

nav ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}

nav ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

nav ul li
{
position:relative;
float:left;
margin:0;
padding:0
}

nav ul li:hover
{
background:#f6f6f6
}

nav ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}

nav ul ul li
{
float:none;
width:200px
}

nav ul ul a
{
line-height:120%;
padding:10px 15px
}

nav ul ul ul
{
top:0;
left:100%
}

nav ul li:hover > ul
{
display:block
}

<nav>
<ul class="main_nav">
<li>
<a href="home.html">Home</a>
</li>
<li>
<a href="bio.html">Bio</a>
</li>
<li>
<a>Listen</a>
<ul class="sub-menu">
<li><a href="musicOriginal.html">Originals</a></li>
<li><a href="musicTvfilm.html">TV/Film</a></li>
</ul>
</li>
<li><a href="credits.html">Credits</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

1

В приведенном выше примере ваше меню закомментировано. Также родительский элемент ul.sub-menu должен быть расположен относительно.

0

пожалуйста, назначьте ширину ul как

ul.sub-menu {
display: none;
}

и место

ul.main_nav li:hover ul.sub-menu {
display: block;
position: absolute;
padding: 0px;
margin-left: -20px;
top:0;
left:0;
width:800px;
}

только после этого

0

Источник

Accepted Answer

так как вы новичок … я думаю, вы должны начать с общего представления о подменю и стилизовать их в WordPress.

этот Тут тебе поможет
http://wproots.com/how-to-style-wordpress-menus-dropdowns/

Также я предложу другой вариант для вас.

начать с другой темы, как WordPress deafult тема и редактировать ее
стартовая форма стартовая тема, как http://bootstrapwp.rachelbaker.me/
начать с шаблона

трудно создать тему с нуля, если вы новичок … шаг за шагом

1