Веб-навигационная панель не будет

Question

Попытка получить слова в моей навигационной панели в центр. Я попробовал кучу разных конфигураций, которые я нашел в Интернете, и пока не повезло.

Кроме того, есть ли что-нибудь, что я могу сделать, чтобы панель навигации выглядела чище и профессиональнее?

Спасибо заранее

<div class="nav-container clearfix"> 
<ul id="nav"> 
    <li class="first"><a href="<?php echo Mage::getBaseUrl(); ?>"><span>Home</a></li> 
    <li><a href="<?php echo Mage::getBaseUrl(); ?>whysoy"><span>Why Soy?</a></li> 
    <li><a href="<?php echo Mage::getBaseUrl(); ?>plantatree"><span>Candle Sold, Tree Planted</a></li> 
    <li><a href="<?php echo Mage::getBaseUrl(); ?>build-a-candle.html"><span>Build-a-Candle</a></li> 
    <li><a href="<?php echo Mage::getBaseUrl(); ?>contact-us"><span>Contact Us</a></li> 
    <li><a class="category" href="<?php echo Mage::getBaseUrl(); ?>all-products"> 
      <span>Buy Products</span> 
      <ul class="level0"> 
       <?php echo $_menu ?> 

      </ul> 
     </a> 
    </li> 


</ul> 

/*** CLEARFIX ******/ 

.clearfix:before, 
.clearfix:after { 
content: ""; 
display: table; 
clear: both 
    } 
/********** < Navigation */ 
.nav-container {clear: both; width:100%; float: left; text-align: center; margin: 10px 0px 10px; text-transform:  uppercase; font-weight: bold; display: inline; background:#d4dadd !important; box-shadow: 10px 10px 5px #888888  !important; } 
#nav { margin:0 auto; padding:0; font-size:12px; } 

/* All Levels */ /* Style consistent throughout all nav levels */ 
#nav li { 
display: inline-block; 
padding: 5px; 
margin: 5px; 
border-right: 1px solid #000; 
list-style: none; 
vertical-align: top; 
height: 50px; 
position:relative; 
} 

#nav li.over { z-index:998; background-color: #b3bec3; } 
#nav a, 
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; padding: 10px; 
text-align: center; } 
#nav span { display:block; cursor:pointer; } 
#nav li ul span {white-space:normal; } 
#nav ul li.parent a {} 
#nav ul li.parent li a { background-image:none; } 
#nav a.category span { background: url(../images/nav-category.gif) no-repeat center right; padding-right: 20px; } 

/* 0 Level */ 
#nav li.active a { color:#2882ce; } 
#nav a { font-size: 115%; color:#303030; } 
#nav li.last a { padding-right: 0px !important;} 
#nav li.over a, 
#nav a:hover { color:#2882ce; } 

/* 1st Level */ 
#nav ul li, 
#nav ul li.active { float:none; margin:0; padding-bottom:1px; background:#d4dadd; } 
#nav ul li.last { background:#d4dadd; padding-bottom:0; } 

#nav ul a, 
#nav ul a:hover { float:none; padding:0; background:none; } 
#nav ul li a { font-size: 100% !important; font-weight:normal !important; } 

/* 2nd Level */ 
#nav ul, 
#nav div { position:absolute; width:15em; top:27px; left:-10000px; border:1px solid #899ba5; } 
#nav div ul { position:static; width:auto; border:none; } 

/* 3rd+ Level */ 
#nav ul ul, 
#nav ul div { top:5px; } 

#nav ul li a { background:#d4dadd; } 
#nav ul li a:hover { background:#b3bec3; } 
#nav ul li a, 
#nav ul li a:hover { color:#2f2f2f !important; } 
#nav ul span, 
#nav ul li.last li span { padding:3px 15px 4px 15px; } 

/* Show menu */ 
#nav li ul.shown-sub, 
#nav li div.shown-sub { left:0; z-index:999; } 
#nav li .shown-sub ul.shown-sub, 
#nav li .shown-sub li div.shown-sub { left:100px; } 

<div class="nav-container clearfix"> 
<ul id="nav"> 
    <li class="first"><a href="<?php echo Mage::getBaseUrl(); ?>"><span>Home</a></li> 
    <li><a href="<?php echo Mage::getBaseUrl(); ?>whysoy"><span>Why Soy?</a></li> 
    <li><a href="<?php echo Mage::getBaseUrl(); ?>plantatree"><span>Candle Sold, Tree Planted</a></li> 
    <li><a href="<?php echo Mage::getBaseUrl(); ?>build-a-candle.html"><span>Build-a-Candle</a></li> 
    <li><a href="<?php echo Mage::getBaseUrl(); ?>contact-us"><span>Contact Us</a></li> 
    <li><a class="category" href="<?php echo Mage::getBaseUrl(); ?>all-products"> 
      <span>Buy Products</span> 
      <ul class="level0"> 
       <?php echo $_menu ?> 

      </ul> 
     </a> 
    </li> 


</ul> 

Answer 1

Я изменил код немного, вот фрагмент ниже, чтобы увидеть этот рабочий щелчок кнопки Full Page сниппета.

ОБНОВЛЕННЫЙ снипп на основе комментариев ФП к ответам.

/*** CLEARFIX ******/ 
 

 
.clearfix:before, 
 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both 
 
} 
 
/********** < Navigation */ 
 

 
.nav-container { 
 
    clear: both; 
 
    width: 100%; 
 
    float: left; 
 
    margin: 10px 0px 10px; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    display: inline; 
 
    background: #ecf3f6 !important; 
 
    box-shadow: 10px 10px 5px #888888 !important; 
 
} 
 
#nav { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    font-size: 12px; 
 
} 
 
/* All Levels */ 
 

 
/* Style consistent throughout all nav levels */ 
 

 
#nav li { 
 
    display: inline-block; 
 
    margin: 5px 0; 
 
    border-right: 1px solid #000; 
 
    list-style: none; 
 
    vertical-align: top; 
 
    height: 70px; 
 
    width:16.3% 
 
} 
 
#nav li:last-child { 
 
    border-right: 0 
 
} 
 
#nav li.over { 
 
    z-index: 998; 
 
    background-color: #d4dadd; 
 
} 
 
#nav a, 
 
#nav a:hover { 
 
    display: block; 
 
    line-height: 1.3em; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    text-align: center 
 
} 
 
#nav span { 
 
    display: block; 
 
    cursor: pointer 
 
} 
 
#nav li ul span { 
 
    white-space: normal; 
 
} 
 
#nav ul li.parent a {} #nav ul li.parent li a { 
 
    background-image: none; 
 
} 
 
#nav a.category span { 
 
    background: url(../images/nav-category.gif) no-repeat center right; 
 
    padding-right: 20px; 
 
} 
 
/* 0 Level */ 
 

 
#nav li.active a { 
 
    color: #2882ce; 
 
} 
 
#nav a { 
 
    font-size: 115%; 
 
    color: #303030; 
 
} 
 
#nav li.last a { 
 
    padding-right: 0px !important; 
 
} 
 
#nav li.over a, 
 
#nav a:hover { 
 
    color: #2882ce; 
 
} 
 
/* 1st Level */ 
 

 
#nav ul li, 
 
#nav ul li.active { 
 
    float: none; 
 
    margin: 0; 
 
    padding-bottom: 1px; 
 
    background: #ecf3f6; 
 
} 
 
#nav ul li.last { 
 
    background: #ecf3f6; 
 
    padding-bottom: 0; 
 
} 
 
#nav ul a, 
 
#nav ul a:hover { 
 
    float: none; 
 
    padding: 0; 
 
    background: none; 
 
} 
 
#nav ul li a { 
 
    font-size: 100% !important; 
 
    font-weight: normal !important; 
 
} 
 
/* 2nd Level */ 
 

 
#nav ul, 
 
#nav div { 
 
    position: absolute; 
 
    width: 15em; 
 
    top: 27px; 
 
    left: -10000px; 
 
    border: 1px solid #899ba5; 
 
} 
 
#nav div ul { 
 
    position: static; 
 
    width: auto; 
 
    border: none; 
 
} 
 
/* 3rd+ Level */ 
 

 
#nav ul ul, 
 
#nav ul div { 
 
    top: 5px; 
 
} 
 
#nav ul li a { 
 
    background: #ecf3f6; 
 
} 
 
#nav ul li a:hover { 
 
    background: #d5e4eb; 
 
} 
 
#nav ul li a, 
 
#nav ul li a:hover { 
 
    color: #2f2f2f !important; 
 
} 
 
#nav ul span, 
 
#nav ul li.last li span { 
 
    padding: 3px 15px 4px 15px; 
 
} 
 
/* Show menu */ 
 

 
#nav li ul.shown-sub, 
 
#nav li div.shown-sub { 
 
    left: 0; 
 
    z-index: 999; 
 
} 
 
#nav li .shown-sub ul.shown-sub, 
 
#nav li .shown-sub li div.shown-sub { 
 
    left: 100px; 
 
}

<div class="nav-container clearfix"> 
 
    <ul id="nav"> 
 
    <li class="first"><a href=""><span>Home</span></a> 
 
    </li> 
 
    <li><a href="">whysoy<span>Why Soy?</span></a> 
 
    </li> 
 
    <li><a href="">plantatree<span>Candle Sold, Tree Planted</span></a> 
 
    </li> 
 
    <li><a href=""><span>Build-a-Candle</span></a> 
 
    </li> 
 
    <li><a href=""><span>Contact Us</span></a> 
 
    </li> 
 
    <li><a class="category" href=""><span>Buy Products</span> 
 
    \t  <ul class="level0"> 
 
    \t  </ul> 
 
      </a> 
 
    </li> 
 
    </ul> 
 
</div>

UPDATE # 3 (с новой информации от OP)

для того, чтобы достичь того, чего вы хотите, просто сделать это изменения ниже на вашем CSS:

.nav-container { 
    background: none repeat scroll 0 0 #d4dadd !important; 
    box-shadow: 10px 10px 5px #888888 !important; 
    float: left; 
    font-size: 0; 
    font-weight: bold; 
    margin: 10px 0; 
    text-align: center; 
    text-transform: uppercase; 
    width: 100%; 
} 
#nav li { 
    border-right: 1px solid #000; 
    display: inline-block; 
    font-size: 12px; 
    height: 50px; 
    list-style: none outside none; 
    margin: 5px 0; 
    padding: 5px; 
    position: relative; 
    vertical-align: top; 
    width: 15%; 
} 
#nav ul li, #nav ul li.active { 
    background: none repeat scroll 0 0 #d4dadd; 
    border-right: 0 none; 
    display: block; 
    float: none; 
    margin: 0; 
    width: 100%; 
} 
/*you may delete this: 
    #nav ul li.last { 

}*/