----------------------------

dabblet.css

/* ---------------------------- */
/*  ==		Header				*/
/* ---------------------------- */


#header {	
	height: 150px;
	background : url(../img/ordilogie_header_background.png) repeat-x;
}

#header_inside{
width:960px;
margin: auto; /* centre le contenu du header et le decale vers le bas */
text-align:center;
}
#header_inside p , #nav li {text-align:left;}
#header_inside p  a {
margin-left:20px;
}

#header_inside > a > img{
	border: none;
}

#nav li {margin:0;padding:0;min-width:10px;}
#nav li a {line-height:40px;}
#nav {
display:inline-block;
	padding: 0; 
	position:relative;
    white-space:nowrap;
}

.nav_sub {
	position: absolute;
    z-index: -1;
    opacity: 0;
    margin:0;padding:0;
	left:0;
}
	
.nav_sub > li {
	display:inline;;  
    overflow: hidden;
    transition: background-color 1.6s;
    transition-duration: 1.6s;
}
#nav >  li { 
    transition-property: min-width;
    transition-duration: .4s;
    display:inline-block;
}
#nav  li  a { 		
	display:block;
	padding: 0px 12px;
	color: #fff;
	font-size: 1.3em;
	text-shadow: 0px 0px 6px #777; 
	text-decoration: none;
    background-color: rgba(61,72,103,0.6);/* rgba(102,126,195,0.8), #98B924; */
	border: 2px solid #9599b7;/*a3a7c3*/
} 
#nav li  li a {display:inline-block;}
/* -- FIXME -- probleme avec les nav_sub qui s'affiche sans qu'on aille sur les elements de la liste adequats */
#nav   li:hover   .nav_sub{
	z-index: 1;
	opacity: 1;
}


.nav_sub  li:hover {
	background: rgba(102,126,195,0.9)
}

.nav_sub  li:first-child, .nav_sub  li:first-child:hover, .nav_sub  li:first-child  a {  
	border-radius: 10px 0 0 10px; 
} 

.nav_sub  li:last-child, .nav_sub  li:last-child:hover, .nav_sub > li:last-child  a {  
    border-radius: 0 10px 10px 0; 
} 



 


  


#nav > li:first-child, #nav  li:first-child:hover, #nav > li:first-child > a {  
	border-radius: 10px 0 0 10px; 
} 

#nav > li:last-child, #nav > li:last-child:hover, #nav > li:last-child > a{  
    border-radius: 0 10px 10px 0; 
} 

#nav li + li a {
	border-left: 0;
} 

#nav  li:hover { 
    min-width: 130px;
} 

#nav > li:hover	{ 
    background: rgba(102,126,195,0.9); 
}

dabblet.html

<div id="wrapper">
			
			<div id="header">
				<div id="header_inside">
					<p>
					<a href="mon_lien" accesskey="1" title="mon_titre"><img id="logo" alt="Accueil - Ordilogie" 
							src="mon_image_logo.png" width="309" height="56" /></a>
					<p>
					<ul id="nav">
						<li><a href="#">Menu0</a></li><!--
						--><li><a href="#">Menu1</a>
							<ul class="nav_sub">
								<li><a href="#">Menu_item_1_1</a></li><!--
								--><li><a href="#">Menu_item_1_2</a></li><!--
								--><li><a href="#">Menu_item_1_3</a></li><!--
								--><li><a href="#">Menu_item_1_4</a></li>
							</ul>
						</li><!--
						--><li><a href="#">Menu2</a>
							<ul class="nav_sub">
								<li><a href="#">Menu_item_2_1</a></li><!--
								--><li><a href="#">Menu_item_2_2</a></li>
							</ul>
						</li><!--
						--><li><a href="#">Menu_3</a></li>
					</ul> 	
				</div>			
			</div>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}