您的位置：首页 > 其它

纵向导航菜单及二级弹出菜单(实践可行)

2012-08-14 14:11 435 查看


演示效果如上

代码;

<!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>

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

<title>菜单栏</title>

<style type="text/css">

<!--

#menu ul {

margin: 0px;

padding: 0px;

list-style-type: none;

}

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

line-height: 1.5px;

}

#menu {

width: 100px;

border: 1px solid #CC;

}

#menu ul li {

line-height: 26px;

background-color: #eee;

height: 26px;

padding-top: 0px;

padding-right: 8px;

padding-bottom: 0px;

padding-left: 8px;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #ccc;

position: relative;

}

a {

color: #000000;

text-decoration: none;

}

a:hover {

color: #FF0000;

}

body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }

ul { list-style: none; }

img { border-style: none; }

#menu ul li ul {

display: none;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-left-style: solid;

border-top-color: #ccc;

border-right-color: #ccc;

border-bottom-color: #ccc;

border-left-color: #ccc;

position: absolute;

width: 100px;

left: 100px;

top: 0px;

}

#menu ul li:hover ul {

display: block;

}

-->

</style>

</head>

<body>

<div id="menu">

<ul>

<li><a href="#">首页</a></li>

<li><a href="#">网页版式布局</a>

<ul>

<li><a href="#">自适应宽度</a></li>

<li><a href="#">固定宽度</a></li>

</ul>

</li>

<li><a href="#">div+css教程</a>

<ul>

<li><a href="#">新手入门</a></li>

<li><a href="#">视频教程</a></li>

<li><a href="#">常见问题</a></li>

</ul>

</li>

<li><a href="#">div+css实例</a></li>

<li><a href="#">常用代码</a></li>

<li><a href="#">站长杂谈</a></li>

<li><a href="#">技术文档</a></li>

<li><a href="#">资源下载</a></li>

<li><a href="#">图片素材</a></li>

</ul>

</div>

</body>

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