Raleigh_Ren 2022-03-11 19:17 采纳率: 50%
浏览 47
已结题

导航栏二级标题用hover显示时候有溢出情况

为什么这里的二级标题会有一个溢出现象啊,宽度溢出了
源码:
*{
            margin: 0;
            padding: 0;
        }

        body{
            background-color: #bfa;
        }

        li{
            list-style: none;
        }

        .header{
            height: 30px;
            width: 1390px;
            background-color: yellow;
            margin: 0 auto;
        }

        .header li{
            float: left;
            line-height: 30px;
            width: 130px;
            text-align: center;
            margin: 0 10px;
            /* background-color: red; */
        }

        .header li a{
            text-decoration: none;
            color: black;
            text-align: center;
        }

        .one .two{
            display: none;
        }

        .header li:hover{
            background-color: white;
        }

        .header li a:hover{
            color: red;
        }

        .one li:hover .two{
            display: block;
        }


<body>
    <div class="header">
        <ul class="one">
            <li><a href="#">海外</a></li>
            <li><a href="#">登录,注册</a></li>
            <li><a href="#">我的订单</a></li>
            <li>
                <a href="#">我的京东</a>
                <ul class="two">
                    <li><a href="#">待处理订单</a></li>
                    <li><a href="#">返修退换货</a></li>
                    <li><a href="#">降价商品</a></li>
                    <li><a href="#">我的京东</a></li>
                </ul>
            </li>
            <li><a href="#">京东会员</a></li>
            <li>
                <a href="#">企业采购</a>
                <ul class="two">
                    <li><a href="#">企业购</a></li>
                    <li><a href="#">工业品</a></li>
                </ul>
            </li>
            <li><a href="#">客户服务</a></li>
            <li><a href="#">网站导航</a></li>
            <li><a href="#">手机京东</a></li>
        </ul>
    </div>
</body>
运行结果

img

img

我尝试过给二级标题的li转换成块模型,然后再设置宽度,但是没有改变
  • 写回答

2条回答 默认 最新

  • 你好!机器人 2022-03-11 19:30
    关注

    这里有个margin

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 3月26日
  • 已采纳回答 3月18日
  • 创建了问题 3月11日

悬赏问题

  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏!微信开发者工具报错,求帮改
  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题:需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效