如何在懸停和定位第一個孩子時定位手風琴？

Question

我想在懸停時嚴格限制菜單。菜單會改變顏色和大小，但不會影響li菜單。我會怎麼做？

請注意，這是假設爲手風琴菜單。 nav（sub）在鼠標懸停在菜單上時展開。我花了很多時間，但是我不能瞄準菜單而不搞亂子。

<nav id="menu_box"> 
    <ul class="menu"> 
    <li> <a href="#">Menu</a> 
     <ul> 
     <li><a href="#">sub</a></li> 
     <li><a href="#">sub</a></li> 
     <li><a href="#">sub</a></li> 
     </ul> 
    </li> 
    <li> <a href="#">Menu</a> 
     <ul> 
     <li><a href="#">sub</a></li> 
     <li><a href="#">sub</a></li> 
     <li><a href="#">sub</a></li> 
     </ul> 
    </li> 
    <li> <a href="#">Menu</a> 
     <ul> 
     <li><a href="#">sub</a></li> 
     <li><a href="#">sub</a></li> 
    </ul> 
    </li> 

    </ul> 
</nav> 

這裏是CSS：

https://jsfiddle.net/kgrxqL0k/1/

Answer 1

也許這：

.menu > li li a:hover { 
    color: pink; 
} 

---

#cssmenu, 
 
#cssmenu ul, 
 
#cssmenu ul li, 
 
#cssmenu ul li a { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    list-style: none; 
 
    line-height: 1; 
 
    display: block; 
 
    position: relative; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#cssmenu { 
 
    width: 220px; 
 
    font-family: Raleway, sans-serif; 
 
    color: #ffffff; 
 
} 
 
#cssmenu ul ul { 
 
    display: none; 
 
} 
 
#cssmenu > ul > li.active > ul { 
 
    display: block; 
 
} 
 
.align-right { 
 
    float: right; 
 
} 
 
#cssmenu > ul > li > a { 
 
    padding: 16px 22px; 
 
    cursor: pointer; 
 
    z-index: 2; 
 
    font-size: 16px; 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
    -webkit-transition: color .2s ease; 
 
    -o-transition: color .2s ease; 
 
    transition: color .2s ease; 
 
} 
 
#cssmenu > ul > li > a:hover { 
 
    color: #d8f3f0; 
 
} 
 
#cssmenu ul > li.has-sub > a:after { 
 
    position: absolute; 
 
    right: 26px; 
 
    top: 19px; 
 
    z-index: 5; 
 
    display: block; 
 
    height: 10px; 
 
    width: 2px; 
 
    content: ""; 
 
    -webkit-transition: all 0.1s ease-out; 
 
    -moz-transition: all 0.1s ease-out; 
 
    -ms-transition: all 0.1s ease-out; 
 
    -o-transition: all 0.1s ease-out; 
 
    transition: all 0.1s ease-out; 
 
} 
 
#cssmenu ul > li.has-sub > a:before { 
 
    position: absolute; 
 
    right: 22px; 
 
    top: 23px; 
 
    display: block; 
 
    width: 10px; 
 
    height: 2px; 
 
    content: ""; 
 
    -webkit-transition: all 0.1s ease-out; 
 
    -moz-transition: all 0.1s ease-out; 
 
    -ms-transition: all 0.1s ease-out; 
 
    -o-transition: all 0.1s ease-out; 
 
    transition: all 0.1s ease-out; 
 
} 
 
#cssmenu ul > li.has-sub.open > a:after, 
 
#cssmenu ul > li.has-sub.open > a:before { 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 
#cssmenu ul ul li a { 
 
    padding: 14px 22px; 
 
    cursor: pointer; 
 
    z-index: 2; 
 
    font-size: 14px; 
 
    text-decoration: none; 
 
    color: #dddddd; 
 
    -webkit-transition: color .2s ease; 
 
    -o-transition: color .2s ease; 
 
    transition: color .2s ease; 
 
} 
 
#menu ul li:hover a { 
 
    color: pink; 
 
} 
 
#cssmenu ul ul ul li a { 
 
    padding-left: 32px; 
 
} 
 
#cssmenu ul ul li a:hover { 
 
    color: #ffffff; 
 
} 
 
#cssmenu ul ul > li.has-sub > a:after { 
 
    top: 16px; 
 
    right: 26px; 
 
} 
 
#cssmenu ul ul > li.has-sub > a:before { 
 
    top: 20px; 
 
} 
 
.menu { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    width: 350px; 
 
} 
 
.menu li { 
 
    list-style: none; 
 
} 
 
.menu li a { 
 
    display: table; 
 
    margin-top: 1px; 
 
    padding: 14px 10px; 
 
    width: 100%; 
 
    text-decoration: none; 
 
    text-align: left; 
 
    vertical-align: middle; 
 
    color: #ccc; 
 
    font-weight: 600; 
 
    font-size: 18px; 
 
    overflow: hidden; 
 
    -webkit-transition-property: background; 
 
    -webkit-transition-duration: 0.4s; 
 
    -webkit-transition-timing-function: ease-out; 
 
    transition-property: background; 
 
    transition-duration: 0.4s; 
 
    transition-timing-function: ease-out; 
 
} 
 
.menu > li:first-child a { 
 
    margin-top: 0; 
 
} 
 
.menu >li a:hover a:first-child { 
 
    font-size: 25px; 
 
    color: #547b16; 
 
} 
 
.menu li a:hover { 
 
    ] -webkit-transition-property: background; 
 
    -webkit-transition-duration: 0.2s; 
 
    -webkit-transition-timing-function: ease-out; 
 
    transition-property: background; 
 
    transition-duration: 0.2s; 
 
    transition-timing-function: ease-out; 
 
} 
 
.menu li ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.menu li li a { 
 
    display: block; 
 
    margin-top: 0; 
 
    padding: 0 10px; 
 
    height: 0; 
 
    color: #1F3D39; 
 
    -webkit-transition-property: all; 
 
    -webkit-transition-duration: 0.5s; 
 
    -webkit-transition-timing-function: ease-out; 
 
    transition-property: all; 
 
    transition-duration: 0.5s; 
 
    transition-timing-function: ease-out; 
 
} 
 
.menu > li:hover li a { 
 
    display: table; 
 
    margin-top: 1px; 
 
    padding: 10px; 
 
    width: 100%; 
 
    height: 1em; 
 
    -webkit-transition-property: all; 
 
    -webkit-transition-duration: 0.3s; 
 
    -webkit-transition-timing-function: ease-out; 
 
    transition-property: all; 
 
    transition-duration: 0.3s; 
 
    transition-timing-function: ease-out; 
 
} 
 
.menu > li:hover li a:hover { 
 
    -webkit-transition-property: background; 
 
    -webkit-transition-duration: 0.2s; 
 
    -webkit-transition-timing-function: ease-out; 
 
    transition-property: background; 
 
    transition-duration: 0.2s; 
 
    transition-timing-function: ease-out; 
 
} 
 
.menu > li li a:hover { 
 
    color: pink; 
 
}

<nav id="menu_box"> 
 
    <ul class="menu"> 
 
    <li> <a href="#">Menu</a> 
 
     <ul> 
 
     <li><a href="#">sub</a> 
 
     </li> 
 
     <li><a href="#">sub</a> 
 
     </li> 
 
     <li><a href="#">sub</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li> <a href="#">Menu</a> 
 
     <ul> 
 
     <li><a href="#">sub</a> 
 
     </li> 
 
     <li><a href="#">sub</a> 
 
     </li> 
 
     <li><a href="#">sub</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li> <a href="#">Menu</a> 
 
     <ul> 
 
     <li><a href="#">sub</a> 
 
     </li> 
 
     <li><a href="#">sub</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 

 
    </ul> 
 
</nav>