title: How to build a yahoo styled navigation bar?
body: <p>Hi I am looking to build a navigation bar similar to yahoos, however I was unable to find an example. Some of the features I am looking for are a sticky navigation bar, that kind of looks like it pops out of it's place when the user scrolls.</p>
  
  <p>CSS</p>
  
  <pre><code>* { margin: 0; padding: 0; }
  html { overflow-y: scroll; }
  body { 
      font: 62.5% Arial, Helvetica, sans-serif;
      background: #FFFFFF;
  }
  
  ul { list-style: none inside; }
  p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
  a img { border: none; }
  
  .floatleft { float: left; }
  .floatright { float: right; }
  .clear { clear: both; }
  
  a { 
      text-decoration: none; 
      outline: none;
      color: #335588;
      }
      a:hover {
          text-decoration: underline;
      }
  
  
      #top-bar {
          background: #330000; 
          min-height: 60px;
          padding: 0 10px;
          font-size: 1.3em;
          font-weight: bold;
      }
  
      #right-side {
          float: right;
          padding-top: 15px;
          }
      #right-side img {
          border: 1px solid white;
          vertical-align: middle;
          }
      #right-side a {
          color: white;
          border-left: 1px solid white;
          height: 10px;
          padding-left: 10px;
          }
      #right-side a.first {
          border: none;
          padding: 0;
          }
  
      #left-side {
          float: left;
          padding-top: 15px;
          padding-left: 20px;
          color: white;
          font-size: 20px;
          }
  
  
      #sub-menu {
          background: white;
          min-height: 20px;
          padding: 5px 10px 0 10px;
          }
      #sub-menu ul {
          display: block;
          color: #000000;
          }
      #sub-menu ul li {
          height: 18px;
          padding: 5px 10px 0 5px;
          position: relative;
          float: left;
          margin-right: 10px;
          color: #000000;
          }
      #sub-menu ul li:hover {
          background: red;
          height: 10px;
          }
      #sub-menu ul li a {
          display: block;
          float: left;
          height: 23px;
          position: relative;
          top: -5px;
          right: -5px;
          padding-right: 3px;
          color: #000000;
          font-weight: bold;
          font-size: 1.1em;
          text-decoration: none;
          }
  
      #sub-menu ul li a span {
          position: relative;
          top: 6px;
          }
      #sub-menu ul li ul {
          display: none;
          position: absolute;
          top: 29px;
          left: 0px;
          width: 150px;
          border: 1px solid #ccc;
          background: white;
          padding: 10px 0 0 0;
          }
      #sub-menu ul li ul li {
          float: none;
          padding: 0; margin: 0;
          height: 100%;
          }
      #sub-menu ul li ul li:hover {
          background: none;
          }
      #sub-menu ul li ul li a {
          display: block;
          float: none;
          margin-left: -5px;
          padding: 5px 0 0 10px;
          width: 140px;
          }
      #sub-menu ul li ul li a:hover {
          background: #000000;
          }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="top-bar"&gt;
      &lt;img src="images/logo.png" alt="TEST" class="floatleft" /&gt;  
          &lt;div id="left-side"&gt;
              TEST
          &lt;/div&gt;
  
          &lt;div id="right-side"&gt;
              &lt;a href="#"&gt;Logout&lt;/a&gt;          
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="sub-menu"&gt;
          &lt;ul&gt;
                         &lt;li&gt;&lt;/li&gt;
                         &lt;li&gt;&lt;/li&gt;
                         &lt;li&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>here is an updated jsfiddle, i got the line to show up but it still wont be sticky jsfiddle.net/cc48t/1549 </p>