The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

/* Layout */

	.menu, 
	.menu ul { padding: 0; list-style-type: none; }

	.menu > li {
		float: left;
		position: relative;
	}
	
	.menu .sitepoint-network { float: right; }

	.menu > li > ul {
		position: absolute;
		top: auto;	
		left: -9999%;
	}

	.menu > li:hover > ul { left: auto; }
    .menu > li.sitepoint-network:hover > ul { right: 0; }
    
	.menu a { 
		display: block;
		padding: 0.75em 1.5em;;
		white-space: nowrap;
	}

	/* Float containment rules applyied to the root UL */

		.menu:before, /* For modern browsers */
		.menu:after {
			content: '';
 			display: table;
		}

		.menu:after {
			clear: both;
		}

		.menu { display: inline-block; } /* For IE6/7 */
		.menu { display: block; } /* For IE6/7 */

	/* End of Float containment */
	
/* End of Layout */

/* Theme */
	.menu {				
		-webkit-border-radius: 3px;
				border-radius: 3px;				
		
		font-size: 0.8em;
	}
	
	.menu,
	.menu ul {
		border-width: 1px;		
		border-style: solid;
		border-color: #ddd;
		
		background-color: #e8e8e8;
	}
	
	.menu ul {
		-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
				box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 
	}
	
	.menu a { 
		font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; 
		font-weight: 600;
		
		color: #464646; 
		
		text-decoration: none;
		text-shadow: 1px 1px 1px #FFFFFF;
	}
	
	.menu a:hover {
		background-color: #E56500;
		
		color: #fff;
		
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
	}
	
	.menu ul a { font-weight: normal; }
	
	.menu .sitepoint-network > a,
	.menu .sitepoint-network ul a:before,
	*+html .menu .sitepoint-network ul a {		
		background-image: url(http://www.sitepoint.com/wp-content/plugins/sitepoint-network-widget/images/icons.png);
		background-repeat: no-repeat;
	}
	
	.menu .sitepoint-network > a {
		width: 37px;
		min-height: 35px;
		padding: 0;
		
		border-left-width: 1px;
		border-left-style: solid;
		border-left-color: #ddd;
		
		background-color: transparent;
		background-position: -32px -35px;
		
		text-indent: -9999%;
	}
	
	.menu .sitepoint-network > a:hover { background-color: #DEDEDE; }
	
	.menu .sitepoint-network ul a:before {
		content: " ";
		display: inline-block;
		width: 37px;
		height: 35px;
		padding: 0;

		vertical-align: middle;
	}

	*+html .menu .sitepoint-network ul a {
		padding-left: 40px;
	}


/* End of Theme*/

dabblet.html

<div>
  <ul class="menu">
    <li><a href="http://www.sitepoint.com" >Home</a></li>
    <li><a href="http://www.sitepoint.com/forums/">Forums</a>
      <ul>
        <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?240-Web-Content" >Web Content</a></li>
        <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?40-Design-Your-Site" >Design Your Site</a></li>
        <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?4-Program-Your-Site" >Program Your Site</a></li>
        <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?95-Host-Your-Site" >Host Your Site</a></li>
        <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?45-Manage-Your-Site" >Manage Your Site</a></li>
        <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?47-Community-Center" >Community Center</a></li>
      </ul>
    </li>
    <li><a style="cursor:default;">Resources</a>
      <ul>
        <li><a href="http://www.sitepoint.com/newsletter/#subscription-info" >Newsletters</a></li>
        <li><a href="http://www.sitepoint.com/category/podcast/" >Podcast</a></li>
        <li><a href="http://reference.sitepoint.com/css" >CSS Reference</a></li>
        <li><a href="http://reference.sitepoint.com/html" >HTML Reference</a></li>
        <li><a href="http://reference.sitepoint.com/javascript" >Javascript Reference</a></li>
        <li><a href="http://www.sitepoint.com/tools/" >Tools</a></li>
        <li><a href="http://www.sitepoint.com/tag/html5-dev-center/" >HTML5 Dev Center</a></li>
        <li><a href="http://www.sitepoint.com/web-hosting-reviews/" >Hosting Reviews</a></li>
      </ul>
    </li>
    <li><a href="http://dealfuel.com/?utm_source=sitepoint&utm_medium=menu&utm_campaign=sitepoint" target="_blank">Deals</a></li>
    <li><a href="http://products.sitepoint.com/" >Bookstore</a>
      <ul>
        <li><a href="http://www.sitepoint.com/books-matrix/" >Find the right book</a></li>
        <li><a href="http://products.sitepoint.com/" >New Releases</a></li>
        <li><a href="http://products.sitepoint.com/development" >Web Development Books</a></li>
        <li><a href="http://products.sitepoint.com/design" >Web Design Books</a></li>
        <li><a href="http://products.sitepoint.com/business" >Business & Marketing Books</a></li>
        <li><a href="http://www.sitepoint.com/for-educators/" >Books for Educators</a></li>
        <li><a href="http://www.sitepoint.com/frequently-asked-questions/" >Frequently Asked Questions</a></li>
        <li><a href="http://sitepoint.com/shipping/" >Shipping Rates & Times</a></li>
      </ul>
    </li>
    <li><a href="http://www.sitepointmarket.com" >Market</a></li>
    <li><a href="https://learnable.com/sitepoint" >Courses</a></li>
    <li class="sitepoint-network"><a href="http://www.sitepoint.com" >Sitepoint Network</a>
      <ul>
        <li><a href="http://jspro.com/" >JSPro</a></li>
        <li><a href="http://buildmobile.com" >BuildMobile</a></li>
        <li><a href="http://designfestival.com" >DesignFestival</a></li>
        <li><a href="http://rubysource.com" >RubySource</a></li>
        <li><a href="http://cloudspring.com" >CloudSpring</a></li>
        <li><a href="http://phpmaster.com" >PHPMaster</a></li>
        <li><a href="http://learnable.com/" >Learnable</a></li>
        <li><a href="http://www.sitepointmarket.com" >SitePoint Market</a></li>
      </ul>
    </li>
  </ul>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}