我正在尝试找到一个菜单系统，我可以构建类似于http://www.bonobos.com/的网站导航。我需要它在每个下拉列表中都有静态图像。
任何帮助或指示将不胜感激。感谢。
答案 0 :(得分：0)
这不是奇迹，但没有java脚本（opera，safari，firefox，chrome）。
<!doctype html>
<html>
<head>
<title>Horizontal Dropdown CSS Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
text-decoration:none;
margin:0;
padding:0;
border:none;
list-style:none
}
html{background-color:#999}
body{
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
color:#000;
text-align:center
}
#wrapper {
display:block;
margin:auto;
width:1024px;
height:100%;
background-color:#aaa;
border:#ccc groove 2px
}
#content {
width:auto;
height:auto;
background-color:#fff
}
#nav {
position:relative;
display:table;
text-align:left;
width:100%;
height:30px;
margin:auto;
background-color:#eee;
border-bottom:#eee groove 2px
}
#horizon-menu {
float:left;
clear:both;
width:800px;
height:30px;
font-weight:700;
background-color:#eee
}
#horizon-menu li {display:inline-block;height:30px}
#horizon-menu li a {display:block;padding:6px;text-decoration:none;color:#555}
#horizon-menu li ul li {display:none}
#horizon-menu li a:hover {padding:6px;background-color:#fff}
#horizon-menu li:hover ul {
display:inline-block;
position:absolute;
z-index:1000;
float:left;
clear:none;
min-width:200px;
width:auto;
min-height:160px;
height:auto;
margin:3px 0 0 -2px;
/*padding:2px;*/
border:#eee groove 2px;
background-color:#eee
}
#horizon-menu li:hover ul img {display:inline;float:left;clear:none}
#horizon-menu li:hover ul a img {background-color:transparent}
#horizon-menu li:hover ul li {
display:inline-block;
width:auto;
height:auto;
float:left;
clear:both;
/*padding:2px*/
}
#horizon-menu li:hover ul li a {display:block;color:#555;text-decoration:none}
#horizon-menu li:hover ul div a {display:block}
#horizon-menu li:hover div {
float:left;
clear:none;
margin-right:2px;
min-width:160px;
width:auto;
min-height:150px;
height:auto;
background-color:#ddd
}
</style>
<script type="text/javascript" src="lib/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a').bind('click', function(){
alert('f!');
})
$('#nav, #horizon-menu li ul div').css('display','none');
$('#nav').fadeTo("slow", 1.0);
$('#horizon-menu li a').bind({
mouseenter: function(){
$('#horizon-menu li ul div').fadeTo("slow", 1.0);
},
mouseover: function(){
$('#horizon-menu li ul div').fadeTo("slow", 1.0);
}
});
$('#horizon-menu li ul').bind({
mouseleave: function(){
$('#horizon-menu li ul div').fadeTo("slow", 0);
},
mouseout: function(){
$('#horizon-menu li ul div').fadeTo("slow", 0);
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul id="horizon-menu">
<li><a href="#">MacBook Pro</a>
<ul>
<li>
<div>
<a href="#" title="">Link 1</a>
<a href="#" title="">Link 2</a>
<a href="#" title="">Link 3</a>
</div>
<div>
<a href="#" title=""><img src="http://images.apple.com/home/images/promo_macbookpro_20110302.png" alt="" /></a>
</div>
</li>
</ul>
</li>
<li><a href="#">MacBook Air</a></li>
<li><a href="#">MacBook</a>
<ul>
<li>
<div>
<a href="#" title="">MacBook</a>
<a href="#" title="">Wow!</a>
</div>
<div>
<img src="http://images.apple.com/home/images/promo_macbookpro_20110302.png" alt="" />
</div>
</li>
</ul>
</li>
</ul>
</div>
<div id="content">
<h1><img src="http://images.apple.com/macbookair/images/performance_title20101020.png" alt="Might made light." height="46" width="333"></h1>
<p class="intro">Don’t be fooled by the sliver-thin profile of <a class="ml-smartlink" href="http://en.wikipedia.org/wiki/MacBook">MacBook</a> Air. This small wonder features powerful NVIDIA graphics, an Intel Core 2 Duo processor, lightning-fast flash storage, and long battery life. So while looks may be deceiving, performance doesn’t lie.</p>
<img src="http://images.apple.com/macbookair/images/bg_hardware_20101020.png" alt="" height="441" width="705" />
</div>
</div>
</body>
</html>