如何创建垂直导航，同时悬停下拉菜单也显示为垂直？

Question

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

例如：在我的菜单中，当用户悬停或访问 "Treatments" 时，我希望列表 "allergies & sinus, head & neck, etc" 显示在其下方而不是右侧。

我试图环顾四周，看看如何才能做到这一点，但没有找到任何真正好的例子或帮助。我可能需要一些 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

你可以尝试这样的事情；

<!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>

Answer 2

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

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

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

如何创建垂直导航，同时悬停下拉菜单也显示为垂直？

How to create a vertical navigation with hover dropdowns that also appear vertical?

html

javascript

css

nav