标题会闪,问题出在哪里?

标题会闪,问题出在哪里?

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
        *{margin:0;padding:0;}
        .nav{width:1100px; height:100px;
            background:black;
            position: absolute;
            top: 50%;
            left:50%;
            margin-top:-50px ;
            margin-left:-550px;
        }
        .image{
            width:300px;
            height:100px;
            float:left;
            overflow:hidden;
        }
        .image:hover{
            cursor: pointer;
        }
        .big{
            color:#fff;
            float:right;
            padding-right:50px;
            overflow:hidden;
        }
        .div1{
            display:inline-block;
            line-height:100px;
            margin:0 25px;
        }
        .div2:hover +ul{
            display:block;
        }
        ul{
            display:none;
            color:black;
            line-height:20px;
        }
  </style>
</head>
<body>
    <div class="nav">
        <div class="image"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></div>
        <div class="big">
            <div class="div1">
                <div class="div2">课程</div>
                <ul>
                    <li>1111</li>
                    <li>2222</li>
                    <li>3333</li>
                </ul>
            </div>
            <div class="div1">
                <div class="div2">职业路径</div>
                <ul>
                    <li>1111</li>
                    <li>2222</li>
                    <li>3333</li>
                </ul>
            </div>
            <div class="div1">
                <div class="div2">实战</div>
                <ul>
                    <li>1111</li>
                    <li>2222</li>
                    <li>3333</li>
                </ul>
            </div>
            <div class="div1">
                <div class="div2">猿问</div>
                <ul>
                    <li>1111</li>
                    <li>2222</li>
                    <li>3333</li>
                </ul>
            </div>
            <div class="div1">
                <div class="div2">手记</div>
                <ul>
                    <li>1111</li>
                    <li>2222</li>
                    <li>3333</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

你好,按照上个同学所说的修改之后,鼠标移出的话,位置会有稍微的移动,这里由于ul的宽度比div1的要宽,然后div1的宽度被撑开了,建议:可以给div1设置一个宽度比如70px;可以查看下效果,不过,这里下拉显示的话,可以使用定位来实现,给ul设置绝对定位,使其脱离文档流,就不会对父级造成影响了。

若能帮助到你,望采纳。

祝学习愉快!

  • 怪狄狄 提问者 #1
    div1是行内块元素那么就是ul标签是块元素那也应该是换行显示啊 为什么编译器会是同行显示
    2018-09-19 17:57:49
好帮手慕美 2018-09-19 16:34:52

虽然把div1变成行内块元素,但是ul是块级元素,当鼠标移入时,其他的导航内容会被顶下去,

这里不需要把div1变成行内块元素,直接对div1设置左浮动就可以实现效果了。

如果帮到了你,欢迎采纳!

  • 提问者 怪狄狄 #1
    我在div1换成了左浮动测试可以实现效果了,然后我再在后面加上了overflow:hidden;,让后面的元素不受浮动影响,也一样可以实现效果。这个是因为什么呢?
    2018-09-19 18:01:58
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师