• 1 index
• 2 about
• 3 everything
• 4 and
• 5 nothing

Kódja: 

<ul id="navigacio">

<li>

<a href="#">1 index</a></li>

<li>

<a href="#">2 about</a></li>

<li>

<a href="/#">3 everything</a></li>

<li>

<a href="#">4 and</a></li>

<li>

<a href="#">5 nothing</a></li>

</ul>

 

<style type="text/css">

#navigacio {

   width:400px!important;

   height:50px!important;

   margin-bottom:5px;

   margin-top:20px;

   border-bottom:2px solid #38b567;

   margin-left:10px;

   text-align:left!important;

   display:inline!important;

   padding:0!important;

   list-style-type: none!important;

   list-style-image: none!important;

   list-style: none!important;

}

 

#navigacio li:hover {

background:#38b567;

}

 

#navigacio li {

   text-align:left!important;

   display:inline!important;

   margin-bottom: 0px;

   padding:10!important;

   background-color:transparent;

}

#navigacio a {

display:inline-block!important;

font-family:'Inconsolata'!important;

line-height:18px!important;

padding:5px!important;

color:#e7e7e7!important;

font-size:12px;

opacity:1!important;

letter-spacing:-1px;

text-decoration:none;

text-shadow:none!important;

transition: all .4s ease-in-out;

-o-transition: all .4s ease-in-out;

-webkit-transition: all .4s ease-in-out;

-moz-transition: all .4s ease-in-out;

font-style:italic;

}

 

#navigacio a::first-letter {

font-size:25px;

font-family:'Anton'!important;

color:#fff!important;

text-shadow:none!important;

}

 

#navigacio a:hover { 

font-family:'Inconsolata'!important;

text-decoration:none;

color:#fff!important;

}

 

--> </style>

</p>