javaScript基础练习题-下拉框制作(CSS)

http://www.imooc.com/video/155

慕课网的视频,直接上代码

DOCTYPE hmtl>
<html>
    <head>
        <meta charset="utf-8" />
        <title>
            
        title>
        <style type="text/css">
            * {
      
                margin: 0px;
                padding:0px;
            }
            #nav{
      
                background-color: #eee;
                width: 600px;
                height: 40px;
                margin: 0 auto;
                text-align:center;
                }
            ul{
      list-style:none }
            ul li{
      float: left; line-height:40px; text-align: center;position: relative;}
            a {
      
                text-decoration: none;
                display:block;
                padding: 0 10px;
            }
            a:hover{
      
                color: #fff;background-color: #666;
            }
            /*这句的意思是当鼠标滑到ul li 上方时当前的ul li ul显示 */
            ul li:hover ul{
      
                display: block;
            }
            ul li ul li {
      
                float: none;background-color: #eee;margin-top: 2px;
            }
            ul li ul {
      
                /*绝对定位必须何left,top等组合使用,top:40px,是因为其父亲li的lineheight是40px;*/
                position: absolute;left: 0px;top:40px;display: none;
            }
            
        style>
              
    hean>
    <body>
        <div id="nav">
            <ul>
                <li><a href="#">首页a>li>
                <li><a href="#">课程大厅a>
                    <ul>
                        <li><a href="#">javascripta>li>
                        <li><a href="#">JQuerya>li>
                    ul>
                    
                li>    
                <li><a href="#">学习中心a>li>  
                <li><a href="#">经典案例a>
                    <ul>
                        <li><a href="#">BBSa>li>
                        <li><a href="#">newsSystemnewsSystema>li>
                    ul>
                li>
                <li><a href="#">关于我们a>li>
                
                
            ul>
            
        div>
            
        
    body>
         
html>

 

转载于:https://www.cnblogs.com/rocky-AGE-24/p/5023792.html

你可能感兴趣的:(javascript)