css hovering a menu item at wordpress theme

1 Views

I got a problem with my wordpress theme:

I generated a toplevelmenu using “wp_list_pages(‘title_li=’)” on my website and styled it with css:

Read More
.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;  
}

Output: A thicker bottom-border of the hovered menuitem. 

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

Question: The ‘a’ is located within the ‘li’ and the hovering only triggers if I hover the link-text. So how do I do switch the location of the ‘a’ with the location of the ‘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>

I want to make sure, that the link and the hover work within the complete ‘li’-container.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. At the moment you have 2 :hover‘s. Keep your a tag inside your li and remove the a:hover because that is only going to effect when your hover on the a.

    change your css to look like this:

    [with this change, the a hover effect will take place when you hover over the li

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

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