纯CSS下拉菜单

发布时间:2009-3-2浏览:

核心提示:纯CSS下拉菜单

阅读 编辑 运行 复制  保存<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>纯CSS下拉菜单</title>
    <style type="text/css">

        body
        {
            font-family: verdana, sans-serif;
            font-size: small;
        }
        #navigation, #navigation li ul
        {
            padding: 0;
            margin: 0;
            list-style-type: none;
        }
        #navigation li
        {
            float: left;
            text-align: center;
            position: relative;
        }
        #navigation li a:link, #navigation li a:visited
        {
            display: block;
            text-decoration: none;
            color: #000;
            width: 120px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #fff;
            border-width: 1px 1px 0 0;
            background: #c5dbf2;
            padding-left: 10px;
        }
        #navigation li ul
        {
            display: none;
        }
        /* 以下只支持非IE6浏览器 */#navigation li:hover a
        {
            color: #fff;
            background: #2687eb;
        }
        #navigation li:hover ul
        {
            display: block;
            position: absolute;
            top: 40px;
            margin-top: 1px;
            left: 0;
            width: 120px;
        }
        #navigation li:hover ul li a
        {
            display: block;
            background: #c5dbf2;
            color: #000;
            height: 20px;
            line-height: 20px;
            padding: 5px 10px;
            width: 110px;
        }
        #navigation li:hover ul li a:hover
        {
            color: #fff;
            background: #6b839c;
        }
   
</style>
</head>
<body>
<ul id="navigation">
    <li><a href="#">栏目1</a>
    <ul>
        <li><a href="#">栏目1-->菜单1</a></li>
        <li><a href="#">栏目1-->菜单2</a></li>
        <li><a href="#">栏目1-->菜单3</a></li>
        <li><a href="#">栏目1-->菜单4</a></li>
    </ul>
    </li>
    <li><a href="#">栏目2</a>
    <ul>
        <li><a href="#">栏目2-->菜单1</a></li>
        <li><a href="#">栏目2-->菜单2</a></li>
        <li><a href="#">栏目2-->菜单3</a></li>
        <li><a href="#">栏目2-->菜单4</a></li>
        <li><a href="#">栏目2-->菜单5</a></li>
    </ul>
    </li>
    <li><a href="#">栏目3</a>
    <ul>
        <li><a href="#">栏目3-->菜单1</a></li>
        <li><a href="#">栏目3-->菜单2</a></li>
        <li><a href="#">栏目3-->菜单3</a></li>
    </ul>
    </li>
</ul>
</body></html>


前一篇:定做程序设计
后一篇:CSS基础教程 关于网页图片的属性
分享到: