Question

我试图在菜单悬停上打开一个子菜单，但它不起作用，任何人都知道为什么这样做？子菜单也显示在菜单上。在悬停时，菜单右侧应打开子菜单。

以下是我的代码

<ul class="left_menu">        

                <li class="odd"><a href="#">kkk</a>
                    <ul class="smenu">
                        <li><a href="#">Photoshop</a></li>
                        <li><a href="#">Illustrator</a></li>
                        <li><a href="#">Web Design</a></li>
                    </ul>
                </li>

                <li class="even"><a href="#">bbb</a>
                    <ul class="smenu">
                        <li><a href="#">Photoshop</a></li>
                        <li><a href="#">Illustrator</a></li>
                        <li><a href="#">Web Design</a></li>
                    </ul>
                </li>

   </ul>

CSS

ul.left_menu{
width:180px;
padding:0px;
margin:0px;
list-style:none;
}
ul.left_menu li{
margin:0px;
list-style:none;

}
ul.left_menu li.odd a{
width:166px;height:25px;display:block; border-bottom:1px #e4e4e4 dashed;
text-decoration:none;color:#504b4b;padding:0 0 0 14px; line-height:25px;
}

ul.left_menu li.odd:hover
{
    display:block;
    color: #FFB03B;
}

ul.left_menu li.even:hover
{
    display:block;
    color: #FFB03B;
}

Answer 1

将CSS更改为：

ul.left_menu{
width:180px;
padding:0px;
margin:0px;
list-style:none;
}
ul.left_menu li{
margin:0px;
list-style:none;

}
ul.left_menu li.odd a{
width:166px;height:25px;display:block; border-bottom:1px #e4e4e4 dashed;
text-decoration:none;color:#504b4b;padding:0;
line-height:25px;
}
.smenu{
display:none
}
ul.left_menu li.odd:hover .smenu
{
display:block;
color: #FFB03B;
}

ul.left_menu li.even:hover .smenu
{
display:block;
color: #FFB03B;
}

Answer 2

首先将子菜单设置为不可见。

ul.left_menu ul {
  display: none;
}

然后代替：

ul.left_menu li.odd:hover
{
    display:block;
    color: #FFB03B;
}

使用：

ul.left_menu li.odd:hover ul
{
    display:block;
    color: #FFB03B;
}

Answer 3

Check this JSfiddle demo which i created, may be this will solve your issue.

JSFIDDLE

菜单悬停时子菜单未打开

3 个答案: