Question

我正在创建我的第一个WordPress主题。对于朋友的网站来说，这是一个非常简单的网站，他是一个音乐制作人。我正在创建导航菜单。菜单上的其中一项是听。这不是一个真正的链接。你将鼠标悬停在它上面，然后会出现一个子菜单。所以我让Listen成为一个自定义链接。

问题是子菜单没有出现。子菜单有自己的类。但我不认为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;
}

这是header.php中的HTML和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>

Answer 1

因为你是新手...我认为你应该首先了解子菜单并在WordPress中设置它们的样式。

这个Tut会帮助你 http://wproots.com/how-to-style-wordpress-menus-dropdowns/

我也会为你推荐其他选择。

从wordpress deafult主题开始形成其他主题并编辑
启动表单启动主题，如http://bootstrapwp.rachelbaker.me/
从模板开始

Answer 2

这是我的方法：

我改变了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>

Answer 3

在上面的示例中，您的菜单已被注释掉。此外，ul.sub-menu的父级也应相对定位。

Answer 4

请将宽度指定为ul

 getListView().setOnItemClickListener(myOnItemClickListener);
    OnItemClickListener myOnItemClickListener = new OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position,
                long id) {

        }
    };

和plaece

ul.sub-menu {
 display: none;
}

就在它之后

我的WordPress菜单中的子菜单出现问题

4 个答案: