HTML5和CSS3樹形菜單有很好的懸停效果

Question

我想實現一個樹形菜單，如下面的鏈接使用HTML5和CSS3或jQuery菜單或以某種方式使用普通的HTML，CSS和JavaScript。

http://www.crystal.ch/abb/power_systems_landscape/

您可能會注意到，參與有以下幾個問題，

1. 尼斯懸停效果（我很喜歡這個）
2. 旋轉菜單項箭頭圖標

同樣在這裏，你看到順利滑動，這對我來說不是問題。

任何想法或引用將不勝感激。感謝

Answer 1

要啓動，我們需要的HTML

<p class="menu_head">first</p> 

    <div class="menu_body"> 
     <a href="">1</a> 
      <a href="">2</a> 
      <a href="">3</a> 
      <a href="">4</a> 
    </div> 

    <p class="menu_head1">Second</p> 

    <div class="menu_body"> 
     <a href="">1</a> 

    </div> 

的Jquery的效果

$("#firstpane p.menu_head").click(function() 
{ 
    $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); 

}); 
$("#firstpane p.menu_head1").click(function() 
{ 
    $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); 

}); 
    $("#firstpane p.menu_head").mouseover(function() 
    { 
    $(this).css("text-indent","35px"); 
    $(this).css("backgroundImage","url(images/trans.png)").fadeTo("slow",0.33); 

}); 

$("#firstpane p.menu_head").mouseout(function() 
{ 
    $(this).css("text-indent","10px"); 
    $(this).css("backgroundImage","url(images/headbot1.png)").fadeTo("slow", 1);  
}); 

我加入了鼠標懸停及移出你的玻璃效果。只需創建一個白色或任何顏色的背景或只需擦除.css就可以這樣做。

$(this).fadeTo("slow",0.33); 

CSS

.menu_head { 
    font-family: arial;font-weight: bold; 
    font-size:10px; 
    color: black; 
    left:3%; 
    height:7px; 
    text-indent:10px; 
    padding: 10px 10px; 
    cursor: pointer; 
    position: relative; 
    margin:1px; 
    font-weight:bold; 
    vertical-align: middle; 
} 
.menu_head1 { 
    font-family: arial;font-weight: bold; 
    font-size:10px; 
    color: black; 
    left:3%; 
    height:7px; 
    text-indent:10px; 
    padding: 10px 10px; 
    cursor: pointer; 
    position: relative; 
    margin:1px; 
    font-weight:bold; 
    vertical-align: middle; 
} 
.menu_body { 
    display:none; 
} 
.menu_body a{ 
    font-family: arial;font-weight: bold; 
    left:3%; 
    width: 220px; 
    height:7px; 
    text-indent:10px; 
    position:relative; 
    padding: 10px 15px; 
    display:block; 
    color:#006699; 
    padding-left:10px; 
    font-weight:bold; 
    font-size:10px; 
    text-decoration:none; 
    vertical-align: middle; 
}​ 

見Example

嘗試它是爲了適應我的網站編輯CSS。 Gudluck