title: CSS Vertical dropdown menu, When Hover to other menu the submenu shows
body: <p>What is the proper or best way to do this? I can't fix it :3
  The submenu of members shows when you hover to the other menus
  What's the problem with my code? I can't figure it out :3
  you can see my codes in the link  </p>
  
  <p><code>http://codepen.io/anon/pen/MaxmvO</code></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Dashboard&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;header&gt;
          &lt;div class="logo"&gt;&lt;a href="#"&gt;WORKOUT &lt;span&gt;FITNESS CENTER&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/header&gt;
      &lt;div id="container"&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Walk-In&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Members&lt;/a&gt;&lt;/li&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;List of Members&lt;/a&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Subscr&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;asdasd&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sales&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Inventory&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Suppliers&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Reports&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  
          &lt;div id="content"&gt;
              SOME CONTENT YAY
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code> @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300italic,300);
  *{
      margin: 0;
      padding: 0;
  }
  
  body {
      font-family: 'Open Sans';
  }
  
  a{
      text-decoration: none;
  }
  
  header{
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #858585;
  }
  
  .logo {
      float: left;
      margin-top: 9px;
      margin-left: 15px;  
  }
  
  .logo a{
      font-size: 1.3em;
      color: #070807;
  
  }
  .logo a span{
      font-weight: 300;
      color: #1AC93A;
  }
  
  nav{
      width: 250px;
      height: calc(100% - 50px);
      background-color: #171717;
      float: left;
  }
  
  #content {
      width: :auto;
      margin-left: 250px;
      height: calc(100% - 50px);
      padding: 15px
  }
  
  nav li{
      list-style: none;
  
  }
  
  nav li a{
      color: #ccc;
      display: block;
      padding: 10px;
      font-size: 0.8em;
      border-bottom: 1px solid #0a0a0a;
      -webkit-transition: 0.2s;
      -moz-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
  }
  
  nav li a:hover{
      background-color: #030303;
      color: #fff;
      padding-left: 80px;
  }
  
  nav ul ul {
      display: none;
  }
  
  nav ul:hover ul{
      display: block;
  }
  </code></pre>