下拉菜單效果

-5

我正在使用site。如您所見，有一個名爲「數字營銷」的菜單項。該項目有一個名爲Digital Marketing Consultancy的子菜單。我希望子菜單像其他任何網站一樣具有下拉效果，就像當我們將菜單項懸停在子菜單下拉菜單項時一樣。例如：像菜單here。下拉菜單效果

我試圖給

.sub-menu{display:none;} 
.sub-menu:hover{display:block;}

這裏是fiddle我。怎麼可以把它像其他sites.Please help.Thanks菜單效果！ updated fiddle

來源

2014-11-03 Melvin

真是好文章在這裏 - > http://www.wikihow.com/Create-a-Dropdown-Menu-in-HTML-and-CSS – MarsOne 2014-11-03 09:56:48

你真的不需要任何JavaScript/jQuery來實現希望你想在這裏。網上有很多教程和指南來製作下拉菜單。這[將]（http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu）可能幫助你！ – maverick 2014-11-03 09:56:49

@Rubinen謝謝:) – Melvin 2014-11-04 04:29:04

純css解決方案是CSS（3）轉換。

http://jsfiddle.net/9gjbfvwy/

使用的寬度和高度0，與溢出隱藏。使用CSS3轉換將它們設置爲自動。

見小提琴（這是你的代碼，用3個增補）

ul.sub-menu{height:0;width:0;overflow:hidden;} 
.menu-item:hover ul.sub-menu{background:orange;width:200px;height:50px;} 
ul.sub-menu { 
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
}

來源

2014-11-03 09:58:27 d1m5n

這工作，但當我添加一個子菜單的另一個子菜單項它再次出錯了......這裏是更新的小提琴http://jsfiddle.net/wyy7e61o/4/ – Melvin 2014-11-03 10:16:52

.menu-item：hover> ul.sub-menu剛剛添加到css中，那樣，你只會動畫ul，這是菜單項的直接子元素，而不是孩子的孩子等。不要使用固定高度，然後像在我的例子50px，但只是自動高度 – d1m5n 2014-11-05 20:33:31

http://jsfiddle.net/bkau4Lz0/是工作子子菜單的例子，唯一的事情是，你需要想想你想要什麼菜單，然後只玩高度，寬度，位置相對/絕對等 – d1m5n 2014-11-05 20:36:17

-1

.sub-menu是你的子，所以你需要激發你的主菜單項目您懸停，而不是在你的子菜單項。

添加到您的CSS：

ul#menu-main li ul.sub-menu{ 
    display:none; 
} 

ul#menu-main li:hover ul.sub-menu{ 
    display:block; 
}

工作的jsfiddle：http://jsfiddle.net/wyy7e61o/1/

來源

2014-11-03 09:58:34 vaso123

這工作，但當我添加一個子菜單另一個子菜單項它再次出錯了......這裏是更新的小提琴jsfiddle.net/wyy7e61o/4 – Melvin 2014-11-03 10:19:15

它沒有動畫，像問 – d1m5n 2014-11-05 20:37:41

-2

你應該首先隱藏所有的子菜單，並徘徊在父菜單時，顯示它們。像

.sub-menu { 
    display: none; 
} 
.menu-item:hover > ul.sub-menu { 
    display: block; 
}

檢查更新小提琴這裏 http://jsfiddle.net/wyy7e61o/6/

來源

2014-11-03 10:00:38

你的jsfiddle鏈接到原來的jsfiddle，請修復它。 – vaso123 2014-11-03 10:01:56

更新小提琴鏈接！ – 2014-11-03 10:04:01

他的工作，但是當我添加另一個子菜單項與子菜單它再次出錯了......這裏是更新的小提琴jsfiddle.net/wyy7e61o/4 – Melvin 2014-11-03 10:19:48

-1

以下應該工作。我在我的網站上寫了類似的東西。

<ul id='menu'> 
     <li><a href="">Always showing</a></li> 
     <li><a href="">Always showing Title of Submenu</a> 
     <ul class="submenu"> 
     <li><a href="">Hidden until hover over Title </a></li> 
     </ul> 
     </li> 
    </ul> 
$('#menu li').hover(function() { 
     $(this).find('ul').show(); 
    }, 
    function() { 
     $(this).find('ul').hide(); 
});

來源

2014-11-03 10:19:28 sarun

可以簡單地只用css（3），它的動畫，然後 – d1m5n 2014-11-05 20:37:24

下拉菜單效果

回答

相關問題