html - wordpress 导航(自己的主题)

Question

我尝试创建一个带有悬停效果的导航。我的源代码:

<div id="nav">
        <nav id="mainnav" class="clearfix">


<div class="menu-mytheme-container"><ul id="menu-mytheme" class="menu"><li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-98"><a href="http://mysite.ch/mainmenu/">MAINMENU</a>
    <ul class="sub-menu">
        <li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a href="http://mysite.ch/submenu1/">Sumenu1</a></li>
        <li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a href="http://mysite.ch/submenu2/">Sumenu2</a></li>
    </ul>
...


#nav{
    width:250px;
    margin:20px 0 0 20px;
    float:left;
}

#menu-mytheme{
    margin:0; 
    padding:0; 
    overflow:hidden; 
    list-style-type:none;
    float:left;
}
ul#menu-mytheme a{
    list-style-type:none;
    text-decoration:none;
}
ul.sub-menu{
    list-style-type:none;
    display:none;
}
ul#menu-mytheme a:hover ul.sub-menu{
    display:block;
    color:red;
}

我在我的 style.css 中尝试了不同的选项，但没有任何效果...:-( 有人有在 wordpress 中使用悬停创建菜单的经验吗。

您好，yab86

Answer 1

你可以试试:

.sub-menu li a:hover
{
   color:red;
}

或改变

ul#menu-mytheme a:hover ul.sub-menu{
    display:block;
    color:red;
}

到

ul#menu-mytheme li ul.sub-menu li a:hover {
    display:block;
    color:red;
}

这应该给链接一个红色。