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 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络,如何解决?
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构,按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分