html - 悬停在下拉菜单上时会意外打开多个选择

Question

我为下拉菜单创建了一个代码，但是当我将鼠标悬停在下拉菜单上时，它会打开所有内容，而不仅仅是悬停的那个。

这是我的html：

<div class='menuTitle'>
   Medical
   <div class='menuContent'>
      Test<br />
      Test2<br />
      Test<br />
    </div>
</div>

<div class='menuTitle'>|</div>    

<div class='menuTitle'>
   Bro
   <div class="menuContent">
      test<br />
      comone<br />
   </div>
</div>

和我的 CSS：

.menuTitle {
   display: inline-block;
}

.menuContent {
   position: absolute;
   width: 100px;
   background-color: gray;
   display: none;
   text-align:center;

}

Answer 1

尝试：

<div class="dropDown">
  <ul>
     <li>Test</li>
     <li>Test-Dropdown
        <ul>
            <li>Drop down content</li>
            <li>Drop down content</li>
            <li>Drop down content</li>
        </ul>
     </li>
     <li>Test</li>
  </ul>
</div>

CSS：要激活下拉菜单，请执行以下操作。

.dropDown > ul > li:hover > ul {
    display: block;
}
.dropDown > ul > li > ul {
    display: none;
    position: relative;
    bottom: 0;
    left: 0;
}

添加更多您希望它拥有的样式

我的小提琴可以帮助您入门

Answer 2

你的链接是测试、测试2和测试吗？如果是这样，您必须将它们放在单独的 div 中，最好还是使用 ul 和 li 进行导航。您还可以为此http://cssmenumaker.com/使用生成器

Answer 3

这是一个下拉菜单，不需要javascript。

css

menu, menu ul.drop-menu {
padding:0;
margin: 0;}
menu li, menu ul.drop-menu li {
list-style-type: none;
display: inline-block;}
menu li a, menu li ul.drop-menu li a {
text-decoration: none;
color: #fff;
background-color:#000 ;
padding: 5px;
display:inline-block;}
menu li {
position: relative;}
/*drop menu*/
menu li ul.drop-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;}
menu li:hover ul.drop-menu {
display:block;}

html

<ul id="menu">
<li>
    <a href="#">Menu 1</a>
    <ul class="drop-menu">
        <li>
            <a href="#">Drop Menu 1</a>
        </li>
        <li>
            <a href="#">Drop Menu 2</a>
        </li>
        <li>
            <a href="#">Drop Menu 3</a>
        </li>
        <li>
            <a href="#">Drop Menu 4</a>
        </li>
    </ul>
</li>
</li>   
<li><a href="#">Menu 2</a>
    <ul class="drop-menu">
        <li>
            <a href="#">Drop Menu 1</a>
        </li>
        <li>
            <a href="#">Drop Menu 2</a>
        </li>
        <li>
            <a href="#">Drop Menu 3</a>
        </li>
        <li>
            <a href="#">Drop Menu 4</a>
        </li>
    </ul>
</li>
<li>
    <a href="#">Menu 3</a>
</li>
</ul>