• Index
• About
• Everything
• And
• Nothing

Kódja:

<ul id="navigacio">

<li>

<a href="#">Index</a></li>

<li>

<a href="#">About</a></li>

<li>

<a href="/#">Everything</a></li>

<li>

<a href="#">And</a></li>

<li>

<a href="#">Nothing</a></li>

</ul>

<style type="text/css">

#navigacio {

   margin-left:0px;

   text-align:center!important;

   display:inline!important;

   padding:0!important;

   list-style-type: none!important;

   list-style-image: none!important;

   list-style: none!important;

}

 

#navigacio li {

   text-align:center!important;

   display:inline!important;

   margin-bottom: 0px;

   padding:10!important;

   background-color:transparent;

}

#navigacio a {

text-align:center!important;

width:100px!important;

height:20px!important;

display:inline-block!important;

font-family:'Inconsolata'!important;

line-height:18px!important;

padding:5px!important;

color:#333333!important;

font-size:12px;

opacity:1!important;

letter-spacing:-1px;

text-decoration:none;

text-shadow:none!important;

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

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

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

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

font-style:italic;

border-top: 2px solid #363636;

border-bottom: 2px solid #363636;

border-left: 5px solid #853154;

border-right: 5px solid #853154;

border-bottom-left-radius:5px!important;

border-bottom-right-radius:5px!important;

border-top-left-radius:5px!important;

border-top-right-radius:5px!important;

background:#ccc;

-webkit-box-shadow: inset 0px 0px 15px 0px #616060;

-moz-box-shadow: inset 0px 0px 15px 0px #616060;

box-shadow: inset 0px 0px 15px 0px #616060;

}

 

#navigacio a:hover { 

font-family:'Inconsolata'!important;

text-decoration:none;

color:#853154!important;

border-top: 2px solid #363636;

border-bottom: 2px solid #363636;

border-left: 5px solid #A83666;

border-right: 5px solid #A83666;

border-bottom-left-radius:5px!important;

border-bottom-right-radius:5px!important;

border-top-left-radius:5px!important;

border-top-right-radius:5px!important;

background:#ccc;

-webkit-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,1);

-moz-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,1);

box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,1);

}

 

--></style>

<LINK HREF='HTTPS://FONTS.GOOGLEAPIS.COM/CSS?FAMILY=INCONSOLATA' REL='STYLESHEET' TYPE='TEXT/CSS'>