title: CSS drop down menu does not stay open on hover
body: <p>I am trying to make a make a drop down menu with css, but the drop down does not keep open when I hover it. I have used days on this now searching for what is blocking it to keep open so I can access the submenu item. Can anyone help please?</p>
  
  <p>A million thanks to the one who can find a solution to this endless problem.</p>
  
  <p>Here is the html and css I am working on:</p>
  
  <pre><code>&lt;nav id="topmenu" role="navigation"&gt;&lt;div id="nav" class="menu-container"&gt;
  &lt;ul id="menu-main"&gt;
  &lt;li id="menu-item-1" class="current-menu-item menu-item-1"&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-2" class="menu-item-2"&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-3" class="menu-item-3"&gt;&lt;a href="#"&gt;About us&lt;/a&gt;
  &lt;ul class="sub-menu"&gt;
      &lt;li id="menu-item-4" class="menu-item-4"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;&lt;/div&gt;&lt;/nav&gt;
  
  
  
  #topmenu {
      padding: 5px 0 0 0; 
      height: 65px;
  }
  #topmenu ul {
      margin:0 10px;
  }
  #topmenu ul li { 
      float: left; 
      position: relative; 
      font-family: 'Lato',sans-serif; 
      font-size: 13px; 
      font-weight: 400; 
      letter-spacing: 1px;
      text-transform: uppercase; 
      margin: 0 30px 0 0; 
      color: #333; 
  }
  #topmenu ul li { 
      font-family: 'Lato',sans-serif; 
      font-size: 13px; 
      font-weight: 400; 
      letter-spacing: 1px;
      text-transform: uppercase; 
      margin: 0; 
      color: #333; 
  }
  #topmenu ul ul { 
      display: none; 
      float: left; 
      position: absolute; 
      top: 2em; 
      left: -5px; 
      z-index: 99999; 
      padding: 5px 0 0 5px; 
      margin: 14px 0 0 0; 
      background: #fff; 
      border: 1px dashed #c1c1c1; 
      border-top: none; 
  }
  
  #topmenu ul ul li{
      position:relative;
      text-indent:0;
  }
  
  #topmenu ul ul ul { 
      left: 100%; 
      top: -20px; 
      border: 1px dashed #c1c1c1;
  }
  #topmenu ul ul li, 
  #topmenu ul ul ul li { 
      min-width: 130px; 
      margin: 0; 
      padding: 0; 
      border: none; 
      background: #fff; 
  display: block;
  float: none;
  position: relative;
  min-width: 150px;
  clear: both;
  }
  #topmenu &gt;li ul&gt;li
  {
     list-style:none;
     text-indent:0;
     position:relative;
  } 
  #topmenu ul ul a { 
      line-height: 1.5em; 
      padding: .5em .5em .5em 1em;
      width: 10em; 
      height: auto;
  }
  #topmenu ul ul a:hover,
  #topmenu ul ul:hover  { 
      display: inline-block;
  }
  #topmenu ul ul a:after { 
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -6px;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  }
  #topmenu ul li a { 
      text-decoration: none; 
      color: #fff; 
      display: block; 
      height: 30px; 
      line-height: 3.1em;
  }
  #topmenu ul li:hover &gt; ul { 
      display: block;
  }
  #topmenu ul ul a:hover { 
      color: #fff;
  }
  #topmenu ul li:hover &gt; a, 
  #topmenu ul ul :hover &gt; a {
      border-bottom: 1px solid #fff;
  }
  #topmenu li ul { 
      position: absolute;  
      display: none; 
  } 
  #topmenu li:hover ul { 
      display: block; 
  } 
  #topmenu li ul li { 
      float: none; 
      display: inline; 
  }
  #topmenu ul li li a,
  #topmenu ul li li li a {
    color:#444444;
    line-height:1.9em;
  }
  #topmenu ul li li a:hover,
  #topmenu ul li li li a:hover {
    color:#444444;
    text-decoration:underline;
  }
  #topmenu ul ul:after  { 
      display: table;
      clear: both;
  }
  .post-in-category #topmenu ul li.current-menu-item a,
  #topmenu ul li.current-menu-item a,
  #topmenu ul li.current_page_item a { 
      border-bottom: 1px solid #fff;
  }
  #topmenu select { 
      display: none;
  }
  #topmenu div { 
      background-color: #0B3DB0;
      height:38px;
      width:100%;
  }
  </code></pre>