欢迎来到山村网

酷酷的变色菜单

2019-03-28 23:59:49浏览:489 来源:山村网   
核心摘要:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/strict.dtdhtml xmlns=http://www.w3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> XHTML 1.0 Shell - Strict Specification </title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<style type='text/css'>
ul {
margin: 0;
padding: 0;
background-color: #eee;
width: 100px;
list-style: none;
font: 13px/130% Verdana,Arial,Helvetica,Sans-Serif;
position:relative;
}
li {padding-right:5px}

ul li a {
display: block;
background-color: #eee;
text-indent: 5px;
height: 20px;
line-height: 20px;
color: #000;
text-decoration: none;
}

ul li a:hover {
background-color: #ddd;
}

span {
visibility:hidden;
position:absolute;
width:5px;
height:120px;
right:0;
top:0
}
span.a {background:red;}
span.b {background:green;}
span.c {background:blue;}
span.d {background:yellow;}
span.e {background:pink;}
span.f {background:orange;}

ul li a:hover span {visibility:visible}


</style>
</head>
<body>
<ul>
<li><a href='HTTP://3LIAN.COM'>3LIAN.COM<span class="a"></span></a></li>
<li><a href='#'>3LIAN.COM<span class="b"></span></a></li>
<li><a href='#'>3LIAN.COM<span class="c"></span></a></li>
<li><a href='#'>3LIAN.COM<span class="d"></span></a></li>
<li><a href='#'>3LIAN.COM<span class="e"></span></a></li>
<li><a href='#'>3LIAN.COM<span class="f"></span></a></li>
</ul>
</body>
</html>

(责任编辑:豆豆)
下一篇:

CSS:div 实现长英文字母自动换行CSS

上一篇:

让网站变成黑白的css代码

  • 信息二维码

    手机看新闻

  • 分享到
打赏
免责声明
• 
本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们 xfptx@outlook.com