Question

我遇到了一个问题，我不确定如何解决。我正在为我正在处理的网站创建垂直导航，但是我看到的所有垂直导航菜单都会在导航的右侧或左侧显示悬停下拉菜单。我希望下拉菜单显示在链接下方而不是链接侧。

例如：在我的菜单中，当用户盘旋或访问“治疗”时，我希望列表“过敏和窦，头部和颈部等”出现在它下面而不是右边。

我试图环顾四周，看看我是如何做到的，但没有找到任何真正好的例子或帮助。我可能需要一些JavaScript？我不确定，但是如果有必要我可以添加它我只是不熟悉javascript，因为我使用的是HTML和CSS。

我的HTML：

<h4>ENT Services</h4>
<ul class="sidebar-nav">
    <li><a href="http://www.accentmd.com/florida-ent/ent-services.html">Treatments at Accent EMT</a>
    <ul class="sidebar-sub-menu">
            <li><a herf="http://www.accentmd.com/florida-ent/allergy-sinus.html">Allergy &amp; Sinus</a></li>
            <li><a href="http://www.accentmd.com/florida-ent/hearing-balance.html">Hearing &amp; Balance</a></li>
            <li><a href="http://www.accentmd.com/florida-ent/dizziness-imbalance-disorder-center.html">Dizziness &amp; Imbalance Disorders</a></li>
            <li><a href="http://www.accentmd.com/florida-ent/thyroid-parathyroid-center.html">Parathyroid Disorders</a></li>
     </ul></li>
    <li><a href="ttp://www.accentmd.com/florida-ent/ent-services.html#pediatric">General &amp; Pediatric ENT</a>
    <li><a href="http://gainesvilleaesthetics.com/">Facial Plastic &amp; Reconstructive Surgery</a></li>
</ul>

我的CSS：

.sidebar-nav {
    height:auto;
    list-style:none;
    width: 100%;
}

.sidebar-nav li {
    height: 25px;
    margin: 0;
    padding: 5px 0;
    border: none;
    text-align: left;
    display: inline-block;
    float: left;
    clear:both;
    width: 50%;
}

.sidebar-nav li a {
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:13px;
    text-decoration:none;
}

.sidebar-nav li ul {
    display: none;
    margin-top: 10px;
    padding: 0;
}

.sidebar-nav li:hover ul {
    display: block;
}

.sidebar-nav li:hover .sidebar-sub-menu {
    position: relative;   
    margin-top: -27.5px;
}

.sidebar-sub-menu li {
    position: relative;
    display: block;
    top: 0;
    left:90%;
    width: 100%;
    min-width: 180px;
    white-space: nowrap;
    z-index:1;
}

.sidebar-sub-menu li a {
    display: inline-block;
    padding: 0 10px;
}

.sidebar-nav li:active .sidebar-sub-menu {
    position: relative;
    margin-top:-27.5px;
}

提前致谢。

Answer 1

我重新设计了CSS以最好地隔离了所需的行为，也许从这里开始，你可以继续调整其余部分以使你受益。请注意，您在过敏和过敏方面也有错字。窦<a href="">（说<a herf="">）

＆＃13;

.sidebar-nav {
  height: auto;
  list-style: none;
  width: 100%;
}

.sidebar-nav li {
  /* height: 25px; */
  margin: 0;
  padding: 5px 0;
  border: none;
  text-align: left;
  display: inline-block;
  float: left;
  clear: both;
  width: 50%;
}

.sidebar-nav li a {
  font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
  font-size: 13px;
  text-decoration: none;
}

/* added CSS */

.sidebar-nav li {
  list-style-type: none;
}

.sidebar-nav ul li a:hover {
  background: lightgray;
}

.sidebar-nav ul {
  display: none;
  margin-top: 10px;
  padding: 0;
}

.sidebar-nav li:hover>ul {
  display: block;
  margin: 0;
  padding: 0 10px;
}

＆＃13;

<h4>ENT Services</h4>
<ul class="sidebar-nav">
  <li><a href="http://www.accentmd.com/florida-ent/ent-services.html">Treatments at Accent EMT</a>
    <ul class="sidebar-sub-menu">
      <li><a href="http://www.accentmd.com/florida-ent/allergy-sinus.html">Allergy &amp; Sinus</a></li>
      <li><a href="http://www.accentmd.com/florida-ent/hearing-balance.html">Hearing &amp; Balance</a></li>
      <li><a href="http://www.accentmd.com/florida-ent/dizziness-imbalance-disorder-center.html">Dizziness &amp; Imbalance Disorders</a></li>
      <li><a href="http://www.accentmd.com/florida-ent/thyroid-parathyroid-center.html">Parathyroid Disorders</a></li>
    </ul>
  </li>
  <li><a href="ttp://www.accentmd.com/florida-ent/ent-services.html#pediatric">General &amp; Pediatric ENT</a>
  <li><a href="http://gainesvilleaesthetics.com/">Facial Plastic &amp; Reconstructive Surgery</a></li>
</ul>

＆＃13;

Answer 2

你可以试试这样的事情;

<!DOCTYPE html>
<html>
<head>
<style>
div {
    display: none;
}

a:hover + div {
    display: block;
}
</style>
</head>
<body>

<a>Hover me timberrrs!!</a>
<div>here is your stuff</div>

</body>
</html>

如何使用也显示为垂直的悬停下拉列表创建垂直导航？

2 个答案: