title: Refining the look of my dropdown menu (CSS)
body: <p>I'm trying to accomplish a few things and don't know where to start.
  1. I would like to make it so that the menu would stretch across the entire width of the page.
  2. I would like to refine the size of the subs to equal the width of the main option.
  3. If I made it into a nav and changed the routing, would it be able to operate as DDM?</p>
  
  <p>jsfiddle of the code in question: <a href="http://jsfiddle.net/Ph2Wb/" rel="nofollow">http://jsfiddle.net/Ph2Wb/</a></p>
  
  <p>jsfiddle of the page I want to incorporate it into: <a href="http://jsfiddle.net/dQ3ey/" rel="nofollow">http://jsfiddle.net/dQ3ey/</a></p>
  
  <hr>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;ul id="menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Final&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Midterm&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Homework Assignments&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;CS/IS 101&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Puzzles&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Chapters 1-3&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Chapters 4-6&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Chapters 7-9&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Chapters 10-12&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Word&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Excel&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Access&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;PowerPoint&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;CS/IS 260&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Ch. 1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Ch. 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Ch. 3&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Ch. 4&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Ch. 5&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Class Assignments&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;CS/IS 101&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Puzzles&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Word&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Excel&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;CS/IS 260&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Puzzles&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Word&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Excel&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Favorite Sites&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About Me&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <h2>            </h2>
  
  <h2>CSS</h2>
  
  <pre><code>#menu, #menu ul{
   margin:0;
   padding:0;
   list-style-type:none;
   list-style-position:outside;
   position:relative;
   line-height:2.5em;
  }
  
  #menu a:link, #menu a:active, #menu a:visited{
  display:block;
  padding:0px 5px;
  border:1px solid #333;
  color:#fff;
  text-decoration:none;
  background-color:#333;
  }
  
  #menu a:hover{
  background-color:#fff;
  color:#333;
  }
  
  #menu li{
  float:left;
  position:relative;
  }
  
  #menu ul {
  position:absolute;
  width:12em;
  top:2.5em;
  display:none;
  }
  
  #menu li ul a{
  width:12em;
  float:left;
  }
  
  #menu ul ul{
  top:auto;
  }
  
  #menu li ul ul {
  left:12em;
  margin:0px 0 0 10px;
  }
  
  #menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
  display:none;
  }
  
  #menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{
  display:block;
  }
  </code></pre>