title: How to make menu bar fixed so it doesn't move when scrolling
body: <p>I have three issues:</p>
  
  <ol>
  <li><p>I want my menu links to 'bold' when I hover on them, but it makes the items to the right move over slightly when I do, how can I stop them from moving?</p></li>
  <li><p>The dropdown menu on "Two", how do I make it so the items appear directly lined up beneath "Two" , with appropriate spacing, and with an equal width background despite the two items not being the same amount of characters?</p></li>
  <li><p>What can I do to make the menu bar fixed so that when I scroll down, it remains visible at the top of the page? I tried add "position: fixed" but that just messes it all up.. </p></li>
  </ol>
  
  <p>Any help is greatly appreciated, Thanks!</p>
  
  <p>
  </p>
  
  <p></p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;Untitled&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="wrap"&gt;
      &lt;div id="menu"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Six&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Seven&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;&lt;/li&gt; 
                          &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Four&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Five&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="middle"&gt;&lt;/div&gt;     
      &lt;div id="footer"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>I couldn't figure out how to paste css in here without it getting all garbled up so here's a link to the stylesheet: <a href="https://dl.dropbox.com/u/14754850/stylesheet.css" rel="nofollow">https://dl.dropbox.com/u/14754850/stylesheet.css</a></p>