호버 드롭 다운을 사용하여 세로 방향으로도 표시되는 세로 방향 탐색을 만드는 방법은 무엇입니까?

Question

해결 방법을 잘 모르는 문제가 발생했습니다. 내가 작업하고있는 웹 사이트의 세로 탐색을 만들었지 만 모든 세로 탐색 메뉴의 경우 탐색의 오른쪽 또는 왼쪽에 마우스를 올려 놓으면 드롭 다운 메뉴가 표시됩니다. 드롭 다운 메뉴를 링크 측면이 아닌 링크 아래에 표시하고 싶습니다.

예 : 내 메뉴에서 사용자가 "Treatments"를 방문하거나 "알레르기 & sinus, 머리 & 목"등을 오른쪽보다 아래에 표시하고 싶습니다.

저는이 작업을 어떻게 수행 할 수 있는지 살펴 보려고했지만 실제로 좋은 예제 나 도움을 찾지 못했습니다. 자바 스크립트가 필요할 것 같은데? 확실하지 않지만 필요하다면 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>