Горизонтальная навигация делает текущий уровень выше

Question

Я работаю над горизонтальной навигацией, где элементы списка должны охватывать всю ширину и Элемент списка «активный» должен быть выше остальных элементов.

Удалось получить элементы списка, чтобы охватить всю ширину, установив ul для отображения: таблицы и элементов списка для отображения: table-cell.

#l-primary-nav ul { 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    display: table; 
} 

#l-primary-nav li { 
    display: table-cell; 
    text-align: center; 
    line-height: 40px; 
} 

Что я не могу понять, так это сделать элемент «active» немного выше остальных. Думаю, я бы установил margin-top: 5px в # l-primary-nav li (выше) и удалил margin-top из активного li (ниже), однако элементы таблицы-таблицы не принимают поля.

#l-primary-nav li.active { 
    background: #fff; 
    border-left: 1px solid #c2c2c2; 
    border-right: 1px solid #c2c2c2; 
} 

Вот ссылка на панели навигации до сих пор: FIDDLE

Я хотел бы, «О» навигации пункт будет около 5 пикселей выше, чем остальные. Надеемся использовать только CSS-решение. Любое понимание было бы весьма благодарным.

Спасибо!

Answer 1

Пожалуйста, обратитесь к следующему стельку: Here

HTML

<div id="l-primary-nav"> 
<ul class="l-inline"> 
    <li><a href="#">Home</a> 
    </li> 
    <li class="active"><a href="#">About</a> 
    </li> 
    <li><a href="#">Articles</a> 
    </li> 
    <li><a href="#">Calendar</a> 
    </li> 
</ul> 

CSS

l-primary-nav { 
width: 600px; 
margin: 0 auto; 
} 
.l-inline li { 
display: inline-block; 
} 
l-primary-nav ul { 
width: 99.8%; 
margin: 0; 
padding: 0; 
border: 1px solid #c2c2c2; 
float: left; 
display: table; 
} 
l-primary-nav li { 
text-align: center; 
display: table-cell; 
float: left; 
} 
l-primary-nav li a{ 
line-height: 40px; 
height: 41px; 
padding: 0 30px; 
border-top: 1px transparent; 
display: block; 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.18, #FBFBFB), color-stop(1, #D1D1D1)); 
background-image: -o-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%); 
background-image: -moz-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%); 
background-image: -webkit-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%); 
background-image: -ms-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%); 
background-image: linear-gradient(to bottom, #FBFBFB 0%, #D1D1D1 100%); 
} 
l-primary-nav li a:hover { 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E1E3E6), color-stop(1, #BABCBF)); 
background-image: -o-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%); 
background-image: -moz-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%); 
background-image: -webkit-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%); 
background-image: -ms-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%); 
background-image: linear-gradient(to bottom, #E1E3E6 0%, #BABCBF 100%); 
} 

l-primary-nav li.active a{ 
margin-top: -5px; 
height: 45px; 
position: relative; 
background: #fff; 
border-left: 1px solid #c2c2c2; 
border-right: 1px solid #c2c2c2; 
border-top: 1px solid #c2c2c2; 
} 

Answer 2

Это может помочь вам

#l-primary-nav li { 
    display:block; 
    width:140px; 
    float:left; 
    text-align: center; 
    margin-top:4px; 
    border: 1px solid #c2c2c2; 
} 

Я дал дисплей: блок для Li элемента и добавил ширина:

Демо: http://jsfiddle.net/ggbhat/af82E/1/

Answer 3

Отработка из предложенных выше решений я был в состоянии держать элементы списка охватывающих всю ширину время придавая активному элементу списка более высокую высоту. Ссылка на код: http://jsfiddle.net/melcsweeney/xc5Y2/

#l-primary-nav { 
width: 600px; 
margin: 0 auto; 
} 
.l-inline li { 
display: inline-block; 
} 
#l-primary-nav ul { 
width: 99.8%; 
margin: 0; 
padding: 0; 
border-left: 1px solid #c2c2c2; 
border-right: 1px solid #c2c2c2; 
border-bottom: 1px solid #c2c2c2; 
float: left; 
display: table; 
} 
#l-primary-nav li { 
text-align: center; 
display: table-cell; 
vertical-align: bottom; 
border-top: 1px solid #c2c2c2; 
} 

#l-primary-nav li a{ 
line-height: 40px; 
height: 41px; 
border-top: 1px transparent; 
display: block; 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.18, #FBFBFB), color-stop(1, #D1D1D1)); 
background-image: -o-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%); 
background-image: -moz-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%); 
background-image: -webkit-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%); 
background-image: -ms-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%); 
background-image: linear-gradient(to bottom, #FBFBFB 0%, #D1D1D1 100%); 
} 
#l-primary-nav li a:hover { 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E1E3E6), color-stop(1, #BABCBF)); 
background-image: -o-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%); 
background-image: -moz-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%); 
background-image: -webkit-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%); 
background-image: -ms-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%); 
background-image: linear-gradient(to bottom, #E1E3E6 0%, #BABCBF 100%); 
} 

#l-primary-nav li.active a{ 
margin-top: -5px; 
height: 45px; 
position: relative; 
background: #fff; 
border-left: 1px solid #c2c2c2; 
border-right: 1px solid #c2c2c2; 
border-top: 1px solid #c2c2c2; 
}