我正在尝试制作一个简单的水平列表菜单,在此 example 中显示,到目前为止,我已经将 List & CSS 复制到 jsFiddle ( New Example Update ) 但我如何使它以类似的方式工作似乎不起作用。我找不到可以研究和复制的类似示例。
在这方面,我将不胜感激。
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a>
<ul>
<li><a href="graphic-design.html">Graphic Design</a></li>
<li><a href="web-design.html">Web Design</a></li>
<li><a href="multimedia.html">Multimedia</a></li>
<li><a href="exhibitions.html">Exhibitions</a></li>
<li><a href="trademarketing.html">Trade Marketing</a></li>
</ul>
</li>
<li><a href="work.html">Work</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="wordpress">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
CSS
nav#mainnav ul {
bottom: 57px;
height: 0;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
right: 0;
}
nav ul {
list-style: none outside none;
}
ol, ul {
color: #242320;
font-size: 0.8em;
font-weight: bold;
line-height: 1.3em;
margin: 10px 40px;
}
ul {
margin-left: 30px;
}
更新:
我可以让它作为水平菜单使用,但我无法在一段时间后淡出子菜单我该怎么做Example Update
最佳答案
试试这个: http://jsfiddle.net/7uWyf/8/
$('ul li').hover(function() { // hover on main li
$('ul', this).show(); // if this will have an ul, will show it
}, function() {
$('ul', this).hide(); // when mouse is out anywhere in doc area will hide it.
});
关于jquery - 使用 css 和 Jquery 的水平多级菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14098195/