jquery - 下拉菜单 CSS 或 jQuery

Question

我已经使用了 jQuery，但到目前为止我所取得的成就如第一张图片所示。

我的问题

• 子菜单没有像我想在第三张图片中实现的那样采用全宽度(第一张图片中为白色)。
• 也许结构已经错误。
• 子菜单中的内容与菜单项对齐

结构如下:

<ul>
   <li class="menu-item">
      <a class="pages-menu" href="<?php echo get_option('home')?>" title="Home">Home</a>
      <ul class="sub-menu">
         <li><a href="#">Child 1</a></li>
         <li><a href="#">Child 2</a></li>
     </ul>
   </li> 

   <li>
      <a class="pages-menu" href="<?php echo get_page_link( 22 ); ?>" title="Islands Banca Cruises">Banca</a>
      <ul class="sub-menu" >
          <li><a href="#">Child 1</a></li>
          <li><a href="#">Child 2</a></li>
      </ul>
   </li>     

  <li>
      <a class="pages-menu" href="<?php echo get_page_link( 20 ); ?>" title="Islands Stay Hotels">Hotel</a>
      <ul class="sub-menu" >
          <li><a href="#">Child 1</a></li>
          <li><a href="#">Child 2</a></li>
       </ul>
  </li>

  <li>
      <a class="pages-menu" href="<?php echo get_page_link( 67 ); ?>" title="Islands Pasalubong">Pasalubong</a>
       <ul class="sub-menu" >
          <li><a href="#">Child 1</a></li>
          <li><a href="#">Child 2</a></li>
       </ul>
   </li>    

   <li>
       <a class="pages-menu" href="<?php echo get_page_link( 18 ); ?>" title="Islands Souvenirs">Souvenirs</a>
       <ul class="sub-menu" >
           <li><a href="#">Child 1</a></li>
           <li><a href="#">Child 2</a></li>
       </ul>
   </li>   
</ul>

第一张图片:可悲的是，这就是我迄今为止所取得的成就。我不喜欢子菜单与菜单项对齐，我希望它像第三张图片一样。

第二张图片:将鼠标悬停在菜单项上之前的我的菜单。

第三张图片:将鼠标悬停在菜单项中，然后会出现一个子菜单，例如天蓝色框。 菜单项是指向页面的链接，这就是为什么我只需将鼠标悬停在它们上即可。

预先感谢您的帮助。

Answer 1

您可以使用 css 来完成此操作，例如:

ul {position:relative} //your main menu ul
.sub-menu {position: absolute;left: 0;top:/*Depends on your menu*/;width: 100%;}