HTML / CSS：下拉菜單

Question

我不確定我是否完全了解下拉菜單后面的整個方法以及如何使其工作。 我在網上閱讀過，但只有一個模糊的想法。 嘗試實施它，但未能獲得正確的結果。

只是一個請求，如果您打算對以下代碼進行更改，請說明為什么要進行上述更改，以便我可以從中學習。

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標簽會刪除它們的可見性，但是我不確定為什么會這樣。

Answer 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

HTML / CSS：下拉菜單

問題描述

1 個解決方案

解決方案1
0 2017-09-21 13:21:00

HTML / CSS：下拉菜單

問題描述

1 個解決方案

解決方案1 0 2017-09-21 13:21:00

解決方案1
0 2017-09-21 13:21:00