下拉菜单效果

-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

下拉菜单效果

回答

相关问题