手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >酷酷的变色菜单
酷酷的变色菜单
摘要:XHTML1.0Shell-StrictSpecificationul{margin:0;padding:0;background-colo...

<!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 debug代码

css3隔行变换色实现示例

完全css弹出菜单

用css3仿造window7的开始菜单

CSS导航菜单制作教程

用CSS3打造独具创意的动画菜单效果

网页菜单详解

纯CSS定义双色文字

10个 DIV+CSS常见错误

css 文本两端对齐应用实例

精品推荐
分类导航