CSS Document

dabblet.css

@charset "utf-8";
/* CSS Document */

@font-face {
	font-family: 'helveticacondensed';
	font-weight:normal;
	font-style:normal;
	src:url("../helveticacondensed/helvcond.eot") format('eot'); /* IE */
	src: url("../helveticacondensed/helvcond.woff") format("woff"), 
	url("../helveticacondensed/helvcond.ttf") format("truetype"), 
	url("../helveticacondensed/helvcond.svg") format("svg");
}
#conteneur {position:relative;width:1050px;margin:0 auto;padding:0;background:silver}
/* =============================================================================
   Menu
   ========================================================================== */
.menu {
	font-family:helveticacondensed,"helveticacondensed", sans-serif, Helvetica, Arial;
	font-size:0.8em;
    padding:0;
    margin:auto;
	border:0;
    list-style:none;
	cursor:pointer;
	width:990px;
	background:#777 url(../images/menuh_background_1x44px.gif) repeat-x;
	line-height:44px;
	border-radius:6px;
	display:block
}
.menu .menuh_home {
	background:url(../images/menuh_home_18x18px.gif) center center no-repeat;
}
.menu li  {
	display:inline-block;
	margin:0;
	padding:0;
	border:0;
    text-align:center;
   	position:relative;
   	width:116px;
   	border-left:solid 1px #999;
}
.menu li:first-child {
	width:50px;
}
.submenu {
	text-align:left;
	list-style:none;
	margin:0;
	padding:0;
	border:0;
	width:360px;
	background:white;
	position:absolute;
	left:-9999px;;
	box-shadow:0px 4px 8px #777;
}
.menu .submenu li {
	border-left:none;
	text-align:left;
	width:160px;
	padding:0 5px;
}
.menu li:hover .submenu {
	border-radius:0 0 6px 6px;
	left:-1px;
}
.menu li:nth-last-child(-n+4):hover .submenu {
	border-radius:0 0 6px 6px;
	right:0px;left:auto;
}
.searchform input{
	width:90px;
}
.menu a:link, .menu a:visited, .menu a:hover, .menu a:active {
	color:white;
	text-decoration:none;
}
.submenu a:link, .submenu a:visited, .submenu a:hover, .submenu a:active {
	color:grey;
	text-decoration:none;
}
.submenu span {
	display:block;
}
.border-bottom {
	border-bottom:dotted 1px gray;
}

dabblet.html

<div id="conteneur">
    <nav>
        <ul class="menu">
            <li><a href="/" class="menuh_home"><img src="../images/menuh_home_18x18px.gif" alt="Home" /></a></li><!--
         --><li><a href="#">MENUH - HTML</a><!--
             --><ul class="submenu">
                    <li><span class="border-bottom"><a href="#">Lien 1</a></span></li>
                    <li><span class="border-bottom"><a href="#">Lien 2</a></span></li>
                    <li><span class="border-bottom"><a href="#">Lien 3</a></span></li>
                    <li><span class="border-bottom"><a href="#">Lien 4</a></span></li>
                    <li><span class="border-bottom"><a href="#">Lien 5</a></span></li>
                    <li><span class="border-bottom"><a href="#">Lien 6</a></span></li>
                    <li><span class="border-bottom"><a href="#">Lien 7</a></span></li>
                    <li><span class="border-bottom"><a href="#">Lien 8</a></span></li>
                    <li><a href="#">Lien 9</a></li>
                    <li><a href="#">Lien 10</a></li>
                </ul>
            </li><!--
         --><li><a href="#">MENUH - HTML</a><!--
             --><ul class="submenu">
                    <li><a href="#">Lien 1</a></li>
                    <li><a href="#">Lien 2</a></li>
                </ul>
            </li><!--
         --><li><a href="#">MENUH - HTML</a>
                <ul class="submenu">
                    <li><span class="border-bottom"><a href="#">Lien 1</a></span></li>
                    <li><span class="border-bottom"><a href="#">Lien 2</a></span></li>
                    <li><a href="#">Lien 3</a></li>       
                </ul>
            </li><!--
         --><li><a href="#">MENUH - HTML</a>
                <ul class="submenu">
                    <li><span class="border-bottom"><a href="#">Lien 1</a></span></li>
                    <li><span class="border-bottom"><a href="#">Lien 2</a></span></li>
                    <li><a href="#">Lien 3</a></li>
                    <li><a href="#">Lien 4</a></li>           
                </ul>
            </li><!--
         --><li><a href="#">MENUH - HTML</a>
                <ul class="submenu">
                    <li><span class="border-bottom"><a href="#">Lien 1</a></span></li>
                    <li><span class="border-bottom"><a href="#">Lien 2</a></span></li>
                    <li><span class="border-bottom"><a href="#">Lien 3</a></span></li>
                    <li><span class="border-bottom"><a href="#">Lien 4</a></span></li>      
                    <li><span class="border-bottom"><a href="#">Lien 5</a></span></li>
                    <li><span class="border-bottom"><a href="#">Lien 6</a></li>
                    <li><span class="border-bottom"><a href="#">Lien 7</a></li>
                    <li><a href="#">Lien 8</a></li>
                    <li><a href="#">Lien 9</a></li>    
                </ul>
            </li><!--
         --><li><a href="#">MENUH - HTML</a>
                <ul class="submenu">
                    <li><span class="border-bottom"><a href="#">Lien 1</a></span></li>
                    <li><span class="border-bottom"><a href="#">Lien 2</a></span></li>
                    <li><a href="#">Lien 3</a></li>
                    <li><a href="#">Lien 4</a></li>           
                </ul>
            </li><!--
         --><li><a href="#">CONTACT</a>
                <ul class="submenu">
                    <li><a href="#">Lien 1</a></li>
                    <li><a href="#">Lien 2</a></li>         
                </ul>
            </li><!--
         --><li><div class="searchbar">
                    <form action="http://www.progress-formation.fr/" method="get" class="searchform">
                        <input type="text" class="searching" value="SEARCH..." name="s" />
                    </form>
                </div>
            </li><!-- 
        --></ul>
    </nav>

<div class="clear"></div>

...
</div>

settings.json

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