0

サブメニューがあり、親リストにカーソルを合わせると、想定どおりにドロップダウンし、すべてがホバーカラーで機能しますが、親リストに戻ると、私がいるまでホバーカラーが表示されませんリストの一番上/実質的に外れた..これはパディングの問題ですか?

/* MENU */


 #gen_navigation {

float:right;
margin:0;
padding:0;


 }

#gen_navigation li a, #gen_navigation li {
float:left;
}

 #gen_navigation li {

list-style:none;
position:relative;

}

 #gen_navigation li a {
padding: 35px 20px 23px 20px;
text-decoration:none;
color:white;
border-right: 1px solid #3c3c3c;
border-left: 1px solid #333;
border-bottom: 1px solid #232323;
border-radius:3px;
}

 /* Sub-Menu */
 #gen_navigation li ul {
display:none;
position:absolute;
left:0;
top:100%;
margin:0;
padding:0;
background: #292929;
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
  background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%,   #3c3c3c), to(#292929)); 

}

  #gen_navigation li:hover ul {
display:block;

}
#gen_navigation li ul li, #gen_navigation li ul li a {
float:none;
}


#gen_navigation li ul li a {
 width: 180px;
 display: block;
}

そしてhtml

 <ul id="gen_navigation">
            <li class="selected"><a href="#"><span>Home</span></a></li>
            <li><a href="#"><span>About</span></a>
                <ul>
                    <li><a href="#">Gate 5 Energy Partners</a></li>
                    <li><a href="#">Leadership</a></li>
                    <li><a href="#">Key Consultants & Strategic Partners</a></li>
                </ul>
            </li>
            <li><a href="#"><span>Technology</span></a>
                <ul>
                    <li><a href="#">About SERT</a></li>
                    <li><a href="#">About the inventor</a></li>
                </ul>
            </li>
            <li><a href="#"><span>Applications</span></a>
                <ul>
                    <li><a href="#">Agri-Business</a></li>
                    <li><a href="#">WasteWater Industry</a></li>
                </ul>
            </li>
            <li><a href="#"><span>Benefits</span></a>
                <ul> 
                    <li><a href="#">Environmental Benefits</a></li>
                    <li><a href="#">Economic Benefits</a></li>
                </ul>
            </li>
            <li><a href="#"><span>Inquiries</span></a></li>
        </ul>
4

2 に答える 2

2

私はあなたのコードを機能させようとしていましたが、それを手に入れましたが、今ではジョホロがそれを整理していることがわかります。それにもかかわらず、私はあなたの修正を持っていると思います: jQuery の を使用してparents()、「選択した」クラスを top に再度追加します<li>。

この実例を確認してください

ちなみに、あなた.animateはうまくいかないと思うので、jQuery-UIのeffect. こちらもご覧ください。

よろしく！

于 2012-12-14T23:21:31.883 に答える
1

おそらくパディングの問題ではなく、javascript イベントハンドラーの問題のように見えます。

子の 1 つにカーソルを合わせていても、親は JavaScript でまだホバーしています。したがって、親に戻ったときにホバーは親に対して発火しません。

$('li').hover(function(){
    // 1. Parent gets onmouseover (hover) first time. Adds .selected on it's element.
    // 2. When mouse move from parent to child, removes .selected from parent, and adds to child.
    // 3. When back from child to parent, onmouseover (hover) on parent won't fire because it already (technically one of its children) already has onmouseover.
    $('li').removeClass('selected'); 
    $(this).addClass('selected').animate(bounce);        
});

それをうまく修正する方法は別の問題です:-)

于 2012-12-14T23:12:04.977 に答える