shaokel 2019-04-25 11:39 采纳率: 95.2%
浏览 572
已采纳

新人求助！！做网页做了一个二级菜单，但是一级菜单放不进去盒子，二级菜单不对齐一级菜单

我的style里面的代码是外部镶入的，并不是直接写上去的

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单</title>
    <script src="../jquery-1.11.1.min.js"></script>
    <style>
    *{/*清除页面原有的边距*/
        margin: 0;
        padding: 0;
    }   

    .wrap{/*定义盒子框架*/
        width:450px;
        height:30px;
        border:1px solid red; 
        margin:100px auto;    /*盒子居中*/ 
    }

    div ul{/*去除列表小圆点*/
        list-style: none;
    }

    div ul li{
        float:left;
        height:50px;
        text-align:center;
    }

    div ul li a{/*一级菜单*/
        text-decoration: none;/*去除下划线*/
        background-color: lightpink;/*块级元素颜色*/
        width:120px;
    }

    div ul li ul li a{/*二级菜单*/  
        display: block;/*让a标签转换为块级元素*/
    }

    div ul li a:hover{/*鼠标悬停时块级元素变橙色*/
        background-color: orange;
    } 

    div ul li ul li{/*二级菜单不浮动*/
        float: none;
    }
</style>
</head> 

<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="#">一级菜单1</a>
                <ul style="display: none;">
                    <li><a href="">a</a></li>
                    <li><a href="">b</a></li>
                    <li><a href="">c</a></li>
                </ul>
            </li> 
            <li>
                <a href="#">二级菜单1</a>
                <ul style="display:none;">
                    <li><a href="">d</a></li>
                    <li><a href="">e</a></li>
                    <li><a href="">f</a></li>
                </ul>
            </li>
            <li>
                <a href="#">三级菜单1</a>
                <ul style="display: none;">
                    <li><a href="">g</a></li>
                    <li><a href="">h</a></li>
                    <li><a href="">i</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
    <script>

//      给一级菜单li设置鼠标移入事件，二级菜单显示
        $('.wrap>ul>li').mouseover(function(){
            $(this).children('ul').show();//show本质上还是更新display属性为block
        });

//      给一级菜单li设置鼠标离开事件，二级菜单隐藏
        $('.wrap>ul>li').mouseout(function(){
            $(this).children('ul').hide();//hide本质上还是更新display属性为none
        });

    </script>
</html>
  • 写回答

1条回答 默认 最新

  • 老杨、 2019-04-25 12:01
    关注
    <style>
*{/*清除页面原有的边距*/
    margin: 0;
    padding: 0;
}   

.wrap{/*定义盒子框架*/
    width:450px;
    min-height:30px;
    _height:30px;
    border:1px solid red; 
    margin:100px auto;    /*盒子居中*/ 
    overflow: hidden;
}

div ul{/*去除列表小圆点*/
    list-style: none;
    height:100%;
}

div ul li{
    float:left;
    height:50px;
    text-align:center;
     height:100%;
}

div ul li a{/*一级菜单*/
    text-decoration: none;/*去除下划线*/
    background-color: lightpink;/*块级元素颜色*/
    width:120px;
    display:block;
}

div ul li ul li a{/*二级菜单*/  
    display: block;/*让a标签转换为块级元素*/
    border-top:1px solid yellow;
}

div ul li a:hover{/*鼠标悬停时块级元素变橙色*/
    background-color: orange;
} 

div ul li ul li{/*二级菜单不浮动*/
     height:100%;
    float: none;
}

    是你想要的么

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 已采纳回答 10月9日

悬赏问题

  • ¥15 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！