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.

At least you have to wrap <li> tags in dropdown with <ul> tag. Here is example codepen.io/anon/pen/zEBLOq — yarm
– yarm, Commented Sep 21, 2017 at 13:16

sTx · Accepted Answer · 2017-09-21 13:27:08Z

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

Collectives™ on Stack Overflow

HTML/CSS: Dropdown menu

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related