您的位置：首页 > 其它

导航，鼠标悬停出现二级菜单

2011-10-25 20:55 260 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Horizontal Drop Down Menus</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css" />

ul {

margin: 0;

padding: 0;

list-style: none;

width: 150px;

border-bottom: 1px solid #ccc;

}

ul li {

position: relative;

}

li ul {

position: absolute;

left: 149px;

top: 0;

display: none;

}

ul li a {

display: block;

text-decoration: none;

color: #777;

background: #fff;

padding: 5px;

border: 1px solid #ccc;

border-bottom: 0;

}

* html ul li { float: left; height: 1%; }

* html ul li a { height: 1%; }

li:hover ul, li.over ul {display: block; }

</style>

</head>

<body>

<ul id="nav">

<li><a href="#">Home</a></li>

<li><a href="#">About</a>

<ul>

<li><a href="#">History</a></li>

<li><a href="#">Team</a></li>

<li><a href="#">Offices</a></li>

</ul>

</li>

<li><a href="#">Services</a>

<ul>

<li><a href="#">Web Design</a></li>

<li><a href="#">Internet Marketing</a></li>

<li><a href="#">Hosting</a></li>

<li><a href="#">Domain Names</a></li>

<li><a href="#">Broadband</a></li>

</ul>

</li>

<li><a href="#">Contact Us</a>

<ul>

<li><a href="#">United Kingdom</a></li>

<li><a href="#">France</a></li>

<li><a href="#">USA</a></li>

<li><a href="#">Australia</a></li>

</ul>

</li>

</ul>

</body>

</html>

示例：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航