「已注销」 2022-01-25 17:00 采纳率: 85.7%
浏览 37

鼠标悬停的时候出现二级菜单，二级菜单的盒子和功能都能实现，但是它里面的字是错版的。

如下图，点击“售后”按钮的时候会出现下面的二级菜单，二级菜单出现的位置是对的，点击也能出现相应的功能，但是那三行文字错版了，最下面那行字都跑出盒子外面了。求解。

img

html代码部分


<div class="header">
    <div class="wrap"><!--
        <ul class="header-left">
            <li><a href="#">商城</a><span>|</span></li>
            <li><a href="#">美</a><span>|</span></li>
            <li><a href="#">云服务</a><span>|</span></li>
            <li><a href="#">智能生活</a><span>|</span></li>
            <li><a href="#">下载</a><span>|</span></li>
            <li><a href="#">协议</a><span>|</span></li>
        </ul>
        <ul class="header-right">
            <li><a href="#">登录</a><span>|</span></li>
            <li><a href="#">注册</a><span>|</span></li>
            <li><a href="#">消息通知</a><span>|</span></li>
            <li><a href="#"><i class="inconfont"></i>购物车</a><span>|</span></li>
        </ul>-->
        <div class="weather">
            <iframe width="150" scrolling="no" height="50" frameborder="0"
                    allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=1&num=1">
            </iframe>
        </div>

        <div class="header-right1">
            <a href="#">添加微信
            <div class="erweima">
                <img src="img/10.jpg">
            </div>
            </a>
        </div>


    </div>
</div>

<div class="nav">
    <div class="wrap">
        <div class="logo">
            <a href="#">
                <img src="img/10.jpg">
            </a>
        </div>
        <div class="nav-bar">
            <ul>
                <li><a href="#">打印机</a>
                    <div class="nav-bar-list">
                        <div class="wrap">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/2.jpg">
                                        </div>
                                        <p>i4型号打印机</p>
                                        <p class="i">4560元</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/2.jpg">
                                        </div>
                                        <p>i4型号打印机</p>
                                        <p class="i">4560元</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/2.jpg">
                                        </div>
                                        <p>i4型号打印机</p>
                                        <p class="i">4560元</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/2.jpg">
                                        </div>
                                        <p>i4型号打印机</p>
                                        <p class="i">4560元</p>
                                    </a>
                                </li>

                            </ul>
                        </div>

                    </div>
                </li>
                <li><a href="#">门禁系统</a></li>
                <li><a href="#">收银系统
                <div class="nav-bar-list">
                        <div class="wrap">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/2.jpg">
                                        </div>
                                        <p>i4型号打印机</p>
                                        <p class="i">4560元</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/3.jpg">
                                        </div>
                                        <p>i4型号打印机</p>
                                        <p class="i">4560元</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/4.jpg">
                                        </div>
                                        <p>i4型号打印机</p>
                                        <p class="i">4560元</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/5.jpg">
                                        </div>
                                        <p>i4型号打印机</p>
                                        <p class="i">4560元</p>
                                    </a>
                                </li>

                            </ul>
                        </div>

                    </div></a></li>
                <li><a href="#">打印机</a></li>
                <li class="xiaLaL" ><a href="#">售后
                    <div id='menu'>
                        <dl>
                            <dt class="dt1"><a href="#">i4打印机</a></dt>
                            <dl style="display:none">
                                <dd class="dd1"><a href="#" id='addA' >1.打印机使用步骤</a></dd>
                                <dd class="dd1"><a href="#" >2.打印机常见问题</a></dd>
                                <dd class="dd1"><a href="#" >3.修改用户</a></dd>
                            </dl>
                        </dl>
                        <dl>
                            <dt class="dt1"><a href="#">权限管理</a></dt>
                            <dl style="display:none">
                                <dd class="dd1"><a href="#" id='addB' >1.添加用户</a></dd>
                                <dd class="dd1"><a href="#" >2.删除用户</a></dd>
                                <dd class="dd1"><a href="#" >3.修改用户</a></dd>
                            </dl>
                        </dl>
                        <dl>
                            <dt class="dt1"><a href="#">权限管理</a></dt>
                            <dl style="display:none">
                                <dd class="dd1"><a href="#" id='addC' >1.添加用户</a></dd>
                                <dd class="dd1"><a href="#" >2.删除用户</a></dd>
                                <dd class="dd1"><a href="#" >3.修改用户</a></dd>
                            </dl>
                        </dl>
                    </div>
                </a>
                </li>
                <li><a href="guanyu.html" target="_blank">关于我们</a></li>
            </ul>
        </div>
        <!--<div class="search"></div>                        -->
    </div>
</div>

css部分

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,
button,p,blockquote,th,td{margin: 0;padding: 0;}
body{text-align: center;}
li{list-style-type: none;}
a{text-decoration: none;color: #333}


.header{
    width: 100%;
    line-height: 40px;
    height: 50px;
    background-color: #e0e0e0;
    font-size: 12px;
}
.wrap{
    width: 1226px;
    margin: 0 auto;
}
.header-left{
    float: left;
}
.header-right{
    float: right;
}
.header li{
    float: left;
}
.header a{
    color: #b0b0b0;
    font-size: 12px;
}
.header a:hover{
    color: #fff;
}
.header span{
    color: #424242;
    margin: 0 6px;
}

.nav{
    position: relative;
    width: 100%;
    height: 100px;
//background-color:red;
}
.logo{
    margin-top: 16px;
    float: left;
    width: 66px;
    height: 66px;
    background-color: blue;
    border-radius: 50%;
}
.nav-bar{
    /*float: left;   */
    width:1200px;
    height: 100px;
    line-height: 100px;
    padding-left: 180px;
    box-sizing: border-box;


}
/*.search{
    float: left;
    width: 296px;
    height: 50px;
    background-color: blue;
}   */
.logo img{
    width: 100%;
    border-radius: 50%;
}
.nav-bar>ul>li{
    padding: 0 50px;
    float: left;
}


.nav-bar>ul>li>a:hover{
    color: deepskyblue;
    /*color: #ff6700;*/
}
.nav-bar-list{
    display: none;
    position: absolute;
    left: 0;
    top: 100px;
    width: 100%;
    height: 229px;
    background-color: white;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 3px 4px rgba(0,0,0,.18);
    z-index: 9;
}
.nav-bar li:hover>.nav-bar-list{
    display: block;
}
.nav-bar-list li{
    float: left;
    width: 204px;

    padding-top: 35px;

}
.nav-bar-list li img{
    width: 110px;

}
.nav-img-box{
    margin-left: 10px;
    width: 100%;
    height: 110px;
    border-right: 1px solid #e0e0e0;
    box-sizing: border-box;
    margin-bottom: 20px;
}
.nav-bar-list li:last-child .nav-img-box{
    border-right: none;
}
.nav-bar-list p{
    font-size: 12px;
    line-height: 20px;
}
.i{
    color: red;
}
.banner/*, .banner-box*/{
    width: 100%;
    height: 460px;
    background-color:yellow;
}

.banner-box{
    width: 100%;
    height: 460px;
    background-color: #ff6700;
}
.banner-box>img{
    height: 460px;
}
.container{
    width: 100%;
    height: auto;
    /*background-color: blueviolet;*/
    padding: 4px 0 12px;
}

.home-banner-box{
    width: 100%;
    height: 120px;
    background-color: aqua;
    margin: 22px 0;
}
.title{
    color: #333;
    font-size: 22px;font-weight: 200;
    text-align: left;
    line-height: 58px;
}
.phone-box{
    width: 100%;
    height: 614px;
    background-color: #ff6700;
}
.phone-box-left{
    float: left;
    width: 234px;
    height: 614px;
    background-color: blue;
}
.phone-box-right{
    float: right;
    width: 990px;
    height: 614px;
    background-color: #b0b0b0;

}
.items{
    float: right;
    width: 234px;
    height: 300px;
    background-color: #fff;
    margin-bottom: 14px;
    margin-left: 13px;
}



.qaz{
    background-color: #ff6700;
    height: 600px;
    width: 100%;

}
.video-box li{
    float: left;
    width: 296px;
    height: 285px;
    background-color: #ff6700;
    margin-bottom: 14px;
    margin-left: 14px;

}
.video-box li:first-child{
    margin-left: 0;
}

.video-img{
    width: 296px;
    height: 180px;
    position: relative;
    background-color: aqua;
    z-index: 0;
    transition: all .2s linear;


}

.video-img:hover,.play:hover{
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
    transform: translateY(-2px);
}

.video-img img{
    height: 180px;
    width: 296px;

}

.video-name{
    width: 268px;
    height: 21px;
    margin: 38px auto 6px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}

.play{
    background-color: black;
    position: absolute;
    left: 40px;
    bottom: 30px;

    width: 46px;
    height: 36px;
    /*border: 2px solid #fff;
     box-sizing: border-box;*/
    border-radius: 12px;
    transition: all .2s linear;
}
.play img{
    width:100%;
    height: 36px;
    border-radius: 12px;
}

.weather{
    float: left;
    width: 150px;
    height: 50px;
}
.header-right1{
    margin-top: 5px;

    float: right;
    position: relative;
    height: 50px;
    width: auto;
}
.header-right1 a{
    font-size: 18px;
    color: #424242;
}
.header-right1 a:hover{
    /*background-image:url("img/1.jpg");*/
    color: dodgerblue;
}
.erweima img{
    width: 100px;
    height: 100px;
}
.erweima{

    display: none;
    position: absolute;



}
.header-right1 a:hover>.erweima{
    display: block;
}

.src1{
    position: relative;
}
.src1-box{
    position: absolute;
    left: 40px;
    bottom: 30px;
    width: auto;
    height: 60px;

}

#tan{
    position: fixed;
    top:20%;
    left: 35%;
    /*margin:200px auto;*/
    width:720px;
    height: 480px;
   /* width:720px;
    height: 480px;*/
    background-color: #080808;
    display: none;
    z-index: 99;

}
#videoO{
    /*padding-top: 21px;*/
    padding-top: 27px;
    width:100%;
    height: auto;
}
#cha{
    width: 20px;
    height: 21px;
    margin-top: 6px;
    margin-right: 6px;
    padding-left: 1px;
    /*background-color: dodgerblue;*/
    position: absolute;
    right: 1px;
    top: 1px;

}
#aa{
    color: #E6F0F3;
}
#aa:hover{color: #b0b0b0}




/*
 * 设置outer的样式
 */
#outer{
    /*设置宽和高*/
    width:100%;
    height: 600px;
    /*居中margin: 50px auto;*/

    /*设置背景颜色*/
    /*background-color: greenyellow;*/
    /*设置padding   padding: 10px 0;*/

    /*开启相对定位*/
    position: relative;
    /*裁剪溢出的内容*/
    overflow: hidden;
}

/*设置imgList*/
#imgList{
    /*去除项目符号*/
    list-style: none;
    /*设置ul的宽度*/
    /*width: 2600px;*/
    /*开启绝对定位*/
    position: absolute;
    /*设置偏移量*/
    /*
     * 每向左移动520px，就会显示到下一张图片
     */
    left: 0px;
    z-index: -1;
}

/*设置图片中的li*/
#imgList li{
    /*设置浮动*/
    float: left;
    /*设置左右外边距      margin: 5px 10px;*/

}

/*设置导航按钮*/
#navDiv{
    /*开启绝对定位*/
    position: absolute;
    /*设置位置*/
    bottom: 15px;
    /*设置left值
         outer宽度  520
         navDiv宽度 25*5 = 125
             520 - 125 = 395/2 = 197.5
     * */
    /*left: 197px;*/
}

#navDiv a{
    /*设置超链接浮动*/
    float: left;
    /*设置超链接的宽和高*/
    width: 15px;
    height: 15px;
    /*设置背景颜色*/
    background-color: red;
    /*设置左右外边距*/
    margin: 0 5px;
    /*设置透明*/
    opacity: 0.5;
    /*兼容IE8透明*/
    filter: alpha(opacity=50);
    border-radius: 50%;
}

/*设置鼠标移入的效果*/
#navDiv a:hover{
    background-color: black;
}
#imgList img {

    width:1920px;
    height: 600px;
}

/*飘窗*/
#floatT{width:auto;height: auto;position: fixed;top: 100px;
    /*background-color: lightpink;*/
    z-index: 10;
}
.aA{
    color: crimson;
    position: absolute;
}


/*
#my-menu{
    position: absolute;
    width: auto;
    height: auto;
}*/



/*二级菜单隐藏与显现功能的实现*/
.xiaLaL{
    position: relative;
}
#menu{
    width: 300px;
    height: auto;
    position: absolute;
    /*display: none;*/
    background-color: #b0b0b0;
    /*border-radius: 10%;*/
    text-align: left;
    z-index: 99;
padding: 0;

}
.dt1{

    height: 30px;

}
.dd1{height: 30px}
.xiaLaL:hover>#menu{
    display: block;
}
  • 写回答

4条回答 默认 最新

  • 燕_青 2022-01-25 17:09
    关注

    你是不是设置二级菜单的div的高度了

    评论

报告相同问题？

问题事件

  • 修改了问题 1月26日
  • 创建了问题 1月25日

悬赏问题

  • ¥100 关于python拓展屏使用pyautogui.screenshot无法截图的问题
  • ¥15 有偿求答 无导出权限怎么快速导出企业微信微文档
  • ¥15 求解答，怎么数码管中这么加入闹钟或者传感器，这应该怎么加入相应的代码
  • ¥15 scottplot5
  • ¥30 想问问这个建模怎么编程没有思路
  • ¥15 关于imageENview（ImageEN)中新建图层并根据鼠标位置添加图标
  • ¥100 用两台电脑局域联网进行MT5的EA参数优化，但是连接不上，日志提示：
  • ¥15 FastAPI报错: AsyncSession不是有效Pydantic类型
  • ¥50 这Mac系统提示虚拟内存不足，怎么解决
  • ¥15 Rs232电路无法收发数据，求帮助