以下是我的问题：
我想以我自己的理解，用纯CSS和HTML复制一些手风琴菜单。但是每次我点击个人资料两次，都会发生一些奇怪的事情。
有人可以指出我的错误所在吗？并解释为什么会这样吗？
.topped {
position: absolute;
top: 10px;
left: 10px;
}
.menu {
width: 300px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
border-radius: 5px;
overflow: hidden;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu .menu-toggle {
background: #2980b9;
display: block;
position: relative;
color: white;
padding: 10px 15px;
}
.menu .menu-toggle:hover {
text-decoration: none;
}
.menu .menu-toggle:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #2980b9;
bottom: -10px;
left: 5px;
visibility: hidden;
}
.menu .sub-menu:target {
max-height: 10em;
}
.menu .menu-toggle i {
margin-right: 10px;
}
.menu .sub-menu {
background: #2c3e50;
transition: max-height 0.3s;
max-height: 0;
overflow: hidden;
}
.menu .sub-menu ul {
padding-left: 25px;
}
.menu .sub-menu ul li {
padding: 10px 10px;
}
.menu .sub-menu ul li a {
color: white;
}
.menu .sub-menu ul li a i {
margin-right: 10px;
}
.menu .sub-menu ul li a:hover {
text-decoration: none;
}<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="topped">
<div class="menu">
<ul>
<li>
<a href="#profiles" class="menu-toggle"><i class="fas fa-user"></i>Profile</a>
<div id="profiles" class="sub-menu">
<ul>
<li><a href="#">Test</a></li>
</ul>
</div>
</li>
</ul>
<ul>
<li>
<a href="#settings" class="menu-toggle"><i class="fas fa-cogs"></i>Settings</a>
<div id="settings" class="sub-menu">
<ul>
<li><a href="#"><i class="fas fa-envelope-open"></i>Email</a></li>
<li><a href="#"><i class="fas fa-lock"></i>Password</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
任何帮助将不胜感激。
答案 0 :(得分：0)
我从position: absolute块中删除了.menu .menu-toggle:before，这似乎可以解决您的问题-但是，我不清楚此块的用途是什么，因此您可能需要设置到position: relative，以便您进行故障排除。
.topped {
position: absolute;
top: 10px;
left: 10px;
}
.menu {
width: 300px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
border-radius: 5px;
overflow: hidden;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu .menu-toggle {
background: #2980b9;
display: block;
position: relative;
color: white;
padding: 10px 15px;
}
.menu .menu-toggle:hover {
text-decoration: none;
}
.menu .menu-toggle:before {
content: "";
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #2980b9;
bottom: -10px;
left: 5px;
visibility: hidden;
}
.menu .sub-menu:target {
max-height: 10em;
}
.menu .menu-toggle i {
margin-right: 10px;
}
.menu .sub-menu {
background: #2c3e50;
transition: max-height 0.3s;
max-height: 0;
overflow: hidden;
}
.menu .sub-menu ul {
padding-left: 25px;
}
.menu .sub-menu ul li {
padding: 10px 10px;
}
.menu .sub-menu ul li a {
color: white;
}
.menu .sub-menu ul li a i {
margin-right: 10px;
}
.menu .sub-menu ul li a:hover {
text-decoration: none;
}<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="topped">
<div class="menu">
<ul>
<li>
<a href="#profiles" class="menu-toggle"><i class="fas fa-user"></i>Profile</a>
<div id="profiles" class="sub-menu">
<ul>
<li><a href="#">Test</a></li>
</ul>
</div>
</li>
</ul>
<ul>
<li>
<a href="#settings" class="menu-toggle"><i class="fas fa-cogs"></i>Settings</a>
<div id="settings" class="sub-menu">
<ul>
<li><a href="#"><i class="fas fa-envelope-open"></i>Email</a></li>
<li><a href="#"><i class="fas fa-lock"></i>Password</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>