position: relative;

dabblet.css

ul
{
	padding: 0;
	margin: 0;
	list-style: none;
}

header
{
	border: 1px solid red;
}

header > div
{
	border: 1px solid blue;
}

#block-block-1 
{
  display: none;
}

#header 
{
  position: relative;
  display: block;
  overflow: visible;
  height: 87px;
  color: black;
}

#logo 
{
 position: absolute;
   display: block;
  width: 200px;
  vertical-align: middle;
}
#navigation 
{
/*  position: relative; */
  z-index: 200;
  display: block;
  overflow: hidden;
  margin-left: 200px; 
  width: 400px;
}

#block-system-user-menu 
{
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 200px;
  vertical-align: middle;
}


#block-menu-menu-create-content
{
	position: absolute;
	top: 50px;
	right: 10px;
}


#header #block-menu-menu-create-content ul.menu li.expanded > a 
{
  display: block;
}

#block-menu-menu-create-content ul.menu li ul.menu 
{
  display: block;
}

dabblet.html

<header id="header" role="banner"> <a href="/" title="Home" rel="home" id="logo"><img src="http://localhost:8888/sites/all/themes/intstrux-spsopenbook/images/openbook_logo.png" alt="Home"></a>

  <div  id="navigation">
  
    <div class="region region-navigation">
      <div id="block-system-main-menu" class="block block-system block-menu first odd"
      role="navigation">
         <h2 class="block-title">Main menu</h2>
        <ul class="menu">
          <li class="first leaf active-trail"><a href="/dashboard" title="" class="active-trail active">dashboard</a>
          </li>
          <li class="leaf"><a href="/search/explore" title="">Explore</a>
          </li>
          <li class="leaf"><a href="/bookmarks" title="">Bookmarks</a>
          </li>
          <li class="leaf"><a href="/my-content" title="">My Content</a>
          </li>
          <li class="last leaf"><a href="/members" title="">Members</a>
          </li>
        </ul>
      </div>
      
      <!-- /.block -->
      <div id="block-search-form" class="block block-search last even" role="search">
        <form action="/" method="post" id="search-block-form" accept-charset="UTF-8">
          <div>
            <div class="container-inline">
               <h2 class="element-invisible">Search form</h2>

              <div class="form-item form-type-textfield form-item-search-block-form">
                <label class="element-invisible" for="edit-search-block-form--2">Search</label>
                <input title="Enter the terms you wish to search for." type="text"
                id="edit-search-block-form--2" name="search_block_form" value="" size="15"
                maxlength="128" class="form-text generated">
              </div>
              <div class="form-actions form-wrapper" id="edit-actions">
                <input type="submit" id="edit-submit" name="op" value="Search" class="form-submit">
              </div>
              <input type="hidden" name="form_build_id" value="form-oF9XEpqhn-5n3YXlcJUsryQbXLbLgBMDJx8Z63ZZwFM">
              <input type="hidden" name="form_token" value="8sWBFuK-2rYpFHmvxnlUmpm60XtczIlCxPZ-Pim9Ko0">
              <input type="hidden" name="form_id" value="search_block_form">
            </div>
          </div>
        </form>
      </div>
      <!-- /.block -->
    </div>
    <!-- /.region -->
    </div>
    
    <!-- /#navigation -->
    <div class="region region-header">
      <div id="block-system-user-menu" class="block block-system block-menu first odd"
      role="navigation">
        <ul class="menu">
          <li class="first collapsed"><a href="/user">My account</a>
          </li>
          <li class="last leaf"><a href="/user/logout?current=dashboard">Log out</a>
          </li>
        </ul>
      </div>
      <!-- /.block -->
      
      <div id="block-block-1" class="block block-block even">
        <ul class="menuLinkContainer">
          <li class="menuWrap  search-link"><a href="#search" class="sprt-btn-mobile_search_normal">Search</a>
          </li>
          <li class="menuWrap  user-menu-link"><a href="#user-menu" class="sprt-btn-mobile_profile_normal">User Menu</a>
          </li>
          <li class="menuWrap  menu-link"><a href="#menu" class="sprt-btn-mobile_menu_normal">Menu</a>
          </li>
        </ul>
      </div>
      
      <!-- /.block -->
      <div id="block-menu-menu-create-content" class="block block-menu last odd"
      role="navigation">
        <ul class="menu">
          <li class="first last expanded">
          <a href="/node/add" title="">Create Content</a>
            <ul class="menu">
              <li class="first leaf"><a href="/node/add/audio" title="">Audio</a>
              </li>
              <li class="leaf"><a href="/node/add/document" title="">Document</a>
              </li>
              <li class="leaf"><a href="/node/add/image" title="">Image</a>
              </li>
              <li class="leaf"><a href="/node/add/link" title="">Link</a>
              </li>
              <li class="last leaf"><a href="/node/add/video" title="">Video</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- /.block -->
    </div>
    <!-- /.region -->
</header>

dabblet.js

// alert('Hello world!');

settings.json

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