如何使用悬停下拉菜单创建也垂直显示的垂直导航？

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="">）

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

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>