您的位置:主页 > 网页制作 > DIV+CSS >

用CSS做的水平导航菜单效果

[ 来源：中国设计秀 | 作者： | 更新日期:2008-3-13 10:38:21 | 人气： | 评论 0 条 ]

文章来源于www.hot007.com

代码：文章来源于www.jc567.cn

<style>
body {
font: normal 11px verdana;
}
div#nav{
border-left: 1px solid #ccc;
}
span {
margin: 0px;
padding: 0px;
list-style: none;
width: 120px; /* Width of Menu Items */
position: relative;
border: 1px solid #ccc;
border-left: 0px;
}
span div span {
border: 1px solid #ccc;
border-top: 0px;
}
span div {
position: absolute;
left: -1px;
top: 24px; /* Set 1px less than menu width */
display: none;
}
/* Styles for Menu Items */
div span a {
width: 100%;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
}
div span a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
span div span a { padding: 2px 5px; } /* Sub Menu Styles */
span:hover div, span.over div { display: inline; } /* The magic */
</style>
<div id="nav">
<span>Home
<div>
</div>
</span>
<span>About
<div>
<span>History</span>
<span>Team</span>
<span>Offices</span>
</div>
</span>
<span>Services
<div>
<span>Web Design</span>
<span>Internet Marketing</span>
<span>Hosting</span>
<span>Domain Names</span>
<span>Broadband</span>
</div>
</span>
<span>Contact Us
<div>
<span>United Kingdom</span>
<span>France</span>
<span>USA</span>
<span>Austraspana</span>
</div>
</span>
</div>

复制于hot007.com

Tags：用CSS做的水平导航菜单效果

上一篇：ADO物件的方法與屬性下一篇：基于VC6.0的DLL编程实现

您的评论

·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯，提倡就事论事，杜绝漫骂和人身攻击等不文明行为

精彩推荐

最新资讯

热点资讯