수평 탐색 모음에서 중첩 된 하위 메뉴를 세로로 만드는 방법은 무엇입니까?

그래서 수평 탐색 모음을 만들었지 만 위에 마우스를 올리면 하위 메뉴가 세로로 나타나기를 원하지만 무엇을 시도해도 여전히 가로로 나타납니다. 내 HTML 및 CSS입니다 아래 https://jsfiddle.net/ma85nbgx/수평 탐색 모음에서 중첩 된 하위 메뉴를 세로로 만드는 방법은 무엇입니까?

을 그리고 :

여기 내 코드의 JSFiddle입니다.

HTML

<div class="nav"> <!-- Start of Nav Bar --> 
    <ul> 
     <li class="home"><a href="#">HOME</a></li> 
     <li class="aboutus"><a href="#">ABOUT&nbsp;US</a></li> 
     <li class="services"><a href="#">SERVICES</a> 
      <ul> 
       <li class="programs"><a href="#">PROGRAMS</a></li> 
       <li class="events"><a href="#">EVENTS</a></li> 
      </ul> 
     </li> 
     <li class="resources"><a href="#">RESOURCES</a></li> 
     <li class="getinvolved"><a href="#">GET&nbsp;INVOLVED</a></li> 
     <li class="contactus"><a href="#">CONTACT&nbsp;US</a></li> 
    </ul> 
</div>

CSS

.nav ul { 
    list-style: none; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
} 

.nav ul li { 
    font-family: 'Roboto', sans-serif; 
    border-bottom: none; 
    height: 86px; 
    line-height: 86px; 
    font-size: 14px; 
    display: inline-block; 
    float:left; 
    margin: 0 auto; 
} 

.nav ul li a { 
    text-decoration: none; 
    color:#000000; 
    display: block; 
    transition: .3s background-color; 
    padding:0 24px; 
} 

.nav ul li a:hover { 
    background-color: #5c89c7; 
    color:#FFFFFF; 
} 

.nav a { 
    border-bottom:none; 
} 

.nav li ul { 
    position:absolute; 
    display:none; 
    width:inherit; 
} 

.nav li:hover ul { 
    display:block; 
} 

.nav ul li ul li { 
    display: block; 
}

웹 사이트의 대부분 또는 내가 디스플레이를 넣어 말했다 통해 갔다 답변 : 중첩 된 하위 메뉴에서 블록을하지만, 나는 그것을 시도하고 여전히 수평으로 표시 , 어떤 도움을 주시면 감사하겠습니다!

출처

2016-12-04 Eden Chew

.nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.nav ul li { 
 
    font-family: 'Roboto', sans-serif; 
 
    border-bottom: none; 
 
    height: 86px; 
 
    line-height: 86px; 
 
    font-size: 14px; 
 
    display: inline-block; 
 
    float:left; 
 
    margin: 0 auto; 
 
} 
 

 
.nav ul li a { 
 
    text-decoration: none; 
 
    color:#000000; 
 
    display: block; 
 
    transition: .3s background-color; 
 
    padding:0 24px; 
 
} 
 

 
.nav ul li a:hover { 
 
    background-color: #5c89c7; 
 
    color:#FFFFFF; 
 
} 
 

 
.nav a { 
 
    border-bottom:none; 
 
} 
 

 
.nav li ul { 
 
    position:absolute; 
 
    display:none; 
 
    width:inherit; 
 
\t text-align:left; 
 
} 
 

 
.nav li:hover ul { 
 
    display:block; 
 
} 
 

 
.nav ul li ul li { 
 
    display: block; 
 
    float:none !important; /* newly added */ 
 
    height:auto; /* newly added */ 
 
    line-height:34px; /* newly added */ 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Untitled Document</title> 
 
</head> 
 

 
<body> 
 

 
<div class="nav"> <!-- Start of Nav Bar --> 
 
    <ul> 
 
     <li class="home"><a href="#">HOME</a></li> 
 
     <li class="aboutus"><a href="#">ABOUT&nbsp;US</a></li> 
 
     <li class="services"><a href="#">SERVICES</a> 
 
      <ul> 
 
       <li class="programs"><a href="#">PROGRAMS</a></li> 
 
       <li class="events"><a href="#">EVENTS</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="resources"><a href="#">RESOURCES</a></li> 
 
     <li class="getinvolved"><a href="#">GET&nbsp;INVOLVED</a></li> 
 
     <li class="contactus"><a href="#">CONTACT&nbsp;US</a></li> 
 
    </ul> 
 
</div> 
 

 
</body> 
 
</html>

출처

2016-12-04 08:21:43

시도해보십시오. 다음 CSS를

.dropdown li{ 
    float: none !important; 
}

를 추가하여 하위 메뉴 같은 UL에 .dropdown 클래스를 추가합니다.

<ul class="dropdown">

출처

2016-12-04 08:00:31

넣어 디스플레이 플렉스와 하위 메뉴 자체의 당신의 랩에 플렉스 방향.

확인이 밖으로

nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
    width:100%; 
 
    display:flex; 
 
    flex-direction:row; 
 
    flex-wrap:wrap; 
 
} 
 

 
nav ul li { 
 
    font-family: 'Roboto', sans-serif; 
 
    border-bottom: none; 
 
    height: 86px; 
 
    line-height: 86px; 
 
    font-size: 14px; 
 
    margin: 0 auto; 
 
    position:relative; 
 
} 
 

 
nav ul li a { 
 
    text-decoration: none; 
 
    color:#000000; 
 
    display: block; 
 
    transition: .3s background-color; 
 
    padding:0 24px; 
 
} 
 

 
nav ul li a:hover { 
 
    background-color: #5c89c7; 
 
    color:#FFFFFF; 
 
} 
 

 
nav a { 
 
\t border-bottom:none; 
 
} 
 

 

 

 

 
nav .withSubMenu ul{ 
 
    display: none; 
 
} 
 

 

 
.withSubMenu:hover ul { 
 
    display:flex; 
 
    width:100%; 
 
    flex-direction:column; 
 
}

<nav> <!-- Start of Nav Bar --> 
 
<ul> 
 
<li class="home"><a href="#">HOME</a></li> 
 
<li class="aboutus"><a href="#">ABOUT&nbsp;US</a></li> 
 
<li class="services withSubMenu"><a href="#">SERVICES</a> 
 
    <ul> 
 
    <li class="programs"><a href="#">PROGRAMS</a></li> 
 
    <li class="events"><a href="#">EVENTS</a></li> 
 
    </ul> 
 
</li> 
 
<li class="resources"><a href="#">RESOURCES</a></li> 
 
<li class="getinvolved"><a href="#">GET&nbsp;INVOLVED</a></li> 
 
<li class="contactus"><a href="#">CONTACT&nbsp;US</a></li> 
 
</ul> 
 
</nav>

내가 CSS의 아래 내가 추가 한 새로운 라인을 확인, 코드 약간 내가 중첩 된 리튬 float:left을 제거해야이 대답하려고 변경

출처

2016-12-04 08:10:33 Obink

수평 탐색 모음에서 중첩 된 하위 메뉴를 세로로 만드는 방법은 무엇입니까?

답변

관련 문제