HTML/CSS实现下拉菜单

来源:互联网 发布:写英语论文的软件 编辑:程序博客网 时间:2024/03/28 23:14


HTML部分:

<body>    <div id="nav">        <ul>            <li><a href="#">首页</a></li>            <li><a href="#">课程大厅</a>                <ul>                    <li><a href="#">JavaScript</a></li>                    <li><a href="#">Jquery</a></li>                    <li><a href="#">Ajax</a></li>                    <li><a href="#">AjaxAjaxAjaxAjax</a></li>                </ul>            </li>            <li><a href="#">学习中心</a>                <ul>                    <li><a href="#">JavaScript</a></li>                    <li><a href="#">Jquery</a></li>                    <li><a href="#">Ajax</a></li>                    <li><a href="#">AjaxAjaxAjaxAjax</a></li>                </ul>            </li>            <li><a href="#">经典案例</a></li>            <li><a href="#">关于我们</a></li>        </ul>    </div></body>

CSS部分:

*{    margin:0;    padding:0;}#nav{    background-color: #ccc;    width: 600px;    height: 40px;    margin:0 auto;}ul li{    list-style: none;    float: left;    /*width:90px;*/    /*padding:0 10px;*/    line-height: 40px;    text-align: center;    position: relative;}a{    padding:0 10px;    text-decoration: none;    color: #000;    display: block;//块级元素    height:40px;}a:hover{    color: #fff;    background-color: #666;}ul li ul li{    float: none;    background-color: #eee;    margin-top:2px;}ul li ul{    position:absolute;    left: 0;    top:40px;    display: none;}ul li ul li a:hover{    background-color: #06F;}ul li:hover ul{    display: block;}


0 0
原创粉丝点击