DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 酷酷的變色菜單
酷酷的變色菜單
編輯:布局實例     

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved