Question

我对css很新。

我正在尝试创建一个子菜单，但是将鼠标悬停在主菜单上。但是当我将鼠标悬停在第二个菜单上时，整个子菜单都会消失。

这是我的HTML

<ul id='drop-nav'>

 <li><a href='#'>Running Gear</a>
<ul>
  <li/>
  <li/>
  <li><a href='#'>Clothing</a></li>
  <li><a href='#'>Shoes</a></li>
  <li><a href='#'>Packs</a></li>
  <li><a href='#'>Electronics</a></li>
  <li><a href='#'>Accessories</a></li>
</ul>

和我的css

<style type='text/css'>

ul {list-style: none;margin: 0px;
border-radius: 10px;}     
 ul li {display: block;position:relative;float: left;}
       li ul {display: none;}
 ul li a {display: block;text-decoration: none;
       white-space: nowrap;color: #fff;  }
 ul li a:hover {background: #F7AFB0;}
li:hover ul {display: block; position:absolute;}
  li:hover li {float: none;}
  li:hover a {background: #F7AFB0;}
  li:hover li a:hover {background: #7fceef;}
 #drop-nav li ul li {border-top: 0px;}

li:not(:hover) li {display: none;}

</style>

任何想法是什么导致它？

Answer 1

尝试做这样的事情。您的HTML没有正确嵌套。将您的代码与我的代码进行比较，您应该能够看到自己做错了什么。

您只需要设置此代码的样式以满足您的需求。下拉列表工作正常。

CSS

ul{
    list-style: none;
}
ul li{
    float: left;
}
ul li a{
    display: block;
}
ul li ul{
    display: none;
}
ul li:hover ul{
    display: block;
}

HTML

<ul>
    <li>
        <a href="#">Running Gear</a>
        <ul>
            <li><a href="#">Clothing</a></li>
            <li><a href="#">Shoes</a></li>
            <li><a href="#">Packs</a></li>
        </ul>
    </li>
</ul>

Answer 2

这是关于你的第二个问题的答案，对于评论似乎太长了。

原因是边框位于主菜单类上，当显示下拉列表时会增加。我想说你最好的选择是为你的顶级菜单项提供类似于＆＃34;顶级菜单＆＃34;或类似的东西，并将边框样式添加到.top菜单选择器。我认为这应该有效。

你的另一个选择是设置列表项的样式，这样唯一可以向下移动的边框部分就是实际下拉菜单，边框的其余部分保持不变。不确定这是不是你想要的。无论哪种方式，除非你绝对定位你＆＃34;热门帖子＆＃34;随着主菜单类的增长，无论你使用导航边框做什么，它都会随着你的下拉列表向下移动。

子菜单在太远时消失

2 个答案:

CSS

HTML