简单的三级导航纵向_html-js-css

概述简单的三级导航纵向

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。

内存溢出小编现在分享给大家，也给大家做个参考。

<!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=utf-8" /><!--[if IE]>    <script src="http://HTML5shiv.Googlecode.com/svn/trunk/HTML5.Js"></script><![endif]--><!--[if lt IE 7]>    <script src="http://ie7-Js.Googlecode.com/svn/version/2.1(beta3)/ie7.Js"></script>    <link href="CSS/ie6_Hacks.CSS" rel="stylesheet" type="text/CSS" />    <style>    ul,li,a,img,div,dd,dl,dt {behavior: url()}    </style><![endif]--><style type="text/CSS" media="screen">/* 三级导航实例*/body {    Font-family: "Microsoft YaHei";    Font-size: 12px;    line-height: 1.5;    line-height: 100%;    text-align: center;    margin: 0px;    padding: 0px;}img { border-style: none; }a { color: #000; text-decoration: none; }a:hover { color: #FFF; }#menu { wIDth: 100px; border: 1px solID #CCC; border-bottom:none;float:left;}/*1级*/#menu ul { List-style: none; margin: 0px; padding: 0px; }#menu ul li { background: #eee;  height:26px; line-height: 26px;			  position:relative; }			  /*#menu ul li ul { display:block; position: absolute; left: 100px;top: 0px; wIDth:100px;}*//*2级*/div ul li ul { display:none; position: absolute; left: 100px;top: 0px; wIDth:100px;margin-left:0px}div ul li ul li{position:relative;}div ul li:hover ul { display:block;}/*3级*/#menu ul li ul li ul{ display:none; position: absolute; left: 100px; top: 0px; wIDth:100px;margin-left:0px}#menu ul li ul li ul li{position:relative;}#menu ul li ul li:hover ul{display:block;}#main { wIDth:70%;background-color:red;height:100px;float:left;}</style></head></p><p><body><div ID="menu">    <ul>        <li>            <a href="#">首页</a>        </li>        <li>            <a href="#">网页版式布局</a>            <ul>                <li>                    <a href="#">自适应宽度</a>					<ul>						<li><a href="#">111111</a></li>						<li><a href="#">222222</a></li>					</ul>                </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><div ID="main">ddd</div></body></HTML>

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的简单的三级导航纵向全部内容，希望文章能够帮你解决简单的三级导航纵向所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1090667.html