수평 호버 탐색 메뉴

Question

저는 HTML과 CSS가 새로 도입되었습니다. 나는 가로 메뉴를 만들었고 드롭 다운 메뉴는 꼭 가져 가야합니다.

그러나 마우스를 링크 위로 가져 가면 드롭 다운이 나타나고 실제 드롭 다운 콘텐츠를 차지하는 것은 아래의 공간이 아닙니다.

누군가가 왜 이런 일이 발생했는지 그리고 어떻게 고칠 수 있는지 지적 해주십시오.

다음은 HTML과 CSS입니다.

nav{ 
 

 
    text-align:center; 
 
    font-family:myFirstFont; 
 
    display:inline-block; 
 
    position:absolute; 
 
    left:320px; 
 
    top:56px; 
 
} 
 

 
.navigation { 
 
    list-style-type:none; 
 
    word-spacing:50px; 
 
    max-width:100%; 
 
    font-size:1.2em; 
 
    position:relative; 
 

 
} 
 

 
.navigation li { 
 
    display:inline-block; 
 
    position:relative; 
 
} 
 

 
.navigation a{ 
 
    text-decoration:none; 
 
    color:#00a8e7; 
 
} 
 

 
    
 
.navigation ul { 
 
    position:absolute; 
 
    text-align:justify; 
 

 
} 
 

 
.navigation ul li { 
 
    display:block; 
 
    position:relative; 
 
    right:40px; 
 
    opacity:0; 
 
    visibility:hidden; 
 
} 
 

 
.navigation li:hover ul li{ 
 
    opacity:1; 
 
    visibility:visible; 
 
}

<nav> 
 
      <ul class="navigation"> 
 
       <li><a href="#">ABOUT</a> 
 
       <ul> 
 
        <li><a href="#">COMPANY</a></li> 
 
        <li><a href="#">TEAM</a></li> 
 
       </ul> 
 
       
 
       </li> 
 
       <li><a href="#">SERVICES</a> 
 
        <ul> 
 
         <li><a href="#">WEBSITE</a></li> 
 
         <li><a href="#">SEO</a></li> 
 
         <li><a href="#">LOGO</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">PORTFOLIO</a> 
 
        <ul> 
 
         <li><a href="#">WEBSITES</a></li> 
 
         <li><a href="#">LOGO DESIGN</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">CONTACT</a> 
 
        <ul> 
 
         <li><a href="#">PHONE</a></li> 
 
         <li><a href="#">EMAIL</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">TESTIMONIALS</a></li> 
 
      </ul> 
 
     </nav>

Answer 1

nav{ 
 

 
    text-align:center; 
 
    font-family:myFirstFont; 
 
    display:inline-block; 
 
    position:absolute; 
 
    left:320px; 
 
    top:56px; 
 
} 
 

 
.navigation { 
 
    list-style-type:none; 
 
    word-spacing:50px; 
 
    max-width:100%; 
 
    font-size:1.2em; 
 
    position:relative; 
 

 
} 
 

 
.navigation li { 
 
    display:inline-block; 
 
    position:relative; 
 
} 
 

 
.navigation a{ 
 
    text-decoration:none; 
 
    color:#00a8e7; 
 
} 
 

 
    
 
.navigation ul { 
 
    position:absolute; 
 
    text-align:justify; 
 

 
} 
 

 
ul.inner li { 
 
    display:none; 
 
    position:relative; 
 
    right:40px; 
 
    
 
    
 
} 
 

 
.navigation li:hover ul.inner li{ 
 
    display:block 
 
}

<nav> 
 
      <ul class="navigation"> 
 
       <li><a href="#">ABOUT</a> 
 
       <ul class="inner"> 
 
        <li><a href="#">COMPANY</a></li> 
 
        <li><a href="#">TEAM</a></li> 
 
       </ul> 
 
       
 
       </li> 
 
       <li><a href="#">SERVICES</a> 
 
        <ul class="inner"> 
 
         <li><a href="#">WEBSITE</a></li> 
 
         <li><a href="#">SEO</a></li> 
 
         <li><a href="#">LOGO</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">PORTFOLIO</a> 
 
        <ul class="inner"> 
 
         <li><a href="#">WEBSITES</a></li> 
 
         <li><a href="#">LOGO DESIGN</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">CONTACT</a> 
 
        <ul class="inner"> 
 
         <li><a href="#">PHONE</a></li> 
 
         <li><a href="#">EMAIL</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">TESTIMONIALS</a></li> 
 
      </ul> 
 
     </nav>

은 ... 나뿐만 아니라 다른 방법의 무리를 시도했지만 아무것도 작동하는 것 같다 없습니다. 나는 또한 .navigation ul 국경을 주었고 그것은 문제를 보여 주지만 .... 내가 그 위치를 바꾼다면 내 드롭 다운은 주 리 바로 아래에 있지 않을 것이다.

Answer 2

봅니다 클래스 = "정상"(서비스, 포트폴리오 ..., 소개) 주요 리튬 요소를 제공합니다. 그런 다음 CSS 파일을 .top.li : hover ul li {...}로 편집하십시오.