Search code examples
htmlcssdropdown

HTML/CSS dropdown menu not overlaying or displaying in block

Having some trouble getting my dropdown menu to display properly on hover; it's currently displaying all on one line and also appears not to be overlaying, despite z-index being set to 1. Played around with making projects a p, a, and div but still stumped. Any advice?

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <nav class="navbar">
        <a href="/" id="name-link">Name</a>
        <div class="dropdown">
            <a>Projects</a>
                <div class="dropdown-content">
                    <a href="/">Project 1</a>
                    <a href="/">Project 2</a>
                    <a href="/">Project 3</a>
                </div>
        </div>
        <a href="/about.html">About</a>
        <a href="/">Contact</a>
    </nav>
</body>
</html>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: .015em;
    color: #000000;
}

a:link, a:visited {
    color: #000000;
    text-decoration: none;
}

a:hover, a:active {
    color: #a9c4d4;
    text-decoration: underline;
}

.navbar {
    overflow: hidden;
    font-size: 2.5em;
    font-weight: 700;
    position: fixed;
    top: 0;
    width: 100%;
    list-style-type: none;
    margin: 0px 0px 0px 110px;
    padding: 10px 0px 10px 0px;
    background-color: #ffffff;
}

.navbar a {
    float: left;
    display: block;
    margin: 10px;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    z-index: 1;
}

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

.dropdown:hover .dropdown-content {
    display: block;
}

#name-link {
    color: #a9c4d4;
    text-decoration: none;
}

a.selected-link {
    text-decoration: underline;
}

jsfiddle here: https://jsfiddle.net/29gev50b/2/

Solution

  • change the css of "dropdown-content". The position absolute does that thing. remove this position absolute css from "dropdown-content" and it will work fine.