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;
}

哪个链接应该是红色。

wordpress导航（自己的主题）

1 个答案: