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

2020-03-24 19:16:14

字体：大中小

来源：转载

供稿：网友

一直以来，我们大多使用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
li a href="#" Item 1 /a /li li
a href="#" Menu Item /a ul
li a href="#" item /a /li li
a href="#" item /a ul
li a href="#" menu item /a /li li a href="#" menu item /a /li
/ul
/li li
a href="#" item /a ul
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
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 script language="Javascript"
var now = new Date();
document.write(" img src='/uploads/allimg/190427/1106412K6-0.jpg AID=-1 refer="+escape(document.referrer)+" rand="+ now.getTime() + " cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'
/script
noscript
img src="https://cdn14.x6kj.com/uploads/allimg/190427/1106412K6-0.jpg AID=-1 refer=noscriptcounter cur=noscriptcounter" border='0' width='0' height='0'/
/noscript 本文作者:html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：html怎么引用css样式？html引用css文件的三种方法介

下一篇：CSS中的选择符