极客观点
项目管理
HarmonyOS
问题描述
下拉菜单里li的第一个和ul的同级元素重叠
问题出现的环境背景及自己尝试过哪些方法
尝试过加定位无果
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>小米商城 - 小米 MIX 3、小米 8、红米 6 Pro 、小米电视官方网站</title>
<link rel="shortcut icon" href="https://www.mi.com/favicon.ico" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- 顶部 -->
<div class="topbar">
<!-- 顶部容器 -->
<div class="container">
<!-- 导航 -->
<div class="topbar-nav">
<a href="#">小米商城</a> <span>|</span>
<a href="#">MIUI</a><span>|</span>
<a href="#">IoT</a><span>|</span>
<a href="#">云服务</a><span>|</span>
<a href="#">金融</a> <span>|</span>
<a href="#">有品</a><span>|</span>
<a href="#">小爱开放平台</a><span>|</span>
<a href="#">政企服务</a><span>|</span>
<a href="#">下载 app</a> <span>|</span>
<a href="#">Select Region</a><span>|</span>
</div>
<!-- 导航 Over -->
<!-- 购物车 -->
<div class="topbar-cart">
<a href="#">购物车<span>(0)</span></a>
</div>
<!-- 购物车 Over -->
<!-- 消息信息 -->
<div class="topbar-info">
<span class="user-dropdown">
<a href="#">两点三横</a>
<ul>
<li><a href="#">个人中心</a></li>
<li><a href="#">评价晒单</a></li>
<li><a href="#">我的喜欢</a></li>
<li><a href="#">小米账户</a></li>
<li><a href="#">退出登录</a></li>
</ul>
</span>
<span>|</span>
<a href="#">注册</a><span>|</span>
<a href="#" class="sep">消息通知</a><span>|</span>
</div>
<!-- 消息信息 Over -->
</div>
<!-- 顶部容器 Over -->
</div>
<!-- 顶部 Over -->
</body>
</html>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;
}
你期待的结果是什么？实际看到的错误信息又是什么？
不重叠 为什么会出现重叠的原因 感谢
还有个问题：网页放大之后 右上角会出现大片白色背景
html5
重叠问题：首先 .user-dropdown 下的a标签是浮动的，接着ul是position定位的，ul就会脱离文档流，而且top和left值也没有指定，所以会占据在本该在的位置（就是父标签span.user-dropdown的位置，同时因为脱离文档流，所以两点三横这个a标签不会把ul挤下去），所以ul和两点三横a标签重合了，ul下的第一个li和两点三横a标签重合其实就是ul和两点三横a标签重合的原由
放大后留白问题：把给topbar的background:#333333给container就好，放大后我看到topbar的宽度很小，并没有100%占据本行（至于原因我还没闹明白）