CODEWITHSUNDEEP
htmlcssdrop-down-menuhover
Ivan Kirshak
Ivan Kirshak

Reputation: 3

HTML + CSS hoverable dropdown expands header

There is an issue with dropdown, when hover it. Instead of normal opening, the dropdown menu expands header. Where is an error in the code? I wrote this code from example on w3school()Code example, by which this code is written There are also several attempts to do the same: first attempt second attempt And in all of these attempts i do the same error, but cannot find where exactly. Can somebody show where are the errors?

* {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

header, nav {
    background-color: aliceblue;
    color: darkcyan;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    height: auto;
    text-align: center;
    padding: 10px;
}

a {
    text-decoration: none;
    color: darkcyan;
    padding: 10px;
    display: inline-block;
}

.active {
    padding-left: 0;
}

a, .dropdown {
    display: inline-block;
    width: 100px;
    padding: 10px;
}

.dropdown .dropbutton {
    border: none;
    outline: none;
    color: inherit;
    background-color: inherit;
    font-size: inherit;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: whitesmoke;
    color: black;
    width: auto;
}

.dropdown-content a {
    float: none;
    padding: 10px;
    display: block;
    text-align: center;
}

.dropdown:hover .dropdown-content {
    display: block;
    position: relative;
    width: auto;
    text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Dropdown Third Version</title>
</head>
<body>

<header>

    <h1>The Homework</h1>

    <nav>

        <a href="" target="" class="active">Home</a>
        <a href="hobbies.html" target="_blank">Hobbies</a>
        <a href="third.html" target="_blank">Third Page</a>

        <div class="dropdown">
            <button class="dropbutton">Dropdown</button>
            <div class="dropdown-content">
                <a href="">One</a>
                <a href="">Two</a>
                <a href="">Three</a>
            </div>
        </div>

    </nav>

</header>
  
</body>
</html>

Upvotes: 0

Views: 637

Answers (4)

yoismak
yoismak

Reputation: 55

You forgot to link the CSS file in your HTML code. Make sure you do that first.

Othetwise it won't do anything.

Upvotes: 0

Sihaya Fox
Sihaya Fox

Reputation: 1

.dropdown:hover .dropdown-content {
display: block;
position: absolute;
width: auto;
text-align: center;

}

just delete the position line or change position in to absolute

Upvotes: 0

Sethuraman
Sethuraman

Reputation: 651

This is because you have given position:relative in css instead give position:absolute for following selector .inline:hover .dropdown 

.inline:hover .dropdown {
    display: block;
    position: absolute;
    padding: 10px;
    background-color: white;
    color: dimgray;
}

And one more modification is that for all sub menu you have mentioned the class dropdown instead of that under one div which is having class dropdown 

<div class="inline">The Page
            <div class="dropdown">
              <div>One</div>
              <div>Two</div>
              <div>Three</div>
            </div>
        </div>

here is working example : https://liveweave.com/NpUwOZ

Upvotes: 0

Saleemi
Saleemi

Reputation: 131

Make a simple change to position in css:

.dropdown:hover .dropdown-content {
    display: block;
    position: absolute;----------------------This One
    width: auto;
    text-align: center;
}

Use this link to understand: Difference Between relative and absolute

Upvotes: 2

Related Questions