Submenu doesn't overflow hidden

Question

The problem is that when i hover on the area where the more link is, the menu appears and it should appear only if i have hovered over the More link, not on the area. I tried with overflow:hidden on the sub-menu .ktmsg ul li ul { but doesn't work. I have the below code

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

This is because min-width of .ktmsg a is set to 150px. I suggest you to move it to .ktmsg li and it should solve problem you are mentioned.

As well you have to change .ktmsg ul a:hover + ul this is selector what should be instead to .ktmsg ul li:hover ul. And as well .ktmsg a shouldn't have float: left and paddings.

To ul doesn't disappear you have to add one other selector:

.ktmsg ul a + ul:hover, 
.ktmsg ul a:hover + ul {
    overflow:visible;
    display:block;
    opacity: 1;
    /* rest of style */
}

Answer 2

Remove min-width: 150px; from style

Answer 3

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

Answer 4

I think it is working as you want it to, it's just that you have a min-width of 150px applied to your a links which is making the more link wider than you think it is.