css导航栏鼠标hover的时候就出现下拉菜单怎么做的？

说一下原理就行可以的话给个代码案例谢谢啦... 说一下原理就行可以的话给个代码案例谢谢啦展开

 我来答

3个回答

#热议# 应届生在签三方时要注意什么？

noteamo
2011-11-26 · TA获得超过243个赞

知道小有建树答主

回答量：139

采纳率：0%

帮助的人：104万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<title>纯CSS的下拉菜单支持IE6 IE7 Firefox</title>
<style type="text/css">
*{margin:0;padding:0;}
.menu{font-size:12px;position:relative;z-index:100;}
.menu ul{list-style:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;border:1px solid #aaa;background:#cacaca;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}
.menu a:hover{background:#fafafa;color:#000;border:1px solid #000;}
.menu ul ul{}
.menu ul ul li {clear:both;text-align:left;font-size:12px;}
.menu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;}
.menu ul ul li a:hover{border:0;background:#fafafa;border-bottom:1px solid #fff;}
</style>
</head>

<body>

<div class="menu">
<ul>
<li><a href="#">XHTML/CSS
</a>

<ul>
<li><a href="#">标准</a></li>
<li><a href="#">教程</a></li>
<li><a href="#">技术文章</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">布局教程专题</a></li>
<li><a href="#">CSS菜单</a></li>
<li><a href="#">浏览器兼容</a></li>
<li><a href="#">滚动条相关</a></li>
<li><a href="#">圆角矩形专题</a></li>
<li><a href="#">CSS特效欣赏专题</a></li>
</ul>

</li>
<li><a href="#">07艺术
</a>

<ul>
<li><a href="#">文字</a></li>
<li><a href="#">文字</a></li>
</ul>

</li>
<li><a href="#">Javascript
</a>

<ul>
<li><a href="#">JSON</a></li>
<li><a href="#">技术文章</a></li>
</ul>

</li>
<li><a href="#">DOM</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">正则表达式
</a>

<ul>
<li><a href="#">正则表达式简介</a></li>
<li><a href="#">正则表达式之道</a></li>
</ul>

</li>
<li><a href="#">文字</a></li>
<li><a href="#">文字</a></li>
<li><a href="#">文字
</a>

<ul>
<li><a href="#">HP</a></li>
<li><a href="#">ASP</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Dreamweaver</a></li>
</ul>

</li>
</ul>
</div>
</body>
</html>

已赞过 已踩过<

评论收起

淘宝

广告2024-09-14

参赛成功即有奖励，最高赢5万元税后现金红包!优秀选手还有媒体曝光和招聘内推机会!时不我待!还不参与进来!即刻登录点击报名

jianghu.taobao.com

宅男拉基
2011-11-26 · TA获得超过106个赞

知道答主

回答量：91

采纳率：0%

帮助的人：18.8万

我也去答题访问个人页

关注

展开全部

设置给大div一个ID，然后，导航的每一个都有li里面在签到DIV和UL，然后比如
1 2 3 4
1.1 2.1 3.1
1.2 2.2
1.3

等等以此类推，做的时候，给2和3还有4LI厉害的DIV设置成display:none;
这样方便做第一个二级导航的样式
等第一个样式做好了，在去做其他二级导航的样式只是每个LI下面的DIV下的LI做好定位就好了，最后加上JS，控制最外层的LI下面的DIV滑动效果就好了，滑动到当前LI的时候，给下面的DIV加上某个样式，display:black;这样就打开了二级导航，所以就会出现下拉菜单

是在不懂的话124515420

已赞过 已踩过<

评论收起

guolixin68
2011-11-26 · 超过51用户采纳过TA的回答

知道小有建树答主

回答量：207

采纳率：0%

帮助的人：123万

我也去答题访问个人页

关注

展开全部

用jquery就更好了，代码会少的很多。$(function(){$("li").mouseover(function(){$(this).show()})})就ok了具体问题群探讨66983836

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

震惊!AI如何重新定义PPT制作流程?

海量精美模板，风格场景任意选用，一键AI生成PPT，契合主题内容，生成大纲，智能排版AI润色扩写!立即体验

b.quark.cn广告

淘宝网换肤!就等你来!

参赛成功即有奖励，最高赢5万元税后现金红包!优秀选手还有媒体曝光和招聘内推机会!时不我待!还不参与进来!即刻登录点击报名

jianghu.taobao.com广告

css导航栏鼠标hover的时候就出现下拉菜单 怎么做的？

您可能关注的内容

其他类似问题

为你推荐：

css导航栏鼠标hover的时候就出现下拉菜单怎么做的？