html - デリケートなドロップダウン メニュー

Question

Web サイトに簡単なドロップダウン メニューを作成しようとしています。私はそれを取得しようとしているので、[自己紹介] タブにカーソルを合わせると、そこに「連絡先」があるメニューがドロップダウンします。動作していますが、表示されるナビゲーションバーと同じ行にマウスを置いても問題があるため、ホームにカーソルを合わせると表示されます。私の周りにカーソルを合わせたときに表示されるようにしたいだけです。

ここに私のcssとhtmlがあります

#nav{
   width: 75%;
   height: 3%;
   font-size: 150%;
   font-weight: bold;
   border-radius: 8%;
   text-align: center;
   margin: 0 auto;
}

#nav ul {
   height: auto;
   padding: 0% 0%;
   margin: auto%;
   background-color: #f2f2f2;
   border-bottom: 5% solid #ccc; 
   display: inline-block;
   overflow: hidden;
}

#nav li { 
   display: inline-block;
   padding: 3%; 
   margin-left: auto;
   margin-right: auto;
}

#nav a {
   text-decoration: none;
   padding: 0% 0% 0% 0%;
}

#nav a:hover {
   color: #000000;
   background-color: white;
}

#aboutme:hover ul {
   display: block;
}

#nav li ul {
   display: none;
}

#nav li:hover ul{
   display: block;
}

    <ul id="nav">
       <li><a href="index.html">Home</a></li>
       <li><a href="aboutme.html">About Me</a>
          <ul>
             <li><a href="contact.html">Contact Me</a></li>
          </ul>
      </li>
      <li><a href="services.html">Services</a></li>
      <li><a href="Gallery.html">Gallery</a></li>
      <li><a href="kotorsale.html">For Sale</a></li>
      <li><a href="buildlog.html">Build Log</a></li>
   </ul>