注册登录

【CSS】简单的CSS 下拉导航菜单实现代码-下拉导航菜单

时间:2016-01-22 07:37 来源: 我爱IT技术网作者:佚名

本文所分享的知识点是【简单的CSS 下拉导航菜单实现代码】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。

简单的CSS 下拉导航菜单实现代码

<!DOCTYPE <a href='http://www.52ij.com/jishu/html/' target='_blank'>html</a> 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" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
 <title>Plain Shane Design > CSS Drop Down Demo</title>
 <style type="text/<a href='http://www.52ij.com/jishu/css/' target='_blank'>css</a>">
 *{margin:0; padding: 0;}
 body { background:#444;}
 #navcont { background: #fff; width: 100%;}
 #nav { font-family: helvetica; position:relative; width:377px; height:56px; font-size:14px; color:#999; 
margin: 0 auto; }
 #nav ul { list-style-type:none; }
 #nav ul li { float:left; position: relative;}
 #nav ul li a { border-right:1px solid #e9e9e9; padding:20px; display:block; text-decoration:none; text-
align:center; color:#999;}
 #nav ul li a:hover {background: #12aeef url(http://files.jb51.net/demoimg/200912/shadow.png) repeat-x;; 
color:#fff;} 
 #nav ul li ul {display: none;}
 #nav ul li:hover ul {display: block; position: absolute; top:56px; min-width:190px; left:0;} 
 #nav ul li:hover ul li a {display:block; background:#12aeef; color:#ffffff; width: 110px; text-align: 
center; border-bottom: 1px solid #f2f2f2; border-right: none;}
 #nav ul li:hover ul li a:hover { background:#6dc7ec; color:#ffffff; }
 .borderleft {border-left: 1px solid #e9e9e9;}
 .top { border-top: 1px solid #f2f2f2;}
 
 
 #threestyles {
 width: 500px;
 height: 300px;
 margin: 0px auto;
 border: 2px solid #666;
 margin-top: 30px;
 }
 
 </style>
</head>
<body>
<div id="navcont"> 
<div id="nav"> 
<ul>
 <li class="borderleft"><a href="http://www.jb51.net" target="_blank">Home</a></li>
 <li><a href="http://www.jb51.net" target="_blank">About Me</a></li>
 <li><a href="http://www.jb51.net" target="_blank">Portfolio</a>
 <ul>
 <li class="top"><a href="http://www.jb51.net" target="_blank">Web</a></li>
 <li><a href="http://www.jb51.net" target="_blank">Print</a></li>
 <li><a href="http://www.jb51.net" target="_blank">The Rest</a></li>
 </ul>
 </li> 
 <li><a href="http://www.jb51.net" target="_blank">Contact</a>
 <ul>
 <li class="top"><a href="http://www.jb51.net" target="_blank">Web</a></li>
 <li><a href="http://www.jb51.net" target="_blank">Print</a></li>
 <li><a href="http://www.jb51.net" target="_blank">The Rest</a></li>
 </ul>
 </li>
</ul>
</div>
</div>
<div id="threestyles"><a href="http://www.jb51.net" target="_blank"><img 
src="http://www.52ij.com/uploads/allimg/160122/0IG14294-0.png" /></div>
</body>
</html>

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

关于简单的CSS 下拉导航菜单实现代码的相关讨论如下：

　　相关问题：css下拉菜单代码

　　答：如果想仅用CSS实现的话，可以考虑把菜单标题和菜单内容放到同一个容器下，然后给这个容器做hover样式，具体请参阅下面示... >>详细

　　相关问题：CSS下拉导航菜单

　　答：导航菜单一般都是html+css+js实现的，也就是说想要自己编写一个导航，既要了解html，又要知道css，还得会js >>详细

　　相关问题：求单纯css导航栏下拉菜单效果代码讲解

　　答：一楼的microji,你的下拉菜单很经典,非常谢谢!加入收藏了. 纯CSS的下拉菜单支持IE6 IE7 Firefox,楼主复制看看吧 *{margin:0;padding:0;} .menu{font-size:12px;position:relative;z-index:100;} .menu ul{list-style:none;} .menu li {float:lef... >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

【CSS】简单的CSS 下拉导航菜单实现代码-下拉导航菜单

简单的CSS 下拉导航菜单实现代码

关于简单的CSS 下拉导航菜单实现代码的相关讨论如下：

第一章 CSS3 教程（基础）

第二章 CSS3 教程（高级）

【CSS】简单的CSS 下拉导航菜单实现代码-下拉导航菜单

简单的CSS 下拉导航菜单实现代码

关于简单的CSS 下拉导航菜单实现代码的相关讨论如下：

第一章 CSS3 教程 （基础）

第二章 CSS3 教程（高级）

第一章 CSS3 教程（基础）