HTML/CSS：下拉菜单答案

【问题标题】：HTML/CSS: Dropdown menuHTML/CSS：下拉菜单
【发布时间】：2017-09-21 13:07:27
【问题描述】：

我不确定我是否完全理解下拉菜单背后的整个方法以及如何使其发挥作用。我在网上阅读过，但只有一个模糊的想法。尝试实施但未能得到正确的结果。

只是一个请求，如果您打算对以下代码进行更改，请说明您进行上述更改的原因，以便我从中学习。

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 标签会删除它们的可见性，但我不确定为什么会发生这种情况。

【问题讨论】：

html css dropdown menu的可能重复
至少你必须用<ul>标签将<li>标签包裹在dropdown中。这是示例codepen.io/anon/pen/zEBLOq

标签： html css drop-down-menu

【解决方案1】：

从这里开始：

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

【讨论】：