title: html5 horizontal submenu alignment
body: <p>I have a question about how to align the horizontal submenu correctly on the webpage. I got up to the point where I have a header with a logo on the left and menu on the right. I got my submenu to show up shen I hover over the main menu. However, I have trouble getting the submenu to align right side of the page and it continues to go off the page. 
  So I know that I have to touch on "header nav li:hover ul" and I changed to relative and temporary solved the problem of going off the page. But it had only created another problem of having main menu moving off its initial position.
  Can anyone help me with this css and tell me how to fix this problem?</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;style&gt;
  a {text-decoration:none;color:#000;}
  
  /* header */
  header {width:980px;height:100px;margin:0 auto;margin-top:20px;background-color:Ff5f5f5;border-style:solid;}
  header #logo {margin-left:10px;float:left;font-size:36px;}
  
  /* menu */
  header nav {margin:0;padding:0;float:right;margin-top:40px;display:block;}
  header nav ul {list-style:none;}
  header nav li {float:left;padding:0 8px;display:inline-block;}
  header nav li a {display:inline-block;text-decoration:none;font-weight:700;}
  header nav li a:hover {color:#09F;}
  header nav li ul{display:none;}
  
  /* submenu */
  header nav li:hover ul{display:block;position:absolute;}
  header nav li:hover ul li {display:inline-block;float:left}
  header nav li:hover ul li a{font-weight:400;}
  header nav li ul li a{width:auto;}
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;header&gt;
  &lt;div id="logo"&gt;
  &lt;p&gt;LOGO&lt;/p&gt;
  &lt;/div&gt; &lt;!-- end logo --&gt;
  &lt;nav&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;SubMenu 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;SubMenu 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;SubMenu 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;SubMenu 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;SubMenu 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;SubMenu 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;SubMenu 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;SubMenu 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu 4&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;SubMenu 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;SubMenu 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;SubMenu 3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;SubMenu 4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;SubMenu 5&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt; &lt;!-- end main ul --&gt;
  &lt;/nav&gt; &lt;!-- end nav --&gt;
  &lt;/header&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>