下拉菜单/悬停菜单

问题是这样的：当我在下拉菜单上使用光标时，我无法选择任何其中的选项，因为当我将光标从下拉菜单中取出时，选项消失。下拉菜单/悬停菜单

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

CSS代码：

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; }

HTML代码：

<ul id="left" class='column'> 
<li><a href="#">Home</a></li> 
<li><a href="#">Sobre</a></li> 
<li><a href="#">O que Fazemos?</a> 
    <ul> 
    <li><a href="#">Web Design</a></li> 
    <li><a href="#">Hospedagem</a></li> 
    <li><a href="#">SEO</a></li> 
    <li><a href="#">Sistemas</a></li> 
    </ul> 
</li> 

<li><a href="#">Contato</a></li>

来源

2016-05-12 fabimetabi

尝试left:设定为更小价值，如80px左右

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

来源

2016-05-12 16:04:50

啊我现在看到了，非常感谢！我不知道选项和菜单之间的空间会影响它。谢谢:) – fabimetabi

@fabimetabi; ） –

问题是导航和下拉菜单之间存在差距。然而，这种差距并不是由你的CSS代码引起的，所以你应该检查你的样式表的其他部分，看看你能否删除它。

来源

2016-05-12 16:05:34 Pandaqi

根据您提供的代码，它工作正常。您需要检查其他CSS为@Pandaqi的建议。 –

如果您使用边距在导航和下拉菜单之间创建空间，请尝试使用填充。这样浏览器就会把它当作对象的一部分。

例如，如果您有：

*{ 
    margin:10px; 
}

你可以将其更改为：

*{ 
    padding:10px; 
}

或者，您也可以在刚刚导航项目覆盖的空间。

来源

2016-05-12 16:15:26 Hope

下拉菜单/悬停菜单

回答

相关问题