3 Votes Vote

CSS3 - Menu Help

Posted by topdog 719 days ago Questions| href class div All
I am trying to make this menu so that it looks like this, but they all look like what they should look like it when it's hovered over, automatically.

HTML:
CODE
<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>

CSS3:
CODE
.wrapper {  
    width: 100%;  
    height: 80px;  
    background : #464646;  
    background : -webkit-gradient(linear, left top, left bottombottom, 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;  

ul {  
    margin: 0;  
    padding: 0;  
}  
  
.ul.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;  
}  
  
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 bottombottom, 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 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%);  
}
}


Any issues you can see.
Discuss Bury


Who Voted for this Question