HTML/CSS: Dropdown menu

Question

I'm not sure I fully understand the entire method behind the dropdown menu and how to make it work. I have read online but only gotten a vague idea. Tried implementing it but failed to get the right result.

Just a request, if you intend to make changes to the following code, please explain why you made said changes so I can learn from this.

HTML (file name: 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 (file name: 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%;
}

Result:

However, I want the stuff inside the div in nav to become part of a dropdown menu.

Edit: This isn't exactly a duplicate. My list items are definitely visible. Although changing the div tag to a ul tag removes their visibility but I'm not sure as to why that happens, exactly.

Answer 1

Start with this:

 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>

This answer doesn't solve your problem but it's a minimum start from where to go. Also be aware for list nesting: li should be contained by a ul or ol ; More a ul should not contain any div , only li

HTML/CSS: Dropdown menu

Question

1 answers

solution1
0 2017-09-21 13:21:00

HTML/CSS: Dropdown menu

Question

1 answers

solution1 0 2017-09-21 13:21:00

solution1
0 2017-09-21 13:21:00