Hover/selected menu show background

Question

Мне нужен эффект зависания на фоне ul li.

Изображение:

HTML

<div id="topnav"> 
     <ul class="nav clearfix"> 
      <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-25"> 
      <a href="http://localhost/">Home</a> 
      </li> 
      <li id="menu-item-45" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-45"> 
       <a href="http://localhost/">Menu2</a> 
      </li> 
      <li id="menu-item-98" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-98"> 
       <a href="http://localhost/">Menu3</a> 
      </li> 
      <li id="menu-item-96" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-96"> 
       <a href="http://localhost/">Menu4</a> 
      </li> 
      <li id="menu-item-97" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-97"> 
       <a href="http://localhost/">Menu5</a> 
      </li> 
     </ul> 
    <div> 

CSS

#topnav { 
     font-size: 8pt; 
     font-weight: bold; 
     margin-top: 2%; 
     border: 1px solid #DDDDDD; 
     float: left; 
     font-size: 8pt; 
     margin-bottom: 0; 
     margin-left: 0; 
     margin-right: 0; 
     margin-top: 7% !important; 
     opacity: 0.8; 
     padding: 0; 
     width: 60%; 
    } 
    #topnav ul { 

     line-height: 1; 
     list-style: none outside none; 
     margin: 0; 
     padding: 0; 
     display: block; 
    } 
    #topnav ul li { 
     float: left; 
     width: auto; 
     margin:10px; 
    } 
    #topnav ul { 
     line-height: 1; 
     list-style: none outside none; 
    } 

Answer 1

Что-то вроде этого: jsfiddle.net/kaGvs/5? :)

Вы можете дать тегу «a» минус маржу и границу, которые должны отменить друг друга.

#topnav ul li a { 
    border-top: 15px solid transparent; 
    border-bottom : 15px solid transparent; 
    margin: -25px 0; 
    display:block; 
    line-height: 30px; 
} 

#topnav ul a:hover, #topnav ul ul a:hover { 
    color: #0A0A0A; 
    background-color: #CBBBA1; 
    border-color: white; 
} 

Answer 2

Насколько я знаю, с CSS3 вы не можете выбрать родительский элемент (I может быть неправильно). С JQuery довольно легко $("#topnav a:hover").parent() это выберет li, который содержит a: hover.

Надеюсь, я понял вопрос, и это поможет вам.

JQuery Пример окрашивания литиево белым цветом, вам придется изменить размер литиево так что этот эффект может быть виден:

$(function(){ 
$("#topnav a").mouseenter(function(){ 
     $("#topnav a:hover").parent().css("background-color","#FFFFFF"); 
    }).mouseleave(function(){ 
     $("#topnav a:hover").parent().css("background-color","#CBBBA1"); 
    }); 
}); 

DEMO

Answer 3

Попробуйте

#topnav ul li:hover{ 
    background:white; 
} 
#topnav ul li:hover a{ 
    background:#d8b038; 
} 

DEMO

Примечание:Изменить позиции в соответствии с вашим пользовательским интерфейсом. Я только что дал эффект наведения.