CSS下拉菜单在我点击之前关闭 | CSS下拉菜单在我点击之前关闭

本文介绍了CSS下拉菜单在我点击之前关闭的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个CSS下拉导航菜单与子菜单。我的问题是，子菜单关闭之前，我点击它。当我将光标移动到子菜单的一半时，它消失。例如，当我移动鼠标点击Item 3 sub 1.1时，它会消失。

I have a CSS dropdown navigation menu with a submenu. My problem is that the submenu closes before I click on it. When I move the cursor halfway to the submenu, it disappears. For example when I move my mouse to click on "Item 3 sub 1.1", it disappears.

主下拉菜单工作正常，但子菜单是问题。

The main dropdown menu works fine but the submenu is the problem.

我可以做什么使子菜单保持到我点击它？...感谢您的帮助

What can I do to make the submenu stay until I click on it?... Thanks for the help

这是我的菜单CSS：

.nav {
    padding: 0px;
    text-align: center;
    border: 0px;
    vertical-align: middle;
    display: table-row;
    width: 100%;
    margin: 0px auto;
    background-color:#660000;
    overflow: hidden;
    position:relative;
    height: 30;
    text-align: center;
    margin: 0px auto 0px auto;
}
ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    float:left;
    display:inline;
}
ul li {
    display:block;
    position: relative;
    float: left;
    left: 85px;
}
li ul {
    display: none;
    margin:0;
}
ul li a {
    display: block;
    background: #660000;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    border-left:1px solid #660000;
    border-right:1px solid #660000;
}
ul li a:hover {
    background: #3300cc;
    display: block;
}
li:hover ul {
    position: fixed;
    display: block;
}
li:hover li {
    float: none;
}
li:hover a {
    background: #3300cc;
}
li:hover li a:hover {
    background: #660000;
}
.drop-nav li ul li {
    border-top: 0px;
    z-index: 100;
    border-bottom:0;
    right:0;
    left:0;
}
li li:hover a {
    display: block;
}
li li ul a {
    margin-top:-25px;
    margin-bottom: 25px;
    margin-left: 85px;
    display: none;
}
li:hover li:hover ul li a:hover {
    margin-top:-25px;
    margin-bottom:25px;
    margin-left: 85px;
    overflow: none;
}

这是html：

<div class="nav" >
<ul class="drop-nav">
<li><a href="item1.html">Item 1</a></li>
<li><a href="#">Item 2</a>
  <ul>
    <li><a href="item2_1.html">Item 2 sub 1</a></li>
    <li><a href=" item2_2.html"> Item 2 sub 2</a></li>
    <li ><a href=" item2_3.html"> Item 2 sub 2</a></li>
  </ul>
</li>
<li><a href="#"> Item 3</a>
  <ul>
    <li><a href="#"> Item 3 sub 1 &raquo;</a>
      <ul>
        <li><a href=" item3_1_1.html"> Item 3 sub 1.1</a></li>
        <li><a href=" item3_1_2.html"> Item 3 sub 1.2</a></li>
        <li ><a href=" item3_1_3.html"> Item 3 sub 1.3</a></li>
      </ul>
    </li>
    <li><a href="#"> Item 3 sub 2 &raquo;</a>
      <ul>
        <li><a href=" item3_2_1.html"> Item 3 sub 2.1 </a></li>
        <li><a href=" item3_2_2.html"> Item 3 sub 2.2 </a></li>
        <li><a href=" item3_2_3.html"> Item 3 sub 2.3 </a></li>
      </ul>
    </li>
    <li><a href=" item3_3.html"> Item 3 sub 3 </a></li>
    <li><a href=" item3_4.html"> Item 3 sub 4 </a></li>
    <li><a href=" item3_5.html"> Item 3 sub 5 </a></li>
  </ul>
</li>
</ul>
</div>

推荐答案

您的css选择器非常混乱。只在下一行使用 ul li ，然后使用 li ul 或 li li ul a 太含糊，并且不会真正定位元素。虽然这种方法可能适用于一层深度的嵌套，但当您开始嵌套2层深度时，它会让您感到困惑（对于浏览器）。

Your css selectors are very confusing. Only using ul li and then li ul or li li ul a on the next line is too vague and not really targeting an element. While this approach might work for nesting of one level deep, it seriously get's confusing (for the browser) when you start nesting 2 level deep.

我会给每个UL

另外，使用UL的position属性，不要忘记考虑z-index当菜单重叠时。

Additonally, make use of the position attribute for your UL and don't forget to think about z-index when menus overlap.

这样的东西不是很漂亮，但它的工作方式你值得期待。

Something like this, not very pretty, but it works the way you propably expect.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    .nav {
        position: relative;
        top: 0;
        width: 80%;
        height: auto;
        border: 1px solid #e6e6e6;
        margin: 0 auto;
        font-family: 'Helvetica', Arial, sans-serif;
    }
    /* Root Level */
    .dropdown-menu {
        position: relative;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
        background: #eeeeee;
    }
    /* Clear the float */
    .dropdown-menu:after {
        display: table;
        content: "";
        clear: both;
    }
    .dropdown-menu li {
        display: block;
        border-left: 1px solid #e6e6e6;
        border-right: 1px solid #e6e6e6;
        min-width: 150px;
        float: left;

    }
    .dropdown-menu li a:link,
    .dropdown-menu li a:visited {
        padding: 10px 15px;
        text-decoration: none;
        color: #111111;
        display: block;
    }
    .dropdown-menu li a:hover,
    .dropdown-menu li a:focus {
        color: #222222;
    }
    /* Level 1 */
    .dropdown-level-1 {
        position: absolute;
        padding: 0;
        margin: 0;
        display: none;
        background: grey;
        width: 150px;
    }
    .dropdown-level-1 li {

    }
    /* The ">" triggers the direct child to show up as "block" */
    .dropdown-menu li:hover > .dropdown-level-1 {
        display: block;
    }
    /* Level 2 */
    .dropdown-level-2 {
        position: absolute;
        display: none;
        background: #888888;
        padding: 0;
        margin: -38px 0 0 148px;
    }
    /* same trick here for level 2 */
    .dropdown-level-1 li:hover > .dropdown-level-2 {
        display: block;
    }
    /* Target all links at once */
    .dropdown-level-0 li a:link,
    .dropdown-level-0 li a:visited,
    .dropdown-level-1 li a:link,
    .dropdown-level-1 li a:visited,
    .dropdown-level-2 li a:link,
    .dropdown-level-2 li a:visited {
        padding: 10px;
        color: purple;
        display: block;
    }
    .dropdown-level-0 li a:hover,
    .dropdown-level-0 li a:focus,
    .dropdown-level-1 li a:hover,
    .dropdown-level-1 li a:focus,
    .dropdown-level-2 li a:hover,
    .dropdown-level-2 li a:focus {
        color: orange;
    }
</style>
</head>
<body>
<div class="nav">
<ul class="dropdown-menu">
    <li><a href="#">Item 1</a></li>
    <li class="dropdown"><a href="#">Item 2</a>
        <ul class="dropdown-level-1">
            <li><a href="#">Item 2 sub 2</a>
                <ul class="dropdown-level-2">
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 2</a></li>
                </ul>
            </li>
            <li><a href="#">Item 2 sub 2</a>
                <ul class="dropdown-level-2">
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 2</a></li>
                </ul>
            </li>
            <li><a href="#">Item 2 sub 2</a>
                <ul class="dropdown-level-2">
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="dropdown"><a href="#">Item 2</a>
        <ul class="dropdown-level-1">
            <li><a href="#">Item 2 sub 1</a></li>
            <li><a href="#">Item 2 sub 1</a></li>
            <li><a href="#">Item 2 sub 2</a>
                <ul class="dropdown-level-2">
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="dropdown"><a href="#">Item 2</a>
        <ul class="dropdown-level-1">
            <li><a href="#">Item 2 sub 1</a></li>
            <li><a href="#">Item 2 sub 1</a></li>
            <li><a href="#">Item 2 sub 2</a>
                <ul class="dropdown-level-2">
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="dropdown"><a href="#">Item 2</a>
        <ul class="dropdown-level-1">
            <li><a href="#">Item 2 sub 1</a></li>
            <li><a href="#">Item 2 sub 1</a></li>
            <li><a href="#"> Item 2 sub 2</a></li>
        </ul>
    </li>
</ul>
</div>
</body>
</html>

这篇关于CSS下拉菜单在我点击之前关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！