极客观点
项目管理
HarmonyOS
这是没添加绝对定位之前的代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style>
.nav*{margin:0; padding:0;}
.nav li{float:left; list-style:none; position:relative;}
.nav li a{text-decoration:none;}
.nav li ul{display:none;}
.nav li li{float:none;}
/*.nav li ul{position:absolute; left:0; top:100%;}*/
.nav li:hover ul{display:block;}
</style>
<body>
<div class="nav">
<ul>
<li>
<a href="">首页</a>
<ul>
<li><a href="">首页</a></li>
<li><a href="">首页</a></li>
<li><a href="">首页</a></li>
</ul>
</li>
<li>
<a href="">相册</a>
<ul>
<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></li>
</ul>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style>
.nav*{margin:0; padding:0;}
.nav li{float:left; list-style:none; position:relative;}
.nav li a{text-decoration:none;}
.nav li ul{display:none;}
.nav li li{float:none;}
.nav li ul{position:absolute; left:0; top:100%;}
.nav li:hover ul{display:block;}
</style>
<body>
<div class="nav">
<ul>
<li>
<a href="">首页</a>
<ul>
<li><a href="">首页</a></li>
<li><a href="">首页</a></li>
<li><a href="">首页</a></li>
</ul>
</li>
<li>
<a href="">相册</a>
<ul>
<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></li>
</ul>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style>
.nav *{margin:0; padding:0;}
.nav li{float:left; list-style:none; position:relative;}
.nav li a{text-decoration:none;}
.nav li ul{display:none;}
.nav li li{float:none;}
.nav li ul{position:absolute; left:0; top:100%;}
.nav li:hover ul{display:block;}
</style>
<body>
<div class="nav">
<ul>
<li>
<a href="">首页</a>
<ul>
<li><a href="">首页1</a></li>
<li><a href="">首页</a></li>
<li><a href="">首页</a></li>
</ul>
</li>
<li>
<a href="">相册</a>
<ul>
<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></li>
</ul>
</div>
</body>
</html>
谢邀，在你的代码的基础上改了一点布局
点击看代码和预览效果。
https://jsfiddle.net/zo5ssxk5/
你出问题的关键点，应该这么写
你的那句中间没空格，直接匹配的
nav*，而不是预期的消除ul的margin-left，所以会产生偏移挤压。