鼠标悬停下拉菜单在网页中很常见，一般的下拉菜单都是通过 JavaScript 对菜单的显示和隐藏进行控制，其实用纯粹的CSS 也可以实现。用CSS下拉菜单的几点好处是，不需要考虑客户端浏览器是否禁用了 JS，而且用 CSS下拉菜单效率比 JS 要高，还可以方便地制定样式和定位。
CSS下拉菜单演示地址
首先写出 HTML 代码如下：
css下拉菜单title><br /><link rel="stylesheet" type="text/css" href="test.css" /><br />head><br /><body><br /><ul id="navigation"><br /><li><br /><a href="#">栏目1a><br /><ul><br /><li><a href="#">栏目1-->CSS下拉菜单1a>li><br /><li><a href="#">栏目1-->CSS下拉菜单2a>li><br /><li><a href="#">栏目1-->CSS下拉菜单3a>li><br /><li><a href="#">栏目1-->CSS下拉菜单4a>li><br />ul><br />li><br /><li><br /><a href="#">栏目2a><br /><ul><br /><li><a href="#">栏目2-->菜单1a>li><br /><li><a href="#">栏目2-->菜单2a>li><br /><li><a href="#">栏目2-->菜单3a>li><br /><li><a href="#">栏目2-->菜单4a>li><br /><li><a href="#">栏目2-->菜单5a>li><br />ul><br />li><br /><li><br /><a href="#">栏目3a><br /><ul><br /><li><a href="#">栏目3-->CSS下拉菜单1a>li><br /><li><a href="#">栏目3-->CSS下拉菜单2a>li><br /><li><a href="#">栏目3-->CSS下拉菜单3a>li><br />ul><br />li><br />ul><br />body><br />html></p><p>在没有 CSS 的情况下，它显示为一个最基本的无序列表的样式：</p><p>下面编写 CSS，代码如下：</p><p>body {<br />font-family:verdana, sans-serif;<br />font-size:small;<br />}<br />#navigation , #navigation li ul{<br />padding:0;<br />margin:0;<br />list-style-type: none;<br />}<br />#navigation li {<br />float:left;<br />text-align:center;<br />position:relative;<br />}<br />#navigation li a:link, #navigation li a:visited {<br />display:block;<br />text-decoration:none;<br />color:#000;<br />width:120px;<br />height:40px;<br />line-height:40px;<br />border:1px solid #fff;<br />border-width:1px 1px 0 0;<br />background:#c5dbf2;<br />padding-left:10px;<br />}<br />#navigation li ul {<br />display: none;<br />}<br /><br />/* 以下只支持非IE6浏览器 */<br />#navigation li:hover a {<br />color:#fff;<br />background:#2687eb;<br />}<br />#navigation li:hover ul {<br />display:block;<br />position:absolute;<br />top:40px;<br />margin-top:1px;<br />left:0;<br />width:120px;<br />}<br />#navigation li:hover ul li a {<br />display:block;<br />background:#c5dbf2;<br />color:#000;<br />height:20px;<br />line-height:20px;<br />padding:5px 10px;<br />width:110px;<br />}<br />#navigation li:hover ul li a:hover {<br />color:#fff;<br />background:#6b839c;<br />}<br />把 CSS 引入页面后，下拉菜单就做好了，效果是这样的（鼠标停在“栏目1”上的效果）：</p><p>你可能注意到了，我在 CSS 代码中使用了 li:hover 这个伪类选择器，这在 Firefox、Opera 等浏览器中都没有问题，但是有一个很严重的问题就是：在 IE6 中，hover 伪类仅可用于 a 标签，li:hover 在 IE6 中是无效的。所以，这个下拉并没有在 IE6 中实现，我们需要针对 IE6 作出一些改进。既然它只支持 a:hover，那我们就想办法把需要控制的下拉菜单写进 标签中。</p><p>改进后的 HTML 代码如下：</p><p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>css下拉菜单title><br /><br /><br />head><br /><body><br /><ul id="navigation"><br /><li><br /><a href="#">栏目1<br /><br /><table><tr><td><br /><ul><br /><li><a href="#">栏目1-->CSS下拉菜单1a>li><br /><li><a href="#">栏目1-->CSS下拉菜单2a>li><br /><li><a href="#">栏目1-->CSS下拉菜单3a>li><br /><li><a href="#">栏目1-->CSS下拉菜单4a>li><br />ul><br />td>tr>table><br /><br /><br /><br />li><br /><li><br /><a href="#">栏目2<br /><table><tr><td><br /><ul><br /><li><a href="#">栏目2-->菜单1a>li><br /><li><a href="#">栏目2-->菜单2a>li><br /><li><a href="#">栏目2-->菜单3a>li><br /><li><a href="#">栏目2-->菜单4a>li><br /><li><a href="#">栏目2-->菜单5a>li><br />ul><br />td>tr>table><br /><br /><br /><br />li><br /><li><br /><a href="#">栏目3<br /><table><tr><td><br /><ul><br /><li><a href="#">栏目3-->CSS下拉菜单1a>li><br /><li><a href="#">栏目3-->CSS下拉菜单2a>li><br /><li><a href="#">栏目3-->CSS下拉菜单3a>li><br />ul><br />td>tr>table><br />,<br /><br /><br />li><br />ul><br />body><br />html><br />针对 IE6 的 CSS 代码如下：</p><p>body {<br />font-family:verdana, sans-serif;<br />font-size:small;<br />}<br />#navigation , #navigation li ul{<br />padding:0;<br />margin:0;<br />list-style-type: none;<br />}<br />#navigation li {<br />float:left;<br />text-align:center;<br />position:relative;<br />}<br />#navigation li a:link, #navigation li a:visited {<br />display:block;<br />text-decoration:none;<br />color:#000;<br />width:120px;<br />height:40px;<br />line-height:40px;<br />border:1px solid #fff;<br />border-width:1px 1px 0 0;<br />background:#c5dbf2;<br />padding-left:10px;<br />}<br />#navigation li ul{<br />display: none;<br />}<br />table {<br />margin:-1px;<br />border-collapse:collapse;<br />}<br />/* 以下针对IE6 */<br />#navigation li a:hover {<br />color:#fff;<br />background:#2687eb;<br />}<br />#navigation li a:hover ul {<br />display:block;<br />position:absolute;<br />top:40px;<br />margin-top:1px;<br />left:0;<br />width:120px;<br />}<br />#navigation li a:hover ul li a {<br />display:block;<br />background:#c5dbf2;<br />color:#000;<br />height:20px;<br />line-height:20px;<br />padding:5px 10px;<br />width:110px;<br />}<br />#navigation li a:hover ul li a:hover {<br />color:#fff;<br />background:#6b839c;<br />}<br />改进之后已经达到了我们预期的目的，在多种浏览器中都实现了鼠标悬停下拉菜单。</p><p>CSS下拉菜单演示地址</p><p>改进的地方主要有：针对 IE6 重新写了一个 CSS，命名为 testforIE.css；通过 IE 和非 IE 浏览器的条件注释 实现了针对不同的浏览器设定 标签不同的结束位置，从而可以在 IE6 中通过 a:hover 来控制下拉菜单；把下拉菜单的</p><p>放在了一个只有一行一列的表格中，因为我目前发现只有这样才可以在 IE6 创新互联常显示，具体的原因还不是很清楚。</p><p>到此，用纯CSS下拉菜单就制作完成了。</p> <br>
网页题目：<a href="https://www.cdcxhl.com/news/321100.html" target="_blank">简单的CSS下拉菜单制作方法</a>
<br>
网页路径：<a href="http://www.pawzjs.cn/view/321100.html">http://www.pawzjs.cn/view/321100.html</a>
</div>
</div>
<div class="other">
<h3>其他资讯</h3>
<ul>
<li>
<a href="/article/cdjhppd.html">香港vps服务器怎么选择</a>
</li><li>
<a href="/article/cdjhpep.html">数据库管理员的Oracle密码破解</a>
</li><li>
<a href="/article/cdjhppc.html">什么是课程方案？（课程设计怎么写）</a>
</li><li>
<a href="/article/cdjhpgs.html">云主机伪静态如何设置成动态</a>
</li><li>
<a href="/article/cdjhppg.html">为什么有些高级开发人员不喜欢Python</a>
</li> </ul>
</div>
</div>
<footer>
<div class="foot-top">
<ul>
<li>
<div class="title">关于我们</div>
<div class="tbox">
<div class="txt">
乐宠之家广告设计专注于网站建设、小程序开发，
<br /> 用心做好每一个网站，懂您所需、做您所想！
<br /> 我们比其他网络公司做的更好、做的更多，
<br /> 为客户创造更大的价值，让客户更省心!
</div>
<a rel="nofollow" href="javascript:;" class="more">MORE</a>
</div>
</li>
<li>
<div class="title">相关专题</div>
<div class="tbox">
<a href="javascript:;" class="link">企业官网定制</a>
<a href="javascript:;" class="link">小程序开发</a>
<a href="javascript:;" class="link">品牌网站设计</a>
<a href="javascript:;" class="link">网站建设标签</a>
<a href="javascript:;" class="link">蓬安网站建设</a>
<a href="javascript:;" class="link">高端网站设计</a>
<a href="javascript:;" class="link">公司做网站</a>
</div>
</li>
<li>
<div class="title">凭什么选择我们</div>
<div class="tbox">
<a class="link">专业设计团队</a>
<a class="link">快速响应服务</a>
<a class="link">蓬安网站建设</a>
<a class="link" href="https://www.cdcxhl.com/zuyong/meishan.html" target="_blank">眉山服务器租用</a>
<a class="link" href="https://www.cdcxhl.com/jigui/" target="_blank">服务器机柜租用</a>
<a class="link" href="https://www.cdcxhl.com/idc/cqwld.html" target="_blank">重庆服务器托管</a>
<a class="link" href="https://www.cdcxhl.com/tuoguan/" target="_blank">服务器托管</a>
<a class="link" href="https://www.pawzjs.cn/" target="_blank">蓬安网站制作</a>
<a class="link" href="https://www.cdcxhl.com/" target="_blank">成都网站设计</a>
<a class="link">售后服务让您省心</a>
</div>
</li>
<li>
<div class="title">网站设计案例</div>
<div class="tbox">
<ul>
<li>
<a href="javascript:;" target="_blank">
<div class="img"><img src="/Public/Home/images/gebaili.jpg" alt="哥百利" />
</div>
<div class="tboxs">
<div class="t1">哥百利</div>
<div class="t2">家具研发、设计、生产、服务为一体的专业实木家具订做企业</div>
</div>
</a>
</li>
<li>
<a href="javascript:;" target="_blank">
<div class="img"><img src="/Public/Home/images/cdshujin.jpg" alt="蜀锦在线" /></div>
<div class="tboxs">
<div class="t1">蜀锦在线</div>
<div class="t2">汽车行业网站建设</div>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="foot-center">
<ul>
<li>
<div class="f-ewm"><img alt="乐宠之家广告设计微信公众号" src="/Public/Home/images/ewm.jpg" /></div>
<div class="tbox ewm">
<div class="t1">扫一扫关注</div>
<div class="t2">专业团队为您解答</div>
</div>
</li>
<li>
<div class="tbox tel">
<div class="t1">电话/邮箱</div>
<div class="t2">18982081108 / 028-86922220<br>631063699@qq.com</div>
</div>
</li>
<li>
<div class="tbox sz">
<div class="t1">网站建设</div>
<div class="t2">青羊区 北大街19号<br> 大客户专线：13518219792
</div>
</div>
</li>
<li>
<div class="tbox gz">
<div class="t1">网站设计</div>
<div class="t2">
青羊区 北大街19号
<br /> 028-86922220
</div>
</div>
</li>
</ul>
</div>
<div class="foot-button">
<div class="link-box" style="width:100%;float:none;">
<div class="a-box"></div>
<div
style="border-top:1px solid #ebebeb;font-size:12px;color:#666666;line-height:2;padding-top:20px;margin-top:20px;">
业务范围包括企业网站建设、商城系统开发、品牌网站设计、旅游网站制作、英文外贸网站、教育培训门户网站开发、微信手机移动端开发、响应式网站建设、微信小程序开发、APP定制和其他类型网站定制等。
<br>服务区域包括成都市锦江区、青羊区、武侯区、金牛区、成华区、龙泉驿、温江、新都、高新区、成都市以及全国各地接受异地服务商的公司企业或者机构。
<br>
<div class="a-box"><span><b>友情链接</b></span>
<a href="https://www.cdcxhl.com/" title="网站建设公司" target="_blank">网站建设公司</a><a href="http://www.cxhljz.cn/" title="成都网站设计公司" target="_blank">成都网站设计公司</a><a href="http://www.gxczzl.com/" title="服装五金配件" target="_blank">服装五金配件</a><a href="http://www.cdhuace.com/biaoshi.html" title="成都导视系统设计" target="_blank">成都导视系统设计</a><a href="http://www.scbrznjsb.com/mobile/" title="Android开发" target="_blank">Android开发</a><a href="http://www.pjafg.com/" title="简阳发电机租赁公司" target="_blank">简阳发电机租赁公司</a><a href="http://www.wzyarui.cn/" title="成都户外广告" target="_blank">成都户外广告</a><a href="https://www.cdxwcx.com/wangzhan/muban.html" title="成都模板网站" target="_blank">成都模板网站</a><a href="http://www.scbztp.com/" title="成都木托盘" target="_blank">成都木托盘</a><a href="https://www.cdcxhl.com/pinpai.html" title="成都品牌网站建设" target="_blank">成都品牌网站建设</a> </div>
</div>
<div class="copyright">©2026 蓬安网站建设公司 版权所有 抄袭必究 蜀ICP备19037934号</div>
</div>
</div>
</footer>
<div class="fixed-contact-wrap show">
<ul class="item-list clearfix">
<li class="phone">
<a rel="nofollow" target="_blank" href="tel:028-86922220"><i
class="icon"></i><strong>028-86922220</strong></a>
</li>
<li class="qq">
<a rel="nofollow" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes"><i
class="icon"></i><strong> 244261566</strong></a>
</li>
<li class="back-top">
<a href="#" rel="nofollow" class="back-to-top"><i class="icon"></i><strong> 回到顶部</strong></a>
</li>
</ul>
</div>
<script type="text/javascript">
//右侧联系我们悬浮窗
$(".fixed-contact-wrap").hover(function () {
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
})
function show_phone_menu() {
$(".right-side ul").toggle();
}
</script>
</body>
</html>
<script>
$(".con img").each(function(){
var src = $(this).attr("src"); //获取图片地址
var str=new RegExp("http");
var result=str.test(src);
if(result==false){
var url = "https://www.cdcxhl.com"+src; //绝对路径
$(this).attr("src",url);
}
});
window.onload=function(){
document.oncontextmenu=function(){
return false;
}
}
</script> 
