垂直にも表示されるホバードロップダウンを使用した垂直ナビゲーションを作成するにはどうすればよいですか？

Question

私は回避策がわからないという少しの問題に遭遇しました。私が作業しているウェブサイトのための垂直ナビゲーションを作成していますが、私が見たすべての垂直ナビゲーションメニューでは、ナビゲーションの右または左にホバードロップダウンメニューが表示されます。私はリンクの側ではなく、リンクの下にドロップダウンメニューを表示させたいと思います。

例：ユーザーが「治療」に移動したり、「アレルギー& sinus、ヘッド&ネックなど」というリストを右手ではなく下に表示したい場合は、

私はこれをやり遂げる方法を見て回りましたが、本当に良い例や助けが見つかりませんでした。私はいくつかのJavaScriptが必要かもしれない？私は確信していませんが、必要ならば私はそれを追加することができます私はちょうど私がHTMLとCSSを使っているので、javascriptに精通していないです。

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

私はあなたの利益のために残りの部分を調整し続けることができるかもしれない、ここからあなたが望ましい動作を分離するのに最適なビットを作り直しました。 （注）また、美しく働いアレルギー&洞<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>