点击打开菜单而不是悬停

Question

我无法在点击事件上打开我的菜单.它会在鼠标悬停事件中打开.我知道这是一个非常简单的问题.我试过但无法解决它.我需要这个用于使用selenium的自动化,因为它不捕获鼠标悬停事件.

你可以在https://jsfiddle.net/ansari4all/ssyor80k/上查看我的代码

<div align="center" class="action_dropdown_container">
    <ul class="action_dropdown">
        <li>
            <a href="">Action</a>
            <ul>
                <li>
                    <a href="abc.php">Edit</a>
                </li>
                <li>
                    <a href="xyz.php">View</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

ul.action_dropdown {
    font-family: "titilliumtext22l_ltmedium", sans-serif;
    font-size: 12px !important;
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
}
ul.action_dropdown li {
    display: block;
    position: relative;
    float: left;
}
ul.action_dropdown li ul {
    display: none;
}
ul.action_dropdown li a {
    display: block;
    text-decoration: none;
    color: #000;
    background:#fff url(../../images/xadmin/action_dropdown_arrow.png) no-repeat 42px 6px;
    border: 1px solid #f1f1f1;
    line-height:19px;
    height:19px;
    padding:0px 12px 0px 5px;
    text-align:left;
    margin-left: 1px;
    white-space: nowrap;
}
.action_dropdown_container {
    width:55px; 
    height:21px;
}
.alignmiddle {
    vertical-align:middle !important;
}
ul.action_dropdown li a:hover {
}
ul.action_dropdown li ul li a {
    background:#329ac4 !important;
    color:#fff;
}
ul.action_dropdown li:hover ul {
    display: block;
    position: absolute;
    z-index:999;
    right: 0px;
    /*top: -75px;*/
}
ul.action_dropdown li:hover li {
    float: none;
    font-size: 11px;
    margin-top:-1px;
}

Answer 1

你需要的是玩Ul li和child css.ul不是锚标记的子代,因此您需要使用+来获取锚标记的下一个兄弟.

请在您的代码中添加此css

ul.action_dropdown li > a:focus + ul {
    display: block;
    position: absolute;
    z-index:999;
    right: 0px;
    /*top: -75px;*/
}
ul.action_dropdown li > a:focus + ul li {
    float: none;
    font-size: 11px;
    margin-top:-1px;
}

看到实际行动