css菜单导航源码
❶ 求助：怎么在dreamweaver中插入css导航菜单代码
dreamweaver cs3以上版本，带有这样一个功能，插入->Spry->Spry菜单栏，自动生成一个导航菜单，JS和CSS自动保存，可设置三级菜单，如果CSS比较熟悉，可根据版面修改CSS到达你要的效果。
❷ html css导航菜单聚焦，效果不是如想的，请看源码和截图
CSS3的渐变效果，不是所有的浏览器都支持的。你用的什么浏览器测试的？你换个谷歌浏览器测试。
大部分IE不支持这个属性，估计最新版的IE才可以。
希望能帮到你，望采纳！
❸ 用CSS如何写出的网站导航
看下这个吧，把代码复制到一个文本文档，然后改成html就可以了。 <html xmlns=" http://www.w3.org/1999/xhtml"> <title>无标题页</title></head><body><style type="text/css">#navigatorDemo{height:230px;width:500px;background:white;margin:0 auto;} /*导航栏CSS*/ /*导航1*/ ul.blue {padding: 5px;list-style: none;background-color: #fff;border-bottom: 1px solid #e7e7e7;float: left;clear: left;} ul.blue li {float: left;} ul.blue li a {float: left;text-decoration: none;color: #ccc;padding: 4px 15px 0 0;margin-right: 8px;font: 900 14px "Arial", Helvetica, sans-serif;} ul.blue li a span {float: left;padding-right: 15px;display: block;margin-top: -4px;height: 24px;} #curNavDemo{color: #0d5f83;background: url( http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_blue.png ) no-repeat top right;} #curNavDemo span{background: url( http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_blue.png ) no-repeat top left;} ul.blue li a:hover{color: #0d5f83;background: url( http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_pink.png ) no-repeat top right;} ul.blue li a:hover span{background: url( http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_pink.png ) no-repeat top left;} /*导航2*/ ul.navigator2{list-style: none;float: left;clear: left;width:460px;background-image:url( http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_navBorder2.gif );} ul.navigator2 li {float: left;background-image:url( http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_navM.gif );} ul.navigator2 li div{background-image:url( http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_S.gif );float:left;width:4px;height:34px;font-size:0px;margin:0px 4px;background-repeat:no-repeat; background-position:top; } ul.navigator2 li a.nav{display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; text-decoration:none; cursor:pointer;} ul.navigator2 li a.nav span{display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;} ul.navigator2 li a.nav:hover{display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; background-image:url( http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_Over_L.gif ); background-position:left center; background-repeat:no-repeat; text-decoration:none;} ul.navigator2 li a.nav:hover span{display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;background-image:url( http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_Over_R.gif ); background-position:right center; background-repeat:no-repeat;} #curNavDemo2{display:block; float:left; padding-left:12px; font-weight:bold; color:#f00; height:34px; font-size:14px;background-image:url( http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_On_L.gif ); background-position:left center; background-repeat:no-repeat;} #curNavDemo2 span{display:block; float:left; padding-right:12px; font-weight:bold;height:24px; padding-top:10px;background-image:url( http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_On_R.gif );background-position:right center; background-repeat:no-repeat;} /*导航3*/ ul.navigator3{list-style: none;float: left;clear: left;width:460px;background-image:url( http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_navM.gif );} ul.navigator3 li {float: left;} ul.navigator3 li div{background-image:url( http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_S.gif );float:left;width:4px;height:34px;font-size:0px;margin:0px 4px;background-repeat:no-repeat; background-position:top; } ul.navigator3 li a.nav{display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; text-decoration:none; cursor:pointer;} ul.navigator3 li a.nav span{display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;} ul.navigator3 li a.nav:hover{display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; background-image:url( http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_Over_L.gif ); background-position:left center; background-repeat:no-repeat; text-decoration:none;} ul.navigator3 li a.nav:hover span{display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;background-image:url( http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_Over_R.gif ); background-position:right center; background-repeat:no-repeat;} #curNavDemo3{display:block; float:left; padding-left:12px; font-weight:bold; color:#f00; height:34px; font-size:14px;background-image:url( http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_On_L.gif ); background-position:left center; background-repeat:no-repeat;} #curNavDemo3 span{display:block; float:left; padding-right:12px; font-weight:bold;height:24px; padding-top:10px;background-image:url( http://www.cnblogs.com/images/cnblogs_com/wyinwing/196666/o_nav_On_R.gif );background-position:right center; background-repeat:no-repeat;}</style><script type="text/javascript" language="javascript"> function $(objId){ return document.getElementById(objId); } function changeId(idName,obj){ $(idName).id=""; obj.id=idName; obj.blur(); }</script><div id="navigatorDemo"> <div>导航风格1</div> <ul class="blue"> <li><a href="#" title="首页" id="curNavDemo" onclick="changeId('curNavDemo',this)"><span></span>首页</a></li> <li><a href="#" title="菜单1" onclick="changeId('curNavDemo',this)"><span></span>菜单1</a></li> <li><a href="#" title="菜单2" onclick="changeId('curNavDemo',this)"><span></span>菜单2</a></li> <li><a href="#" title="好长好长的菜单呀" onclick="changeId('curNavDemo',this)"><span></span>好长好长的菜单呀</a></li> </ul> <div style="height:5px;clear:both;"></div> <div>导航风格2</div> <ul class="navigator2"> <li><div></div></li> <li><a href="#" id="curNavDemo2" class="nav" onclick="changeId('curNavDemo2',this)"><span>首页</span></a><div></div></li> <li><a href="#" class="nav" onclick="changeId('curNavDemo2',this)"><span>菜单1</span></a><div></div></li> <li><a href="#" class="nav" onclick="changeId('curNavDemo2',this)"><span>菜单2</span></a><div></div></li> <li><a href="#" class="nav" onclick="changeId('curNavDemo2',this)"><span>好长好长的菜单呀</span></a><div></div></li> </ul> <div style="clear:both;height:15px;margin-top:5px;">导航风格3</div> <ul class="navigator3"> <li><div></div></li> <li><a href="#" id="curNavDemo3" class="nav" onclick="changeId('curNavDemo3',this)"><span>首页</span></a><div></div></li> <li><a href="#" class="nav" onclick="changeId('curNavDemo3',this)"><span>菜单1</span></a><div></div></li> <li><a href="#" class="nav" onclick="changeId('curNavDemo3',this)"><span>菜单2</span></a><div></div></li> <li><a href="#" class="nav" onclick="changeId('curNavDemo3',this)"><span>好长好长的菜单呀</span></a><div></div></li> </ul></div></body></html>
❹ css 二级导航横向菜单的核心代码是什么
<style>
*{margin:0px;padding:0px;}
li{list-style:none;width:100px;height:30px;font-size:14px;text-align:left;line-height:30px;border:1pxsolid#000;position:relative;}
.box>li{float:left;position:relative;}
.son{position:absolute;top:30px;left:-1px;}
.grason{position:absolute;top:-1px;left:100px;}
.son,.grason{display:none;}
.active{display:block;background:#FF0;}
</style>
<script>
window.onload=function(){
varaLi=document.getElementsByTagName('li');
for(vari=0;i<aLi.length;i++)
{
aLi[i].onmouseover=function(){
this.className='active';
varoSon=this.getElementsByTagName('ul')[0];
if(oSon)
{
oSon.style.display='block';
}
};
aLi[i].onmouseout=function(){
this.className='';
varoSon=this.getElementsByTagName('ul')[0];
if(oSon)
{
oSon.style.display='none';
}
};
}
};
</script>
</head>
<body>
<ulclass="box">
<li>首页</li>
<li>公司简介
<ulclass="son">
<li>大事件</li>
<li>领导致辞
<ulclass="grason">
<li>2013年
<ulclass="grason">
<li>10月份</li>
<li>9月份</li>
<li>8月份</li>
</ul>
</li>
<li>2014年
<ulclass="grason">
<li>10月份</li>
<li>9月份</li>
<li>8月份</li>
</ul>
</li>
</ul>
</li>
<li>企业文化</li>
</ul>
</li>
<li>联系我们</li>
<li>产品显示</li>
</ul>
</body>
❺ 导航菜单 css
这个网站是用的JS脚本生成的 地址给你
http://www.ahauto.com//js/nav.js
网页代码如下
<html>
<head>
<style>@charset "gb2312";
* { margin: 0px auto; padding: 0px; }
body { font-family:Verdana, "宋体"; font-size: 12px; background:#FFFFFF url(http://www.ahauto.com/images/body_bg.jpg) top repeat-x; color:#666666; width:960px;margin: 0px auto; padding: 0px; }
ul, dl { list-style-type: none; }
img { border:none; }
a { color:#666666; text-decoration: none; }
a:hover { color:#FF0000; text-decoration: underline; }
.clear { clear:both; }
.en { font-family:Verdana }
/***************/
#main_nav { width:960px; height:64px; background:url(http://www.ahauto.com/images/nav_bg.jpg); }
#main_nav1 { float:left }
#main_nav1 h2 { float:left; margin-top:6px; }
#main_nav1 h3 { float:left; margin-left:25px; _margin-left:17px; line-height:18px; margin-top:8px }
#main_nav1 h3 a { float:left; font-size:12px; font-size:12px; color:#FFFFFF; font-weight:normal; margin-right:12px; display:block; }
#main_nav1 h3 a:hover { color:#3A588A; background:#FFFFFF; text-decoration:none; }
#mini_nav { height:31px; line-height:31px; background:url(http://www.ahauto.com/images/mini_navbg.jpg); border:1px solid #C7D2DF; border-top:none; color:#C7D2DF; margin-bottom:8px }
#mini_nav a { color:#014DA2; margin:auto 3px; }
#mini_nav span { color:#014DA2; font-weight:bold; margin-left:10px; margin-right:5px }
</style>
</head><body>
<div id="main_nav" style="margin-bottom:5px;">
<div id="main_nav1" style=" width:155px; padding-left:18px; padding-top:7px">
<h2><a href="/news.html"><img src="/images/main_nav_li1.jpg" alt="新闻" /></a></h2>
<h3 style="width:110px"><a href="/channels/xincheshangshi/index.html">新车</a><a href="/channels/rection/index.html">降价</a><a href="/channels/company/index.html">厂家</a><a href="/channels/instry/index.html">业界</a><a href="/channels/fashion/index.html">时尚</a><a href="/channels/anhuiqiche/index.html">安徽</a> </h3>
</div>
<div id="main_nav1" style=" width:95px; padding-left:23px; padding-top:7px">
<h2><img src="/images/main_nav_li2.jpg" /></h2>
<h3 style="width:40px"><a href="">咨询</a><a href="http://bbs.ahauto.com/forumdisplay.php?fid=45">驾校</a></h3>
</div>
<div id="main_nav1" style=" width:310px; padding-left:5px; padding-top:7px">
<h2><img src="/images/main_nav_li3.jpg" /></h2>
<h3 style="width:260px"><a href="/auto/index.html">报价</a><a href="/auto/stores.php">经销商</a><a href="/channels/hangqing/index.html">行情</a><a href="/auto/calculator.php?type=fee">费用计算</a><a href="/channels/baoxian/index.html">保险</a><a href="/channels/gouchenan/index.html">导购</a><a href="/auto/photo.html">图片</a><a href="/auto/index.html">车型库</a><a href="/auto/map.php">地图</a><a href="/auto/compare.php" target="_blank">车型对比</a><a href="/channels/daikuan/index.html">贷款</a><a href="/channels/xuanche/index.html">评测</a></h3>
</div>
<div id="main_nav1" style=" width:180px; padding-left:20px; padding-top:7px">
<h2><img src="/images/main_nav_li4.jpg" /></h2>
<h3 style="width:120px"><a href="/channels/chezhubaogao/index.html">车主报告</a><a href="/channels/jiashinan/index.html">驾驶指南</a><a href="/channels/weixiubaoyang/index.html">维修保养</a><a href="http://bbs.ahauto.com/forumdisplay.php?fid=21">汽车美容</a></h3>
</div>
<div id="main_nav1" style=" width:135px; padding-left:18px; padding-top:7px">
<h2><img src="/images/main_nav_li5.jpg" /></h2>
<h3 style="width:80px"><a href="http://bbs.ahauto.com">论坛</a><a href="http://bbs.ahauto.com/forumdisplay.php?fid=30">活动</a><a href="/qa">问答</a><a href="/groupBuying.php">团购</a></h3>
</div>
</div>
<div class="clear"></div>
<div id="mini_nav" style="display:none"><span>网上购车:</span><a href="hefei" siteID="2">合肥</a> | <a href="wuhu" siteID="3">芜湖</a> | </div>
</body></html>
❻ 如何利用纯CSS制作二级或多级导航菜单
本人亲测下面这些代码是可以实现二级或多级导航菜单的。
<style>
<!--
* {margin:0px;padding:0px;}
body {overflow:scroll;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#000;}
a {font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#000;text-decoration:none;}
.menu {position:relative;width:1000px;background-color:#360;}
.menu ul {list-style-type:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:22px;border:1px solid #000;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;background:#360;padding:2px 10px;color:#fff;text-decoration:none;border:1px solid #360;}
.menu a:hover{background:#690;color:#000;}
.menu ul ul,
.menu ul ul li {clear:both;text-align:left;}
.menu ul ul li a{display:block;width:100px;height:15px;}
.menu ul ul li a:hover{background:#690;}
-->
</style>
<body>
<div class="menu">
<ul>
<li><a href="#">一级菜单_01
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二级菜单_01</a></li>
<li><a href="#">二级菜单_02</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
❼ 求一个html+css的多级导航的最简洁的源代码，样式随便，希望不是百度复制来的，想用于学习。
就算是复制来的也没事啊，重要的是你能理解就可以了
html+css 多级的基本原理也就是嵌套
<ul>
<li><ahref="#">Loremipsumdolor.</a></li>
<li><ahref="#">At,minimareiciendis.</a></li>
<li><ahref="#">Repudiandae,necessitatibusrerum.</a>
<ul>
<li><ahref="#">Loremipsumdolorsit.</a></li>
<li><ahref="#">Doloribus,porrodictavero!</a></li>
<li><ahref="#">Magnamipsumdoloremsequi.</a></li>
<li><ahref="#">Similiquesaepe,voluptatumrepellat.</a></li>
</ul>
</li>
<li><ahref="#">Et,nonvoluptate?</a></li>
</ul>