하위 메뉴가있는 탐색 메뉴가 작동하지 않는 위치를 사용하여 중심에 놓임

Question

웹 사이트 상단에 메뉴 탐색을 수행했습니다. 탐색 메뉴에는 하위 링크도 있습니다. absolute, inline-block, inline, text-align:center과 같은 많은 위치 스타일을 시도했습니다. 아직도 그들은 일하지 않고있다. 아래에 다음 코드 :

HTML

<div class="navigationMenu"> 
<ul id="menu"> 
    <li><a href="#"> LINK 1 </a></li> 
    <li> 
     <a href="#"> LINK 2 </a> 
     <ul class="hidden"> 
      <li><a href="#"> SUB LINK 1 </a></li> 
      <li><a href="#"> SUB LINK 2 </a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#"> LINK 3 </a> 
     <ul class="hidden"> 
      <li><a href="#"> SUB LINK 1 </a></li> 
      <li><a href="#"> SUB LINK 2 </a></li> 
     </ul> 
    </li> 
    <li><a href="#"> LINK 4 </a></li> 
</ul> 

CSS

.navigationMenu {clear:both;text-align:center;margin-top:10px;} 
.navigationMenu ul {list-style-type:none;margin:0;padding:0;position: absolute;text-align: center;} 
.navigationMenu li {display:inline;float:left;margin-right: 1px;text-align: center;} 
.navigationMenu li a {min-width:140px;height: 50px;text-align: center;line-height: 50px;color: #fff;background:#B22222;text-decoration: none;display: inline-block;} 
.navigationMenu li:hover a {background: #19c589;} 
.navigationMenu li:hover ul a {background: #f3f3f3;color: #2f3036;height: 40px;line-height: 40px;} 
.navigationMenu li:hover ul a:hover {background: #19c589;color: #fff;} 
.navigationMenu li ul {display: none;position: absolute;} 
.navigationMenu li ul li {display: block;float: none;} 
.navigationMenu li ul li a {width: auto;min-width: 100px;padding: 0 20px;} 
.navigationMenu ul li a:hover + .hidden, .hidden:hover {display: block;} 

여기에 문제는 내가 .navigationMenu의 중심에 메뉴를 만들 수 없다 JSFIDDLE.이다. 어떤 아이디어? 사용 가능한

Answer 1

일단 inline-block에 <li>의 표시를 설정하고 불필요한 위치를 제거하고 수평 <ul>를 정렬 중심에 floats, 당신은 margin: 0 auto를 사용할 수 있습니다

.navigationMenu { 
 
    text-align: center; 
 
    margin-top: 10px; 
 
} 
 
.navigationMenu ul { 
 
    list-style-type: none; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 
.navigationMenu li { 
 
    display: inline-block; 
 
} 
 
.navigationMenu li a { 
 
    display: inline-block; 
 
    min-width: 140px; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    background: #B22222; 
 
} 
 
.navigationMenu li:hover a { 
 
    background: #19c589; 
 
} 
 
.navigationMenu li:hover ul a { 
 
    height: 40px; 
 
    line-height: 40px; 
 
    color: #2f3036; 
 
    background: #f3f3f3; 
 
} 
 
.navigationMenu li:hover ul a:hover { 
 
    background: #19c589; 
 
    color: #fff; 
 
} 
 
.navigationMenu li ul { 
 
    display: none; 
 
    position: absolute; 
 
} 
 
.navigationMenu li ul li { 
 
    display: block; 
 
    float: none; 
 
} 
 
.navigationMenu li ul li a { 
 
    width: auto; 
 
    min-width: 100px; 
 
    padding: 0 20px; 
 
} 
 
.navigationMenu ul li a:hover + .hidden, 
 
.hidden:hover { 
 
    display: block; 
 
}

<div class="navigationMenu"> 
 
    <ul id="menu"> 
 
    <li><a href="#"> LINK 1 </a></li> 
 
    <li> 
 
     <a href="#"> LINK 2 </a> 
 
     <ul class="hidden"> 
 
     <li><a href="#"> SUB LINK 1 </a></li> 
 
     <li><a href="#"> SUB LINK 2 </a></li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a href="#"> LINK 3 </a> 
 
     <ul class="hidden"> 
 
     <li><a href="#"> SUB LINK 1 </a></li> 
 
     <li><a href="#"> SUB LINK 2 </a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#"> LINK 4 </a> 
 
    </li> 
 
    </ul> 
 
</div>

---

사이드 노트 : text-align과 같은 일부 CSS 속성은 상속되며, 재정의하려는 경우가 아니면 하위 요소에 대해 동일한 것을 지정할 필요가 없습니다. 그래서 나는 그것들을 제거함으로써 약간을 청소했습니다.

Answer 2

하나의 옵션 : 아래 그림과 같이

.navigationMenu ul { 
    /* position: absolute; */ 
    margin: 0 auto; 
    display: table; 
}