Menu Glaxie

<div class="wrapper">  

<div class="container"><ul class="menu" rel="sam1">  

<li class="active"><a href="#">Home</a></li>  

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

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

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

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

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

<li><a href="#">Twitter @insic</a></li>  

</ul>  

</div>  

</div>  

<ul class="vertical fl" rel="ver1">

                <li><a href="#">Home</a><span>Go to my Home</span></li>

                <li><a href="#">About</a><span>Know a little about me</span></li>

                <li><a href="#">Blog</a><span>My daily updates</span></li>

                <li><a href="#">Services</a><span>This is what I do</span></li>

                <li><a href="#">Portfolio</a><span>Showcase of my works</span></li>

                <li><a href="#m">Contacts</a><span>Say something about me</span></li>

                <li><a rel="external nofollow" href="#">Twitter @insic</a><span>Follow me on twitter</span></li>

            </ul>

body {

    font-family: Arial;

    font-size: 14px;

    text-shadow: 0 1px 1px rgba(255,255,255,0.4);

    color: #262626;

    margin: 0;

    padding: 0;

    background: #141414;

}

.wrapper {

    width: 100%;

    height: 80px;

    background : #464646;

    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));

    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));

    border-top: 2px solid #939393;

    position: relative;

    margin-bottom: 30px;

}

.title {

    position: absolute;

    right: 20px;

    top: 10px;

    font-size: 18px;

    text-transform: uppercase;

}

.fl {

    float: left;

}

.container {

    width: 960px;

    margin: 0 auto;

}

.menu {

    height: 80px;

    border-left: 1px solid rgba(0,0,0,0.3);

    border-right: 1px solid rgba(255,255,255,0.3);

    float:left;

}

a {

    text-decoration: none;

    color: #363636;

    text-transform: uppercase;

    font-size: 15px;

    font-weight: bold;

}

ul {

    margin: 0;

    padding: 0;

}

ul.menu li {

    list-style: none;

    float:left;

    height: 79px;

    text-align: center;

    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );

    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);

    }

ul li a {

    display: block;

    padding: 0 20px;

    border-left: 1px solid rgba(255,255,255,0.1);

    border-right: 1px solid rgba(0,0,0,0.1);

    text-align: center;

    line-height: 79px;

    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));

    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));

    -webkit-transition-property: background;

    -webkit-transition-duration: 700ms;

    -moz-transition-property: background;

    -moz-transition-duration: 700ms;

    }

ul li a:hover {

    background: transparent none;

}

ul[rel=sam1] li a {

    background: #606060;

}

ul[rel=sam1] li a:hover {

    background: transparent none;

}

ul li.active a{

    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );

    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);

}

/* Css for vertical sample */

ul.vertical {

    margin: 0 20px 0 0;

    width: 250px;

    border: 1px solid #323232;

    -webkit-border-top-right-radius: 8px;

    -moz-border-radius-topright: 8px;

    -webkit-border-bottom-right-radius: 8px;

    -moz-border-radius-bottomright: 8px;

}

ul.vertical li {

    list-style: none;

    position: relative;

    background: -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 140, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );

    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);

}

ul.vertical li span {

    position: absolute;

    left: 20px;

    top: 50px;

    color: #151515;

    text-shadow: 0 1px 1px rgba(255,255,255,0.2);

}

ul.vertical li:first-child a, ul.vertical li:first-child {

    -webkit-border-top-right-radius: 8px;

    -moz-border-radius-topright: 8px;

}

ul.vertical li:last-child a, ul.vertical li:last-child {

    -webkit-border-bottom-right-radius: 8px;

    -moz-border-radius-bottomright: 8px;

}

ul.vertical li a{

    background: -webkit-gradient(linear, left top, left bottom, from(rgba(117,117,117,1)), to(rgba(68,68,68,1)));

    background: -moz-linear-gradient(top, rgba(117,117,117,1), rgba(68,68,68,1));

    text-align: left;

    border-bottom: 1px solid #323232;

    border-top: 1px solid #868686;

    border-right: 1px solid #5a5a5a;

    color: #151515;

    -webkit-transition-property: background;

    -webkit-transition-duration: 700ms;

    -moz-transition-property: background;

    -moz-transition-duration: 700ms;

}

ul.vertical li a:hover {

    background: transparent none;

}

ul.vertical[rel=ver1] li a{

    background: #606060;

}

ul.vertical[rel=ver1] li a:hover{

    background: transparent none;

}