答案 0 :(得分:1)
查看web designer wall,它有我见过的纯css下拉菜单的最佳示例之一(查看源代码以查看css代码)。对颜色和颜色进行一些微小的修改你应该能够重新设计你的设计风格。
答案 1 :(得分:1)
它还没有完全完成,我没时间处理下拉列表或添加搜索,但这应该是朝着正确方向迈出的重要一步:
CSS:
nav {
display:block; margin:0; padding:0; width:978px; height:53px;
border-bottom:1px solid #abd2f9; border-top:1px solid #f0f9fe; border-left:1px solid #d1e7fc; border-right:1px solid #d1e7fc;
-webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;
background:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(238,248,255,1)), color-stop(100%, rgba(207,234,253,1)));
background:-moz-linear-gradient(top,rgba(238,248,255,1), rgba(207,234,253,1) 100%);
background:linear-gradient(top, rgba(238,248,255,1), rgba(207,234,253,1) 100%);
}
nav ul {
display:block; margin:0; padding:0 45px; list-style:none;
}
nav ul li {
float:left; display:block; margin:0; padding:0;
}
nav ul li a {
display:block; margin:0 16px 0 0; padding:0 16px; height:53px; line-height:53px; color:#444; text-decoration:none;
}
nav ul li a:hover {
background:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(207,234,253,1)), color-stop(100%, rgba(238,248,255,1)));
background:-moz-linear-gradient(top,rgba(207,234,253,1), rgba(238,248,255,1) 100%);
background:linear-gradient(top, rgba(207,234,253,1), rgba(238,248,255,1) 100%);
}
nav ul li ul {
display:none; padding:0;
}
nav ul li ul li {
float:none;
}
HTML:
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">INFORMATION</a>
<ul>
<li><a href="#">NEWS</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">HELP</a></li>
</ul>
</li>
<li><a href="#">COURSES</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</nav>