title: Navigation Menu - Border Radius & Drop-Down Menu Issues
body: <p>This is my first attempt at creating a drop-down menu so please excuse any poor coding. </p>
  
  <p>I would like a 10px border radius which appears to have only worked on the right-hand side of the navigation menu. The radius has not been applied to the left-hand side. What would I need to do to correct this?</p>
  
  <p>The drop-down menu does not work properly either. There is whitespace below be menu. This does not allow for the mouse to hover over the sub-menu links. It would appear that this problem is caused by the top margin for nav ul. I would like space between the top of the page. </p>
  
  <p>Thanks in advance. </p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;title&gt;Simple Drop Down Menu&lt;/title&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;link rel="stylesheet" href="style2.css"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
      &lt;div class="wrapper"&gt;
  
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Web Design&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;HTML&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;JavaScript&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Content Management&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Joomla&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Drupal&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;WordPress&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Concrete 5&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;General Enquiries&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Ask me a Question&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  
      &lt;div class="main"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  
  header, div, footer, aside, nav, article, figure, figcaption {
      display: block;}
  body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td {  
      margin: 0; padding: 0; border: 0; outline: none;} 
  .wrapper{
      width: 960px; 
      margin: 0px auto;}
  nav{
      height: 38px; 
      font-family: Verdana;
      background-color: #196CE8;
      border-radius: 10px;}
  nav ul {
      padding: 0px; 
      margin: 0px; 
      list-style: none; 
      margin-top: 20px} 
  nav li {
      float: left;
      border-right: 1px solid #ffffff;
      }
  nav li ul {
      display: none;} 
  nav li a { 
      display: block; 
      background: #196CE8; 
      padding: 8px 15px;
      text-decoration: none; 
      color: white;} 
  nav li a:hover {
      background: #1F3D99;}   
  li:hover ul {
      display: block; 
      position: absolute;} 
  li:hover li {
      float: none;} 
  li:hover a {
      background: #196CE8;} 
  li:hover li a:hover {
      background: #1F3D99;} 
  .main{
      clear: both;}
  p{
      padding-top: 30px;}
  </code></pre>