Geek Answers Handbook

Horizontal navigation makes the current level higher

I am working on horizontal navigation, where list items should cover the entire width and , the "active" list item should be higher than the rest of the items.

I managed to get list items to cover the entire width by setting ul to display: table and list items to be displayed: 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;
}

I cannot figure out how to make the "active" element a little higher than the rest. I think I would set margin-top: 5px to # l-primary-nav li (see above) and remove margin-top from the active li (below), however table-table elements do not accept fields.

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

Here's the link to the navigation bar: FIDDLE

, "About" 5 . CSS-. .

!

+4
3

, :

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;
}
+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/

+2

, , . : 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;
}
0

More articles:


All Articles