내비게이션 막대의 드롭 다운 메뉴

Question

이 탐색 메뉴에서 일부 드롭 다운 메뉴를 원하지만 작동하지 않으며 중심에 놓고 싶습니다. display : 인라인을 사용하려고했습니다. 명령,하지만 그것은 도움이되지 않았다.

https://jsfiddle.net/fLdasLv4/

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
\t position: absolute; 
 
\t left: 0%; 
 
\t top: 0%; 
 
\t width: 100%; 
 
\t height: 8%; 
 
\t 
 
\t 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 20px 25px; 
 
\t text-decoration: none; 
 
\t font-size: 100%; 
 
\t font-family:Lucida Sans Unicode; 
 

 
\t 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 
li a:active{ 
 
    background-color: grey; 
 
} 
 

 
ul li:hover > ul 
 
{ 
 
\t display:block 
 
}

<ul> 
 
    <li><a class="active" href="#home" font size="16">Home</a></li> 
 
    <li><a class="kaires" href="#news">Dropd</a></li> 
 
     <ul> 
 
     <li><a href="#">1</a></li> 
 
     <li><a href="#">2</a></li> 
 
     <li><a href="#">3</a></li> 
 
     <li><a href="#">4</a></li> 
 
\t </ul> 
 
    
 
    
 
    
 
    <li><a href="#about">Something</a></li> 
 
    <li><a href="#about">Contact us</a></li> 
 
</ul>

Answer 1

이런 식으로 뭔가를 할 수 있나요?

사용 flexbox 처음에

ul li ul { 
    display: none; 
} 

를 사용하는 것이, 다음 메뉴 하위 메뉴 사용 표시 가져가 하위 메뉴를 숨기 중앙에 :

/* Sub menu item */ 
ul li ul li { 
    width: 100%; 
    display: block; 
} 

/* Show Sub menu on hover */ 
ul li:hover > ul { 
    position: absolute; 
    display: block; 
    background: green; 
    width: 30%; /* Sub menu width */ 
} 

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    width: 100%; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 20px 25px; 
 
    text-decoration: none; 
 
    font-size: 100%; 
 
    font-family: Lucida Sans Unicode; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 

 
li a:active { 
 
    background-color: grey; 
 
} 
 

 
ul li ul { 
 
    display: none; 
 
} 
 

 
/* Sub menu item */ 
 
ul li ul li { 
 
    width: 100%; 
 
    display: block; 
 
} 
 

 
/* Show Sub menu on hover */ 
 
ul li:hover > ul { 
 
    position: absolute; 
 
    display: block; 
 
    background: green; 
 
    width: 30%; /* Sub menu width */ 
 
} 
 

 
.container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
}

<ul class="container"> 
 
    <li><a class="active" href="#home" font size="16">Home</a></li> 
 
    <li><a class="kaires" href="#news">Dropd</a> 
 
    <ul> 
 
     <li><a href="#">1</a></li> 
 
     <li><a href="#">2</a></li> 
 
     <li><a href="#">3</a></li> 
 
     <li><a href="#">4</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#about">Something</a></li> 
 
    <li><a href="#about">Contact us</a></li> 
 
</ul>

Answer 2

을 첫째로 당신의 하위 메뉴에 대한 HTML 마크 업이 일치하지 않았습니다. 다 끝났어. 또한 하위 메뉴를 표시하려면 기본 컨테이너에 오버플로를 넣을 수 없습니다. flebox를 사용하여 마크 업을 변경하거나 더 많은 코드를 작성하지 않고 탐색을 중앙에 배치 할 수 있습니다.

nav {} 
 
ul { 
 
    display: flex; 
 
    justify-content: center; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    /** overflow: hidden; Removed this(this wouldn't allow the submenu show) **/ 
 
    background-color: #333; 
 
\t position: absolute; 
 
\t /**left: 0%; **/ 
 
\t top: 0%; 
 
\t width: 100%; 
 
\t /** height: 8%;Removed This**/ 
 
} 
 
ul ul { 
 
    top: 100%; 
 
    display: block; 
 
    height: auto; 
 
    visibility: hidden; 
 
} 
 
li { 
 
    /** float: left; **/ 
 
    position: relative; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 20px 25px; 
 
\t text-decoration: none; 
 
\t font-size: 100%; 
 
\t font-family:Lucida Sans Unicode; 
 
} 
 
li a:hover { 
 
    background-color: #111; 
 
} 
 
li a:active{ 
 
    background-color: grey; 
 
} 
 
ul li:hover > ul { 
 
\t display:block; 
 
    visibility: visible; 
 
} 
 
li > ul li { 
 
    float: none; 
 
}

<ul> 
 
    <li><a class="active" href="#home" font size="16">Home</a></li> 
 
    <li><a class="kaires" href="#news">Dropd</a> 
 
     <ul> 
 
     <li><a href="#">1</a></li> 
 
     <li><a href="#">2</a></li> 
 
     <li><a href="#">3</a></li> 
 
     <li><a href="#">4</a></li> 
 
\t  </ul> 
 
    </li> 
 
    <li><a href="#about">Something</a></li> 
 
    <li><a href="#about">Contact us</a></li> 
 
</ul>