css将菜单项悬停在wordpress主题上

我的wordpress主题有问题：

我在我的网站上使用wp_list_pages'title_li='生成了一个toplevelmenu，并使用css对其进行了样式化：

.menucontainer li {
    float:left;
    font-family:arial;
    font-size:16px;
    text-align:center;
    font-weight:bold;
    list-style:none;
    margin:0px;
    margin-top:-3px;
    padding:12px;
    background: #ffffff;
    border-top: 3px solid #0a0a46;
    border-bottom: 3px solid #0a0a46;
}

.menucontainer li:hover {
   border-bottom: 5px solid #6464A0;
   height:18px;
}

.menucontainer li a {
    color:#2d2d2d;
    text-decoration:none;
}

.menucontainer li a:hover {
    color: #50508C;  
}

输出：悬停菜单项的较厚底部边框

<div id="menuwrapper">
    <div class='menucontainer'>
        <li class="page_item page-item-1 current_page_item">
             <a href="http://xxx.de/?page_id=6">
                    menuitem one
             </a>
         </li>
    </div>    
</div> 

问题：“a”位于“li”中，仅当我将链接文本悬停时才会触发悬停。那么如何将“a”的位置与“li”的位置进行切换呢

<div id="menuwrapper">
    <div class='menucontainer'>
        <a href="http://xxx.de/?page_id=6">
             <li class="page_item page-item-1 current_page_item">
                    menuitem one
             </li>
         </a>
    </div>    
</div> 

我想确保链接和悬停在完整的“li”容器中工作。

目前您有2:hover。将a标记保留在li中，并移除a:悬停，因为这只会在将鼠标悬停在a上时生效

将css更改为如下所示：

[通过此更改，当您将鼠标悬停在li上时，将产生悬停效果

.menucontainer li:hover {
   border-bottom: 5px solid #6464A0;
   height:18px;
}

.menucontainer li:hover a {
  /* what you want to do with the a */
}