公告小喇叭 酷8网滚动公告→[视频内容声明:本站不提供任何视频文件资源存储,更不提供视频上传录制等服务,所有视频内容均来自视频分享站所提供的公开引用资源。视频仅用于参考交流学习欣赏之用。绝不用于商业用途。请大家支持正版视频!其他内容声明:其余部分内容均来源互连网,其版权归原作者。如本站收集的内容无意侵犯了贵公司版权,请您加微信告之。我们会于二十四小时内查证属实后,删除相应资源。如不通知,那本站将不对此版权纠纷承担任何责任。备注:本站原创视频任何人禁止下载用于商业用途!严重警告:如果发现视频里出现了水印诈骗广告,一定不要相信,谨防上当受骗,特此告知]

纯CSS多级竖向导航菜单,一级接一级,很眩酷!菜单依次向右展开,最多支持三级,有兴趣可以好好研究一下。

<!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>flyout-竖向三级弹出菜单</title>
<style type="text/css">
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #aaa; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#eee; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#eee; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
</style>
<![endif]-->
</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="#">栏目一</a>
<!--[if lte IE 6]>
<a href="#">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="#" title="此处可以添加注释:">子栏目A</a></li>
<li><a href="#" title="此处可以添加注释:">子栏目B</a></li>
<li><a href="#" title="此处可以添加注释:">子栏目C</a></li>
<!--[if lte IE 6]>
<a class="sub" href="#" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<![endif]-->
<ul>
<li><a href="#" title="此处可以添加注释:">子栏目D</a></li>
<li><a href="#" title="此处可以添加注释:">子栏目E</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="#" title="此处可以添加注释:">子栏目F</a></li>
<li><a href="#" title="此处可以添加注释:">子栏目G</a></li>
<li><a href="#" title="此处可以添加注释:">子栏目H</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">栏目二</a>
<!--[if lte IE 6]>
<a href="#">MENUS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="#" title="此处可以添加注释:">子栏目I</a></li>
<li><a href="#" title="此处可以添加注释:">子栏目J</a></li>
<li><a href="#" title="此处可以添加注释:">子栏目K</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">栏目三</a>
<!--[if lte IE 6]>
<a href="#">LAYOUTS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="#" title="此处可以添加注释:">子栏目L</a></li>
<li><a href="#" title="此处可以添加注释:">子栏目M</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">栏目四</a>
<!--[if lte IE 6]>
<a href="#">BOXES
<table><tr><td>
<![endif]-->
<ul>
<li><a href="#" title="此处可以添加注释:">子栏目N</a></li>
<li><a href="#" title="此处可以添加注释:">子栏目O</a></li>
<li><a href="#" title="此处可以添加注释:">子栏目P</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">栏目五</a>
<!--[if lte IE 6]>
<a href="#">MOZILLA
<table><tr><td>
<![endif]-->
<ul>
<li><a href="#" title="此处可以添加注释:">子栏目R</a></li>
<li><a href="#" title="此处可以添加注释:">子栏目S</a></li>
<li><a href="#" title="此处可以添加注释:">子栏目T</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">栏目六</a>
<!--[if lte IE 6]>
<a href="#l">EXPLORER
<table><tr><td>
<![endif]-->
<ul>
<li><a href="#" title="此处可以添加注释:">子栏目U</a></li>
<li><a href="#" title="此处可以添加注释:">子栏目V</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="/index.html">栏目七</a>
<!--[if lte IE 6]>
<a href="#">OPACITY
<table><tr><td>
<![endif]-->
<ul>
<li><a href="/" title="此处可以添加注释:">子栏目W</a></li>
<li><a href="#" title="此处可以添加注释:">子栏目X</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
</body>
</html>