html - 下拉菜单菜单打不开

Question

我在下拉菜单中遇到了一个小问题。请检查以下代码。当鼠标悬停在 div 区域时，下拉菜单不会打开。

        <div class="comp-select-area">
            <div class="comp-select-area-arrow"></div>            
        </div>
            <div class="comp-select-drop">
                <ul>
                    <li>All clicks</li>
                    <li>Favorite
                        <ul>
                            <li>Links</li>
                            <li>Campaigns</li>
                        </ul>
                    </li>
                    <li>Search
                        <ul>
                            <li>Links</li>
                            <li>Campaigns</li>
                        </ul>
                    </li>
                    <li>None</li>
                </ul>
            </div>   

/----------------比较下拉-------------------- ---/

.comp-select-area{
    border-radius:3px;
    height:25px;
    width:200px;
    border:1px solid #cdcdcd;
    box-shadow:0px 0px 1px 0px rgba(146, 146, 146, 0.61);
}
.comp-select-area-arrow{
    float:right;
    cursor:pointer;
    width: 26px;
    height: 25px;
    border: 1px solid #DBDBDB;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    text-align: center;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    background: whiteSmoke;
    background: -moz-linear-gradient(top, #FCFCFC 0%, whiteSmoke 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFCFC), color-stop(100%,whiteSmoke));
    background: -webkit-linear-gradient(top, #FCFCFC 0%,whiteSmoke 100%);
    background: -o-linear-gradient(top, #FCFCFC 0%,whiteSmoke 100%);
    background: -ms-linear-gradient(top, #FCFCFC 0%,whiteSmoke 100%);
    background: linear-gradient(to bottom, #FCFCFC 0%,whiteSmoke 100%);
    box-shadow: 0 1px 3px #E6E6E6;
}
.comp-select-drop{
    z-index:9999;
}
.comp-select-drop ul{
    display:none;
    position:absolute;
    background:#fff;
    width:200px;
    padding:0;
    margin:0;
    border:1px solid #cdcdcd;
}
.comp-select-drop ul li:hover{
    background:#E9F1FF;
}
.comp-select-drop ul li{
    padding:5px;
    font-size:14px;
    list-style:none;
    background:#fcfcfc;
    border-bottom:1px solid #cdcdcd;
}
.comp-select-area-arrow:hover > .comp-select-drop ul{
    display:block;
}

.comp-select-drop ul li:hover > ul{
    display:block;
}

.comp-select-drop ul ul{
    display:none;
    position:absolute;
    background:#fff;
    left:200px;
    width:200px;
    padding:0;
    margin:-24px 0 0 0;
    border:1px solid #cdcdcd;
}
.comp-select-drop ul ul li:hover{
    background:#E9F1FF;
}
.comp-select-drop ul ul li{
    padding:5px;
    font-size:14px;
    list-style:none;
    background:#fcfcfc;
    border-bottom:1px solid #cdcdcd;
}

jsfiddle:http://jsfiddle.net/R8dtH/

Answer 1

.comp-select-area-arrow:hover > .comp-select-drop ul{
显示: block ；
}

这意味着选择 .comp-select-area-arrow 的直接子元素。该元素没有子元素，因为您关闭了 div。如果您将 html 更改为:

<div class="comp-select-area">
  <div class="comp-select-area-arrow">
    <div class="comp-select-drop">

It will work