如何使用懸停下拉菜單創建也垂直顯示的垂直導航？

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>