关于父元素撑开问题

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
      }
 
.big{
width: 160px;
height: 186px;/*这里固定高度为186px，为什么鼠标移动上去，display隐藏的还可以通过hover出现了？ 高度都定小了，为什么它还可以撑开啊？*/
position: fixed;
top: 50%;
left: 0;
margin-top:-93px;
font-family: "微软雅黑"；
 
}
.a{
width: 160px;
height: auto;
background: #333;
border: 1px solid #FFF;
line-height: 60px;
text-align: center;
color:white;
}
.a ul{
width: 160px;
height: auto;
background: #FFF;
/*position: relative;
left: 160px;*/
}
.a ul li{
width: 160px;
height: 60px;
border-bottom: 1px dashed red;
color: red;
text-align: center;  
}
.a ul{
display: none;
}
.a:hover ul{
display: block;
}
</style>
</head>
<body>
    <div class="big">
        <div class="a">
            第一个标题
            <ul>
                <li>a二级标题</li>
                <li>a二级标题</li>
                <li>a二级标题</li>
            </ul>
        </div>
        <div class="a">
            第二个标题
            <ul>
                <li>a二级标题</li>
                <li>a二级标题</li>
                <li>a二级标题</li>
            </ul>
        </div>
        <div class="a">
            第三个标题
            <ul>
                <li>a二级标题</li>
                <li>a二级标题</li>
                <li>a二级标题</li>
            </ul></div>
    </div>
</body>
</html>

晚小鱼 2017-04-19

源自：CSS定位（position） 4-2 侧边栏导航跟随案例

125

收起

1回答

小于飞飞 2017-04-20 11:33:50

你好，虽然设置了height:值，但是由于.a:hover ul 会显示出来的，其实内容已经超出了高度，所以在网页布局有溢出的设置overflow：hidden ，如设置这个，就好隐藏掉高度以外的内容了。希望对你有帮助，祝学习愉快。

收起回答

提问者晚小鱼 #1

老师你好，“虽然设置了height:值，但是由于.a:hover ul 会显示出来的，其实内容已经超出了高度”这一句我听懂了，既然超过高度了，为什么鼠标指上去还会显示啊？

2017-04-20 11:41:27
小于飞飞回复提问者晚小鱼 #2

你好，根据代码情况说明，可以试一试，子元素的高和宽大于父元素的高宽时，子元素会显示出来，不会自动受父元素的高宽的限制，所以在显示的内容上，鼠标移动上去，可以触发相应的hover, 并将ul显示不来。

2017-04-20 14:02:16