Aristo CSS3 Menu V2

I found this menu structure after falling in love with the jQueryUI Aristo theme.  A really slick and smooth theme that I personally find, works very well with all my jQueryUI projects.  Whenever styling buttons of widgets (calendar, sliders, etc;) I reach for Aristo UI.

Anyway I found that this theme has also been crafted into a Menu using pure CSS3 techniques (sorry IE8 lovers, this stuff won’t fly for your browser or older spawn).  However, the problem with this initial menu design that I found was that not much explanation was given how to use the CSS (like why did he use SPAN’s inside the theme? Doesn’t look useful for me).  Also there were mistakes (spelling errors for class names, invalid class selectors, etc).

So I basically `updated` that version and dubbed it Aristo CSS3 Menu V2, below is all the things you need to roll your own. If you do use it in your design please at least shoot me over a link here, I will update for those that use / base their design off this work. I’m not taking full credit for it (after all I just corrected and fixed up the original design).

Teaser

CSS

 .aristo-menu{
    border:none;
    border:0px;
    margin-left: -7px;
    margin-right: -7px;
    padding:0px;
    font-family:  Helvetica,Arial,sans-serif !important;
    font-size: 11px;
	position: relative;
}

.aristo-menu ul{     
    background: #ddd;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#c4c4c4));
    background: -moz-linear-gradient(top, #ededed, #c4c4c4);
    display:block;
    height:28px;
    list-style:none;
    margin-top:0;
	margin-bottom: 0;
    padding-left: 10px;     
    border: 1px solid #acacac;
    border-top-color: #bdbdbd;
    border-bottom-color: #949494;
    border-radius: .214em;
    -webkit-border-radius: .214em;
    -moz-border-radius: .214em;
}

.aristo-menu li {
    float: left;
    height: 16px;
    display:block; 
    padding: 6px 12px;
	margin: 0;
}

.aristo-menu ul li ul li{
	padding-left: 10px;
	width: 195px;
}

.aristo-menu li.right
{
    float:right;
    display:block;
}
.aristo-menu span.right
{
    float:right;
    display:block;
    line-height: 28px;
    background: #ddd;
    background: -webkit-gradient(linear, left top, left bottom, from(#bbe1f7), to(#80adc7));
    background: -moz-linear-gradient(top, #bbe1f7, #80adc7);
    border-top: 1px solid #567c91;
    border-bottom: 1px solid #88aec4;
    border-color: #6e94a9;
    margin-top: -1px;
}
.aristo-menu li:hover, .aristo-menu ul li ul li:hover{
    background: #ddd;
    background: -webkit-gradient(linear, left top, left bottom, from(#bbe1f7), to(#80adc7));
    background: -moz-linear-gradient(top, #bbe1f7, #80adc7); 
    border-top: 1px solid #567c91;
	border-left: 1px solid #88aec4;
	border-right: 1px solid #88aec4;
    border-bottom: 1px solid #88aec4;
    border-color: #6e94a9;
    margin: -1px -1px 0 -1px; 
	background: -webkit-gradient(linear, left top, left bottom, from(#81afc8), to(#b7def4));
	background: -moz-linear-gradient(top, #81afc8, #b7def4);			
}

.aristo-menu ul li ul li:hover {
	margin: -1px;
}

.aristo-menu li a, .aristo-menu ul li ul li a{
    display:block;
    font-weight: bold;
    color: #4f4f4f;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.698);
    margin:0px;
    text-decoration:none;
}

.aristo-menu li a:hover, .aristo-menu ul li:hover a{
    color:#313131;
    text-decoration:none;
}
.aristo-menu li ul, .aristo-menu li.right ul{  
    display:none;
    height:auto;
    padding:0px;
    margin-top:6px;
    margin-left: -13px;
    position:absolute;   
    border: 1px solid #acacac;
    border-top: 0px;
    border-bottom-color: #949494;
    -moz-border-radius: 0 0 0.214em 0.214em;
    width:205px;
    z-index:9999;	    
	box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 rgba(255,255,255,0.5);
}

.aristo-menu li.right ul{  
right: 0; /* fix for right hand side cutoff */
}

.aristo-menu li ul li{
    float: left;
    height: 20px;
    padding: 5px 0;
}

.aristo-menu li:hover ul{
    display:block;
}

.aristo-menu li li {
    display:block;
    margin:0px;
    padding:0px;
    width:205px;
}

.aristo-menu li:hover li a{
    background:none; 
}

.aristo-menu li ul a{
    padding:0 6px;
    margin: 0 .5em;
    display:block;
    height:20px;
    font-style:normal;
    text-align:left;
}

.aristo-menu li ul a:hover, .aristo-menu li ul li:hover a{
    color:#313131;
    text-decoration:none;
}

.aristo-menu p {
    clear:left;
}
 
.aristo-menu span {
    display:block;
    float:right;
    line-height: 35px;
    padding: 0 25px; 
}
 
.aristo-menu span a {
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    color: #000000;
}

HTML

	<div class="aristo-menu">
        <ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Content</a>			
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
		</ul></li>
		<li><a href="#">Stuff</a>
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
		</ul></li>
	        <li class="right"><a href="#">Account</a>
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
			<li><a href="#">Logout</a></li>
		</ul></li>
        </ul>
	</div>

Post comments if you have any on this, I will tweak it as I fix things, right now I don’t use the SPAN elements. It is still from the original, however I have fixed up the whole menu child elements and added a better hover effect from the original Aristo CSS3 buttons. As mentioned before, spelling mistakes have been fixed up, and a workable demo setup for you guys to try out.