可悬停下拉菜单中的项目重叠问题

Question

我正在尝试制作一个可悬停的下拉菜单，并且下拉菜单中的各项重叠。我不知道CSS应该如何，但我尝试修改每个类，但仍然无法正常工作。

我也试图修改链接的显示，但这不起作用。这是我编写的代码：

<style>
#menu
{
   margin:0;
   font-size: 30px;
   border-bottom: 1px solid;
   text-align: center;
}

#menu a
{
   color:#900;
   text-decoration:none;
}

#menu .subitem a{
   display: block;
   padding: 12px 16px;
   z-index: 1;
  background-color: #f1f1f1;
  border-bottom: 1px solid;
}

#menu a:hover
{
   text-decoration:underline;
}

.item{
   position: relative;
   display: inline-block;
   border-right: 0.5px solid;
   padding-right: 30px;
   padding-left: 30px;
}

.subitem{
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  left: 0;
  z-index: 1;
}

#menu .item:hover .subitem{
    display: block;
}
</style>
<div id="navWrapper">
      <ul id="menu">
         <li class="item"><a href="#">Small Things</a>
            <ul class="submenu">
               <li class="subitem"><a href="#">Gnomes</a></li>
               <li class="subitem"><a href="#">Fairies</a></li>
               <li class="subitem"><a href="#">Elves</a></li>
               <li class="subitem"><a href="#">Leprechauns</a></li>
            </ul>
         </li>
         <li class="item"><a href="#">Big Things</a>
            <ul class="submenu">
               <li class="subitem"><a href="#">Loch Ness Monster</a></li>
               <li class="subitem"><a href="#">Ogres</a></li>
               <li class="subitem"><a href="#">Giants</a></li>
               <li class="subitem"><a href="#">Dragons</a></li>
            </ul>
         </li>

      </ul>
  </div>

当我像这样鼠标悬停时，我想正确显示每个项目 image。

Answer 1

您将{"Success":false,"ExceptionMessage":"Please check your login details and try again. If you have forgotten your password use the link provided.","IsAdmin":false} 与.submenu混淆了：

.subitem

#menu
{
   margin:0;
   font-size: 30px;
   border-bottom: 1px solid;
   text-align: center;
}

#menu a
{
   color:#900;
   text-decoration:none;
}

#menu .subitem a{
  display: block;
  padding: 12px 16px;
  z-index: 1;
  background-color: #f1f1f1;
  border-bottom: 1px solid;
}

#menu a:hover
{
   text-decoration:underline;
}

.item{
   position: relative;
   display: inline-block;
   border-right: 0.5px solid;
   padding-right: 30px;
   padding-left: 30px;
}

.subitem {
  /* display: none; <- get rid of that */
  /* position: absolute; <- get rid of that, otherwise all your subitems will be in the top left corner */
  background-color: #f1f1f1;
  min-width: 160px;
  left: 0;
  z-index: 1;
}

.submenu {
  position: absolute; /* <- put it here */
  display: none; /* <- put it here */
  list-style-type: none;
  left:-40px;
  top: 30px;
}

#menu .item:hover .submenu {
  display: block;
}