子菜单不会溢出隐藏

Question

问题是当我将悬停在区域时，链接越多，菜单就会出现，只有当我悬停在“更多”链接上时才会显示，不在该区域上即可。我在子菜单overflow:hidden上尝试使用.ktmsg ul li ul {，但无效。 我有以下代码

HTML

<div class="ktmsg">
    <li><a id="a0" href="#"> 0 </a></li>
    <ul>
        <li class="a1"><a href="#"> 1 </a></li>
        <li>
            <a href="#">More</a>
            <ul>
                <li class="a4"><a href="#"> 4 </a></li>
                <li class="a5"><a href="#"> 5 </a></li>
                <li class="a6"><a href="#"> 6 </a></li>
            </ul>
       </li>
   </ul>
</div>

CSS

.ktmsg {
font-size: 16px;
font-weight: normal;
margin: 0px;
height: 18px;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
width: 930px;
padding: 0px;
text-align: left;
height: 20px;
position: relative;
font-weight: normal;
font-size: 15px;
background-color: red;
}

.ktmsg a{
text-align: center;
padding: 13px 4px;
white-space: nowrap;
float: left;
text-decoration: none;
background:red;
color: #FFF;
min-width: 150px;
transition: all 0.4s;
}

.ktmsg ul{
list-style: none outside none;
width: 100%;
position: relative;
padding-left:0px;
}

.ktmsg li {
float:left;
position:relative;
list-style-type: none;
display: inline;
padding: 0px;
margin: 0px 10px;
background-image: none;
}

.ktmsg li a, .ktmenu li a:active, .ktmenu li a:visited {
margin:0px;
color: #FFF;
border: 0px;
text-decoration: none;
font-weight: bold;
}

.ktmsg ul li a:hover {
color: blue;
text-decoration: none;
}

.ktmsg a, .ktmsg a:active, .ktmsg a:visited {
color: #FFF;
margin:0px;
padding: 0px;
text-decoration: none;
}

.ktmsg ul li ul {
overflow:hidden;
padding:0;
background:red;
opacity:0;
height:auto; 
width:auto;
margin-top:25px;
position:absolute;
transition-property: opacity;
box-shadow: 0 0 2px 2px;
border-radius: 6px;
transition-duration: 1s;
transition-timing-function: linear;
transition-timing-function: ease-out;
}

.ktmsg ul li:hover ul{
overflow:visible;
display:block;
background:red;
height:auto; 
width:auto;
margin-top:25px;
opacity: 1;
box-shadow: 0 0 2px 2px;
border-radius: 6px;
}

.ktmsg ul li ul li{
background:red;
padding: 10px;
border-bottom: 1px solid rgb(51, 51, 51);
}

Fiddle-DEMO

Answer 1

这是因为min-width的{​​{1}}设置为.ktmsg a。我建议你把它移到150px，它应该解决你提到的问题。

同样你必须更改.ktmsg li这是选择器应该改为.ktmsg ul a:hover + ul。同样.ktmsg ul li:hover ul不应该有.ktmsg a和填充。

要float: left消失，您必须添加另一个选择器：

ul

Answer 2

我认为它按照你的意愿工作，只是你的链接的最小宽度为150px，这使得链接的链接比你想象的要宽。

Answer 3

.ktmsg ul li ul {
 overflow: hidden !important;
}

Answer 4

从样式

中删除min-width: 150px;