教程集 > 脚本编程 > javascript > 正文 Css div 超简洁导航上伸菜单代码

Css div 超简洁导航上伸菜单代码

发布时间：2016-10-24 编辑：jiaochengji.com

教程集为您提供Css div 超简洁导航上伸菜单代码等资源，欢迎您收藏本站，我们将为您提供最新的Css div 超简洁导航上伸菜单代码资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" >Css div 超简洁导航上伸菜单代码 <ul id="menu"> <li>Home</li> <li>Single Level</li> <li class="current">Dropdown <ul class="sub1"> <li>Dropdown one <ul class="fly1"> <li>Dropdown 1.1</li> <li>Dropdown 1.2</li> <li>Dropdown 1.3</li> <li>Dropdown 1.4</li> <li>Dropdown 1.5</li> <li>Dropdown 1.6</li> </ul> </li> <li class="currentsub">Dropdown two <ul class="fly2"> <li>Dropdown 2.1</li> <li>Dropdown 2.2</li> <li class="currentfly">Dropdown 2.3</li> <li>Dropdown 2.4</li> <li>Dropdown 2.5</li> </ul> </li> <li>Dropdown three</li> <li>Dropdown four</li> <li>Dropdown five <ul class="fly3"> <li>Dropdown 5.1</li> <li>Dropdown 2.2</li> <li>Dropdown 3.3</li> </ul> </li> </ul> </li> <li>Dropline <ul class="sub2"> <li>Dropline one</li> <li>Dropline two</li> <li>Dropline three</li> <li>Dropline four</li> <li>Dropline five</li> <li>Dropline six</li> </ul> </li> <li>Flyout <ul class="sub3"> <li>Flyout one</li> <li>Flyout two</li> <li>Flyout three</li> <li>Flyout four</li> </ul> </li> <li id="support">Support</li> <li id="contact">Contact</li> </ul> <style> #pad {height:155px;} #menu {padding:0 0 0 30px; margin:0; list-style:none; height:25px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;} #menu li {float:left; margin-right:1px;} #menu li a {display:block; float:left; height:25px; line-height:25px; background:#333; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 30px 0 20px;} #menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} /* Default link styling */ /* Style the list OR link hover. Depends on which browser is used */ #menu li a:hover {z-index:200; position:relative;color:#fff; background-color:#0c6;} #menu li:hover {position:relative; z-index:200;} #menu li:hover > a {color:#fff; background:#0c6;} #menu li:hover > a.sub {color:#fff; background-color:#0c6;} #menu li.current a {color:#fff; background:#084;} #menu li a.sub {background: #333 url(http://www.jiaochengji.com/blog/upload/image/20091216074058.gif) no-repeat right center;} #menu li.current a.sub {color:#fff; background:#084 url(http://www.jiaochengji.com/blog/upload/image/20091216074058.gif) no-repeat right center;;} #menu li:hover ul {left:0; top:auto; bottom:25px; width:120px; background:#444;} #menu a:hover ul {left:0; top:auto; bottom:0; width:120px; background:#444;} /* keep the 'next' level invisible by placing it off screen. */ #menu ul, #menu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:auto; margin:0; padding:0; list-style:none;} #menu :hover ul :hover ul {left:120px; top:auto; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;} #menu :hover ul :hover ul.fly3 {bottom:auto; top:-53px;} #menu :hover ul :hover ul.fly2 {bottom:auto; top:-27px;} #menu :hover ul :hover ul.fly1 {bottom:auto; top:-27px;} #menu :hover ul li {margin:0; border-top:1px solid #666;} #menu :hover ul li a {width:120px; padding:0; text-indent:10px; background:#333; color:#ccc; height:25px; line-height:25px;} #menu :hover ul li a.fly {background:#333 url(http://www.jiaochengji.com/blog/upload/image/20091216074031.gif) no-repeat right center;} #menu :hover ul :hover {background-color:#0c6; color:#fff;} #menu :hover ul :hover a.fly {background-color:#0c6; color:#fff;} #menu :hover ul li.currentsub a {background:#084; color:#fff;} #menu :hover ul li.currentsub a.fly {background:#084 url(http://www.jiaochengji.com/blog/upload/image/20091216074031.gif) no-repeat right center; color:#fff;} #menu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#3e3e3e; color:#ccc;} #menu :hover ul :hover ul :hover {background-color:#0d7; color:#fff;} #menu :hover ul :hover ul li.currentfly a, #menu :hover ul :hover ul li.currentfly a:hover {background:#084; color:#fff;} </style></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
css div布局的好处与优势是什么？
jquery遮罩层效果实现导航菜单代码
 jquery导航固定效果实例
 Css div 超简洁导航上伸菜单代码
 制作jquery遮罩层效果导航菜单代码分享
 导航菜单-简洁的纯CSS二级下拉菜单
 jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
 超酷仿FLASH导航菜单效果
 7款风格新颖的jQuery/CSS3菜单导航分享
 基于jQuery实现点击同时更改两个iframe的网址

上一篇：js 下拉菜单下一篇：javascript css tab 切换菜单效果

[关闭]

Css div 超简洁导航上伸菜单代码

最近更新

浏览排行