title: Fixed menu hovering CSS style needed
body: <p>When I am hovering on the part of the page where I created a fixed menu, it opens up, even that I am not hovering on the menu, but to the right of it.
  Additionally I can't access the inputs in that part of the page (between the two black lines in the picture)
  <img src="https://i.stack.imgur.com/lf5ti.png" alt="Hovering brings the menu up, even when not hovering on the menu"></p>
  
  <p>My code for the custom menu is:</p>
  
  <pre><code>CUSTOM NAVIGATION
  ================================================ */
  #custom-nav {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 99%;
    position: fixed;
    top:40%;
    left:10%;
    text-indent:15px;
    line-height:150%;
  }
      #custom-nav li {
      margin:0;
      padding:0;
  }
  
  /* custom level link */
  #custom-nav a {
      display: block;
      color:#9a7283;
      background-color:#eee;
      width:159px;
      text-align:left;
      padding:10px;
      margin:0;
      text-decoration:none;
      text-transform:lowercase;
      -webkit-transition: all 0.6s;
  }
  /* custom level link :hover */
  #custom-nav a:hover {
      background: #9a7283;
      color:#fff;
  }
  
  /* current link */
  #custom-nav .current_page_item a, #custom-nav .current-menu-item a {
      background: #9a7283;
      color:#fff;
  }
  
  /* current link :hover */
  #custom-nav .current_page_item a:hover, #custom-nav .current-menu-item a:hover {
      background: #9a7283;
      color:#fff;
  }
  
  /* sub-levels link */
  #custom-nav ul a, #custom-nav .current_page_item ul a, #custom-nav ul .current_page_item a, #custom-nav .current-menu-item ul a, #custom-nav ul .current-menu-item a, #custom-nav li:hover &gt; ul         a  {
      padding:10px;
      line-height:150%;
      margin:0;
      display:block;
  }
  /* sub-levels link :hover */
  #custom-nav ul a:hover, #custom-nav .current_page_item ul a:hover, #custom-nav ul .current_page_item a:hover, #custom-nav .current-menu-item ul a:hover, #custom-nav ul .current-menu-item a:hover, #custom-nav li:hover &gt; ul a:hover {
  }
  /* dropdown ul */
  #custom-nav ul {
      display:none;
      list-style:none;
      position:absolute;
      padding:10px;
      top:5px;
      left:146px;
  }
  #custom-nav ul li {
      padding:0;
      margin:0;
  }
  /* sub-levels dropdown */
  #custom-nav ul ul {
  }
  /* show dropdown ul */
  #custom-nav li:hover &gt; ul {
      display:block;
  }
  </code></pre>
  
  <p>What am I doing wrong?</p>