0

ドロップダウンで小さな問題が発生しました。次のコードを確認してください。マウスを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/

4

1 に答える 1

3

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

これは、の直接の子である要素を選択することを意味します.comp-select-area-arrow。divを閉じたため、その要素には子がありません。HTMLを次のように変更した場合：

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

それが動作します

于 2012-12-17T16:25:01.790 に答える