下拉菜单CSS或jQuery

Question

我使用过jQuery，但到目前为止我所取得的成就是在第一张图片中。

我的问题

• 子菜单不采用全宽（白色在第一张图片中），就像我想在第三张图片中实现的那样。
• 也许结构已经错了。
• 子菜单中的contents与menu item
对齐

以下是结构：

<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>

第一张图片：遗憾的是，这是我迄今取得的成就。我不认为sub-menu与Menu Item对齐，我希望它与第三张图片一样。

第二张图片：我的菜单悬停在Menu Items.

之前

第三张图片：将鼠标悬停在Menu Item，然后会出现sky-blue框之类的子菜单。 Menu Items是指向页面的链接，这就是我只需将鼠标悬停在页面上的原因。

提前感谢您的帮助。

Answer 1

您可以使用css执行以下操作：

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

Answer 2

尝试这种风格，您将实现所需。

<style type="text/css">
ul.awesome-menu{
    background-color: #61f9cc;
    position: absolute;
    padding: 5px;
    display: none;
    width:100%;
}
li.menu-item:hover ul.awesome-menu{
    display: block;
}
.awesome-menu li{
    display: inline-block;
    margin: 0px 10px;
    background-color: #2a8cd8;
}