两个menu重叠 css,关于下拉菜单重叠的问题

问题描述

下拉菜单里li的第一个和ul的同级元素重叠

问题出现的环境背景及自己尝试过哪些方法

尝试过加定位无果

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

HTML

小米商城 - 小米 MIX 3、小米 8、红米 6 Pro 、小米电视官方网站

小米商城 |

MIUI|

IoT|

云服务|

金融 |

有品|

小爱开放平台|

政企服务|

下载 app |

Select Region|

购物车(0)

两点三横

• 个人中心
• 评价晒单
• 我的喜欢
• 小米账户
• 退出登录

|

注册|

消息通知|

CSS

* {

margin: 0;

padding: 0;

}

body {

font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",

"Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;

height: 8000px;

}

a {

text-decoration: none;

}

.topbar {

background: #333333;

}

.container {

width: 1226px;

/* 居中 */

margin: 0 auto;

}

.container::before,

.container::after {

content: "";

display: table;

}

.container::after {

clear: both;

}

.topbar a {

color: #b0b0b0;

font-size: 12px;

}

.topbar a:hover {

color: white;

}

.topbar-nav {

height: 40px;

line-height: 40px;

float: left;

font-size: 0px;

}

.topbar-nav span {

font-size: 12px;

color: #424242;

font-family: sans-serif;

margin: 0.5em;

}

.topbar-info,

.topbar-cart {

float: right;

}

.topbar-cart a {

display: block;

height: 40px;

line-height: 40px;

text-align: center;

width: 120px;

background-color: #424242;

}

.topbar-cart a:hover {

color: #ff6700;

background-color: #fff;

}

.topbar-cart span {

font-size: 12px;

margin-left: -4px;

}

.topbar-info a {

float: left;

padding: 0px 5px;

height: 40px;

line-height: 40px;

}

.topbar-info {

margin-right: 15px;

}

.topbar-info span {

float: left;

font-family: sans-serif;

color: #424242;

height: 40px;

line-height: 40px;

}

.topbar-info .sep {

padding: 0 10px;

}

.user-dropdown{

display: inline-block;

width: 130px;

}

.user-dropdown ul{

list-style-type: none;

display: none;

position: absolute;

}

.user-dropdown:hover{

background: #fff;

}

.user-dropdown:hover ul{

display: block;

}

你期待的结果是什么？实际看到的错误信息又是什么？

不重叠 为什么会出现重叠的原因 感谢

还有个问题：网页放大之后 右上角会出现大片白色背景