不用script仅用css编写无限分级弹出菜单

一直以来,我们大多使用js来实现弹出菜单,可是根据 w3c 的CSS标准,根本就没有这个必要。只需要简单得使用css+html就可以做出一个无限分级的弹出菜单。

没错,就是利用 Element:hover 这个伪类。

注意,浏览这个例子,你必须使用标准浏览器,例如 Mozilla Firefox/ Opera 7.5

IE 不行!!

<!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>
<title>css menu</title>
<style type=”text/css”>
/*<![CDATA[*/
ul.menu
{
width:180px;
cursor:hand;
list-style-type:none;
border:1px solid #cccccc;
padding:0px;
margin:0px;

}

ul.menu li
{
width:100%;
display:block;
position:relative;

}

ul.menu li   a
{

background-color:#06829C;
color:#ffffff;
width:100%;
display:block;
font-size:9pt;
padding:2px;
padding-left:10px;
}

ul.menu li ul.menu
{
display:none;
width:190px;
position:absolute;
z-index:1000;
left:80%;
top:-10px;
}

ul.menu li:hover > a
{
width:100%;
background-color:#64ACF8;
color:#ffffff;
}

ul.menu li:hover > ul.menu
{
display:block;
}
/*]]>*/
</style>
</head>

<body>
<ul class=”menu”>
<li><a href=”#”>Item 1</a></li>

<li>
<a href=”#”>Menu Item ></a>

<ul class=”menu”>
<li><a href=”#”>item</a></li>

<li>
<a href=”#”>item ></a>

<ul class=”menu”>
<li><a href=”#”>menu item</a></li>

<li><a href=”#”>menu item</a></li>
</ul>
</li>

<li>
<a href=”#”>item ></a>

<ul class=”menu”>
<li><a href=”#”>menu item</a></li>

<li><a href=”#”>menu item</a></li>

<li><a href=”#”>menu item</a></li>
</ul>
</li>

<li>
<a href=”#”>item ></a>

<ul class=”menu”>
<li><a href=”#”>menu item</a></li>

<li><a href=”#”>menu item</a></li>

<li><a href=”#”>menu item</a></li>

<li><a href=”#”>menu item</a></li>

<li><a href=”#”>menu item</a></li>

<li><a href=”#”>menu item</a></li>

<li><a href=”#”>menu item</a></li>

<li><a href=”#”>menu item</a></li>

<li><a href=”#”>menu item</a></li>

<li><a href=”#”>menu item</a></li>

<li><a href=”#”>menu item</a></li>

<li><a href=”#”>menu item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

转载请注明出处:https://www.onexin.net/do-not-have-the-script-only-css-to-write-unlimited-hierarchical-pop-up-menu/

相关文章:

1、CSS样式编写的规范和常见问题
https://www.onexin.net/css-styles-to-prepare-specifications-and-frequently-asked-questions/

2、最优秀的css样式reset.css
https://www.onexin.net/the-best-css-style-reset/

3、经典DIV + CSS Layout
https://www.onexin.net/classic-div-css-layout/

4、DIV+CSS布局解决IE6、IE7、IE8样式不兼容问题
https://www.onexin.net/divcss-layout-solution-ie6-ie7-ie8-style-incompatibility-issues/

5、CSS如何让图片垂直并水平居中等比缩放?
https://www.onexin.net/div-css-how-to-make-image-vertical-and-align-center-geometric-scaling/

Leave a Reply