如何利用纯CSS制作二级或多级导航菜单

要求1:纯CSS制作2:能实现二级或多级3:写出制作原理(非常重要!)4:禁止CTR+C-—>CTR+V而不做任何解释提不出自己观点者5:如果满意再追加分数6:以后再补充... 要求
1: 纯CSS制作
2:能实现二级或多级
3:写出制作原理(非常重要!)
4:禁止CTR+C-—>CTR+V而不做任何解释提不出自己观点者
5:如果满意再追加分数
6:以后再补充
纯CSS的确可以实现想要的结果,只不过,我不明白其原理
展开
 我来答
美杜莎成人用品
推荐于2018-04-04 · TA获得超过2376个赞
知道小有建树答主
回答量:387
采纳率:100%
帮助的人:101万
展开全部

本人亲测下面这些代码是可以实现二级或多级导航菜单的。

 

 

<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>

博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具,它提供了4种AI制作PPT的方式,包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT,一站式集成多种AI生成PPT的方式,可满足办公用户的不同需求和使用场景。ai生... 点击进入详情页
本回答由博思aippt提供
fantasy_wl
2007-12-20 · TA获得超过904个赞
知道小有建树答主
回答量:1287
采纳率:100%
帮助的人:1355万
展开全部
应该要配合部分JS吧
纯CSS好象达不到2级和多级菜单的效果
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
daizi82
推荐于2016-10-01 · TA获得超过134个赞
知道小有建树答主
回答量:139
采纳率:0%
帮助的人:121万
展开全部
<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>
以上是代码
将<a>作为块处理,结合包含选择符,这就做出效果来了。
另外一提,各个浏览器的解释是不一样,所以就必须解决这些臭虫,利用Hack技术。这个我不多说了,你自己百度“hack”就知道了。
以上是原理。
你要具体说代码的含义?自己对着css样式表手册看吧。
当然你也可以直接套用以上代码。
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式