Question

我有一个使用css创建的下拉菜单。代码如下。

CSS

/* Navigation Menu Styles */

ul#navmenu, ul.sub1, ul.sub2  {
    list-style-type: none;
}

ul#navmenu li {
    width: 125px;
    text-align: left;
    position: relative; 
    float: left;
    margin-right: 3px;
 }

ul#navmenu a {
    text-decoration: none;
    display: block;
    width: 125px;
    height: 25px;
    padding: 5px 0px;
    padding-left: 5px;
    line-height: 25px; 
    background-color: #171717;
    color: #FFF;
    border: 1px solid #CCC;
}

ul#navmenu .sub1 a {
    margin-top: 3px;
}

ul#navmenu .sub2 a {
    margin-left: 8px;
}

ul#navmenu li:hover > a {
    background-color: #056000;              /* green */
}

ul#navmenu ul.sub1 {
    display: none;
    position: absolute;
    top: 38px;
    left: 0px;
}

ul#navmenu li:hover .sub1 {
    display: block;
}

HTML

<ul id="navmenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Social</a> <span class="d_arrow">&#9660;</span>
        <ul class="sub1">
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Youtube</a></li>
        </ul>
    </li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Photos</a></li>
</ul>

问题是，我想试验下拉菜单的结果。我想通过将顶部位置从38px更改为50px来将下拉菜单放置在远离其父菜单的位置，如：

ul#navmenu ul.sub1 {
    display: none;
    position: absolute;
    top: 50px;
    left: 0px;
}

但是当我将鼠标悬停在其下拉菜单上时，它会突然消失。我知道我的代码存在问题，例如设置位置顶部。有人可以帮我纠正我的代码吗？感谢

Answer 1

在您发表评论后，问题是您将top更改为大号。 OP问题无法重现（比如将顶部更改为50px）。问题是当你添加顶部（大数字）然后元素之间将有一个空内容，:hover将无效。一个快速的解决方案是将height添加到img类.d_arrow，这样图像就像元素之间的“桥梁”一样：

/* Navigation Menu Styles */

ul#navmenu,
ul.sub1,
ul.sub2 {
  list-style-type: none;
}
ul#navmenu li {
  width: 125px;
  text-align: left;
  position: relative;
  float: left;
  margin-right: 3px;
}
ul#navmenu a {
  text-decoration: none;
  display: block;
  width: 125px;
  height: 25px;
  padding: 5px 0px;
  padding-left: 5px;
  line-height: 25px;
  background-color: #171717;
  color: #FFF;
  border: 1px solid #CCC;
}
ul#navmenu .sub1 a {
  margin-top: 3px;
}
ul#navmenu .sub2 a {
  margin-left: 8px;
}
ul#navmenu li:hover > a {
  background-color: #056000;
  /* green */
}
ul#navmenu ul.sub1 {
  display: none;
  position: absolute;
  top: 100px;
  left: 0px;
}
ul#navmenu li:hover .sub1 {
  display: block;
}
/*add this rule*/
span.d_arrow {
  height: 100px;
  position: relative;
  display: block;
}

<ul id="navmenu">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Social</a>  <span class="d_arrow">&#9660;</span>
    <ul class="sub1">
      <li><a href="#">Facebook</a>
      </li>
      <li><a href="#">Twitter</a>
      </li>
      <li><a href="#">Youtube</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Events</a>
  </li>
  <li><a href="#">Contact Us</a>
  </li>
  <li><a href="#">Photos</a>
  </li>
</ul>

Answer 2

尝试此代码..我只需在ul＃navmenu ul.sub1

上添加一些填充顶部

Demo

ul#navmenu ul.sub1 {
    display: none;
    position: absolute;
    top: 38px;
    left: 0px;
    padding-top:12px;
}

还添加了一些东西以使设计干净并将向下箭头放在锚标记

中

<li><a href="#">Social <span class="d_arrow">&#9660;</span></a>

当鼠标离开菜单时，使用CSS的下拉菜单消失

2 个答案: