Навигация SubMenu не может быть центрирован

Question

Я сделал навигацию до сих пор и что-то вроде этого ниже.

HTML

<div id="topNav"> 
      <ul> 
       <li><a href="#">View</a></li> 
       <li class="drop"> 
        <a href="#">You</a> 
        <div class="dropdownContain"> 
         <div class="dropOut"> 
          <div class="triangle"></div> 
          <ul> 
           <li> <a href="#"> Plan </a> </li> 
           <li> <a href="#"> Plan </a> </li> 
           <li> <a href="#"> Plan </a> </li> 
          </ul> 
         </div> 
        </div> 
       </li> 
       <li><a href="#">Help</a></li> 
      </ul> 
     </div> 

CSS

#topNav {width: 100%;} 
#topNav ul {text-align: center;} 
#topNav ul li {cursor: pointer;-webkit-transition: padding .05s linear;-moz-transition: padding .05s linear;-ms-transition: padding .05s linear;-o-transition: padding .05s linear;transition: padding .05s linear;} 
#topNav ul li.drop {position: relative;} 
#topNav ul > li {display: inline-block;} 
#topNav ul li a {border:1px solid #CCC;line-height: 80px;padding: 0 20px;height: 80px;color: #777;-webkit-transition: all .1s ease-out;-moz-transition: all .1s ease-out;-ms-transition: all .1s ease-out;-o-transition: all .1s ease-out;transition: all .1s ease-out;} 
#topNav ul li ul li {width: 125px;padding: 10px 5px;margin: 0px 10px;color: #777;text-align:center;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-transition: background .1s ease-out;-moz-transition: background .1s ease-out;-ms-transition: background .1s ease-out;-o-transition: background .1s ease-out;transition: background .1s ease-out;} 
#topNav ul li ul li a {border:none;line-height:0;padding:0;height:auto;background-color:#FFF;color:#666;} 
.dropOut .triangle {width: 0;height: 0;position: absolute;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid white;top: -8px;left: 50%;margin-left: -8px;} 
.dropdownContain {width: 160px;position: absolute;z-index: 2;left: 50%;margin-left: -80px; top: -400px;} 
.dropOut {width: 160px;padding-bottom:10px;background: white;float: left;position: relative;margin-top: 0px;opacity: 0;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);box-shadow: 0 1px 6px rgba(0,0,0,.15);-webkit-transition: all .1s ease-out;-moz-transition: all .1s ease-out;-ms-transition: all .1s ease-out;-o-transition: all .1s ease-out;transition: all .1s ease-out;} 
.dropOut ul li a {text-align:center;} 
.dropOut ul li:hover {background: #f6f6f6;} 
#topNav ul li:hover .dropdownContain { top: 65px; } 
#topNav ul li:hover .underline { border-bottom-color: #777; } 
#topNav ul li:hover .dropOut { opacity: 1; margin-top: 8px; } 

Вот JSFIDDLE. Я пытался использовать text-align:center;, vertical-align:middle;, и проблема в том, что subMenu на самом деле не выглядит хорошо. Есть идеи?

Answer 1

Вы упускаете сбросить отступы, назначенный по умолчанию для элементов UL

#topNav ul { 
    text-align:center; 
    padding:0; /* this one was missing */ 
    /* margin:0; /* uncomment if needed */ 
} 

updated fiddle

Answer 2

Каждый уль элемент имеют некоторый отступ по умолчанию на левой стороне, чтобы показать bullits, так когда вы устанавливаете стиль списка не равным, вам нужно удалить левое заполнение, чтобы показать свои объекты в центре, Просто установите левое заполнение вашей ul, что делает ваше выпадающее меню равным 0, оно будет работать

Я добавил атрибут класса 'subm' к вашей ul, который создает ваше раскрывающееся меню и применяется paddding-left: 0; он будет работать сейчас.

#topNav {width: 100%;} 
 
#topNav ul {text-align: center;} 
 
#topNav ul li {cursor: pointer;-webkit-transition: padding .05s linear;-moz-transition: padding .05s linear;-ms-transition: padding .05s linear;-o-transition: padding .05s linear;transition: padding .05s linear;} 
 
#topNav ul li.drop {position: relative;} 
 
#topNav ul > li {display: inline-block;} 
 
#topNav ul li a {border:1px solid #CCC;line-height: 80px;padding: 0 20px;height: 80px;color: #777;-webkit-transition: all .1s ease-out;-moz-transition: all .1s ease-out;-ms-transition: all .1s ease-out;-o-transition: all .1s ease-out;transition: all .1s ease-out;} 
 
#topNav ul li ul li {width: 125px;padding: 10px 5px;margin: 0px 10px;color: #777;text-align:center;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-transition: background .1s ease-out;-moz-transition: background .1s ease-out;-ms-transition: background .1s ease-out;-o-transition: background .1s ease-out;transition: background .1s ease-out;} 
 
#topNav ul li ul li a {border:none;line-height:0;padding:0;height:auto;background-color:#FFF;color:#666;} 
 
.dropOut .triangle {width: 0;height: 0;position: absolute;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid white;top: -8px;left: 50%;margin-left: -8px;} 
 
.dropdownContain {width: 160px;position: absolute;z-index: 2;left: 50%;margin-left: -80px; top: -400px;} 
 
.dropOut {width: 160px;padding-bottom:10px;background: white;float: left;position: relative;margin-top: 0px;opacity: 0;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);box-shadow: 0 1px 6px rgba(0,0,0,.15);-webkit-transition: all .1s ease-out;-moz-transition: all .1s ease-out;-ms-transition: all .1s ease-out;-o-transition: all .1s ease-out;transition: all .1s ease-out;} 
 
.dropOut ul li a {text-align:center;} 
 
.dropOut ul li:hover {background: #f6f6f6;} 
 
#topNav ul li:hover .dropdownContain { top: 65px; } 
 
#topNav ul li:hover .underline { border-bottom-color: #777; } 
 
#topNav ul li:hover .dropOut { opacity: 1; margin-top: 8px; } 
 
.subm{ 
 
    padding-left: 0; 
 
    text-align: center; 
 
}

<div id="topNav"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">View</a></li> 
 
\t \t \t \t <li class="drop"> 
 
\t \t \t \t \t <a href="#">You</a> 
 
\t \t \t \t \t <div class="dropdownContain"> 
 
\t \t \t \t \t \t <div class="dropOut"> 
 
\t \t \t \t \t \t \t <div class="triangle"></div> 
 
\t \t \t \t \t \t \t <ul class='subm'> 
 
\t \t \t \t \t \t \t \t <li> <a href="#"> Plan </a> </li> 
 
\t \t \t \t \t \t \t \t <li> <a href="#"> Plan </a> </li> 
 
\t \t \t \t \t \t \t \t <li> <a href="#"> Plan </a> </li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li><a href="#">Help</a></li> 
 
\t \t \t </ul> 
 
\t \t </div>