Question

问题是：当我将光标放在下拉位置时，我无法选择其中的任何选项，因为当我将光标从下拉位置移开时，选项会消失。

“C”是我的光标所在。 http://imgur.com/H8acihY - 在我移动光标之前 http://imgur.com/5XllHyc - 移动后

CSS代码：

    .mk-single-content{
  line-height: 1.5em !important;
  font-size: 120% !important;
}

HTML code：

ul {
        margin: 0;
        padding: 0;
        list-style: none;
        width: 150px;
    }

    ul li {
        position: relative;
    }

    li ul {
        position: absolute;
        left: 149px;
        top: 0;
        display: none;
    }

    ul li a {
        display: block;
        text-decoration: none;
        color: #E2144A;
        background: #fff;
        padding: 5px;
        border: 1px solid #ccc; 
    }
    li:hover ul { display: block; }

Answer 1

问题是导航和下拉菜单之间存在差距。但是，这个差距不是由您的CSS代码引起的，因此您应该检查样式表的其他部分，看看是否可以删除它。

Answer 2

尝试将left:设置为较小的值，例如80px左右

li ul {
    position: absolute;
    left: 80px;
    top: 0;
    display: none;
}

Answer 3

如果要使用边距在导航和下拉列表之间创建空格，请尝试填充。这样浏览器就会将其视为对象的一部分。

例如，如果你有：

*{
    margin:10px;
}

您可以将其更改为：

    *{
    padding:10px;
}

或者，您可以仅覆盖导航项上的空格。

下拉/悬停菜单

3 个答案: