我不确定我是否完全理解下拉菜单背后的整个方法以及如何使其发挥作用。我在网上看过，但只有一个模糊的想法。尝试实现它但未能获得正确的结果。
只是一个请求，如果您打算对以下代码进行更改，请解释您进行上述更改的原因，以便我从中学习。
HTML(文件名:Lessons.html):
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Appearance.css">
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>
</head>
<body>
<nav>
<ul>
<li><a href="">About</a></li>
<li><a href="">Cogna</a></li>
<li><a href="">Apps</a></li>
<div class="dropdown">
<li>Test</li>
</div>
<li id="thispage">Lessons
<div class="dropdown">
<li>Logic</li>
<li>Sets</li>
<li>Counting</li>
<li>Relations</li>
<li>Functions</li>
<li>Permutations</li>
<li>Arithmetic</li>
<li>Algebra</li>
<li>Calculus</li>
</div>
</li>
<li><a href="">Blogs</a></li>
<li><a href="Home.html">Home</a></li>
</ul>
</nav>
<div class="main">
<h1>Logic</h1>
<h1>Sets</h1>
<h1>Counting</h1>
<h1>Relations</h1>
<h1>Functions</h1>
<h1>Permutations</h1>
<h1>Arithmetic</h1>
<h1>Algebra</h1>
<h1>Calculus</h1>
</div>
</body>
</html>
CSS(文件名:Appearance.css):
body {
margin: 0;
}
nav {
position: fixed;
top: 0; right: 0;
width: 100%;
}
nav ul {
list-style-type: none;
margin: 0; padding: 0 6cm 0 6cm;
overflow: hidden;
background-color: #333;
}
nav ul li {
float: right;
width: 15%;
}
nav ul li a {
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-weight: bold;
}
#thispage {
color: #fff;
background-color: #000;
text-align: center;
padding: 14px 0;
font-weight: bold;
}
nav ul li:hover {
background-color: #fc5;
}
nav ul li a:hover {
color: #000;
}
img {
margin: 0;
}
.dropdown {
display: none;
position: absolute;
}
.dropdown:hover {
display: block;
}
.main {
margin: 0 6cm 0 6cm;
padding: 2cm 3cm 1cm 3cm;
border-color: #333;
border-width: 0 2px 0 2px;
border-style: solid;
height: 100%;
}
结果:
但是，我希望 nav 中 div 中的内容成为下拉菜单的一部分。
编辑:这不完全是重复的。我的列表项绝对可见。虽然将 div 标签更改为 ul 标签会移除它们的可见性，但我不确定为什么会发生这种情况。
最佳答案
从这里开始:
body {
margin: 0;
}
nav {
position: fixed;
top: 0; right: 0;
width: 100%;
}
nav ul {
list-style-type: none;
margin: 0; padding: 0 6cm 0 6cm;
background-color: #333;
}
nav ul li a {
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-weight: bold;
}
#thispage {
position: relative;
color: #fff;
background-color: #000;
text-align: center;
padding: 14px 0;
font-weight: bold;
}
.dropdown{
display: none;
position: absolute;
top: 47px;
left: 0;
}
#thispage:hover > .dropdown{
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Appearance.css">
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>
</head>
<body>
<nav>
<ul>
<li id="thispage">Lessons
<ul class="dropdown">
<li>Logic</li>
<li>Sets</li>
<li>Counting</li>
<li>Relations</li>
<li>Functions</li>
<li>Permutations</li>
<li>Arithmetic</li>
<li>Algebra</li>
<li>Calculus</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>这个答案并不能解决您的问题，但它是从哪里开始的最低限度。还要注意 list 嵌套:li 应该包含在 ul 或 ol 中；更多的 ul 不应包含任何 div，只能包含 li
关于HTML/CSS : Dropdown menu，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46344783/