子菜单未在菜单悬停时打开

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