DIV+CSS製作二級導覽功能表(縱向)

來源:互聯網
上載者:User
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>製作二級導覽功能表(縱向)</title>    <style type="text/css">        #menu{            width: 100px;            border: 1px solid #999;        }        #menu ul{            margin: 0px;            padding: 0px;            list-style: none;/* 隱藏預設列表符號*/        }        #menu ul li{            background: #06C;            height: 26px;            line-height: 26px;  /*行距*/            text-align: center;            border-bottom: 1px solid #999;            position: relative;        }        a{            display: block;            font-size: 13px;            color: #FFF;            text-decoration: none;/*隱藏超廉價預設底線*/        }        a:hover{            color:#F00;            font-size: 14px;        }        #menu ul li ul{            display: none;/*預設隱藏*/            top:0px;            width: 130px;            border: 1px solid #ccc;            border-bottom: none;            position: absolute;            left: 100px;        }        #menu ul li:hover ul{            display: block;        }        #menu ul li:hover ul li a{            display: block;        }    </style></head><body><div id="menu">    <ul>        <li><a href="#">前端</a>        <ul>            <li><a href="#">HTML5</a></li>            <li><a href="#">CSS</a></li>            <li><a href="#">Javascript</a></li>            <li><a href="#">Ajax</a></li>            <li><a href="#">jQuery</a></li>        </ul>    </li>    <li><a href="#">後台</a>        <ul>            <li><a href="#">Java</a></li>            <li><a href="#">C++</a></li>            <li><a href="#">PHP</a></li>            <li><a href="#">Python</a></li>            <li><a href="#">C#</a></li>        </ul>    </li>        <li><a href="#">行動裝置 App</a>            <ul>                <li><a href="#">Android</a></li>                <li><a href="#">IOS</a></li>            </ul>        </li>    <li><a href="#">資料庫</a>        <ul>            <li><a href="#">Oracle</a></li>            <li><a href="#">MySql</a></li>            <li><a href="#">SqlServer</a></li>            <li><a href="#">MongoDB</a></li>            <li><a href="#">DB2</a></li>        </ul>    </li>    <li><a href="#">作業系統</a>        <ul>            <li><a href="#">Linux</a></li>            <li><a href="#">Unix</a></li>            <li><a href="#">Mac</a></li>            <li><a href="#">Windows</a></li>        </ul>    </li>    <li><a href=
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.