Dropdown not displayed after hovering over an item

Question

I learn front-end since few weeks but I cannot really figure out why my dropdown menu does not work. My main menu looks like this:

<div id="main-container">

    <!-- Main navigation -->
    <header class="main-header">
        <div class="header-content">
            <div class="container">

                <!-- Logo -->
                <div class="logo-wrapper pull-left">
                    <a href="index.html">Sit <span>On</span> Chair</a>
                </div>

                <!-- Main menu -->
                <nav class="nav-main pull-right">
                    <ul class="main-nav-list">
                        <li><a href="#" class="dropdown”>About us</a></li>
                        <li><a href="#”>Gallery</a></li>
                        <li><a href="#”>Contact</a></li>
                    </ul>
                    <div class="dropdown-content">
                        <a href="#”>News</a>
                        <a href="#”>Our team</a>
                        <a href="#”>History</a>
                    </div>
                </nav>
            </div>
        </div>
    </header>
</div>

and css file looks like this:

/* Text styles */
body {
    font-family: 'ralewayregular';
}

@font-face {
    font-family: 'ralewayregular';
    src: url('../fonts/raleway-regular.eot');
    src: url('../fonts/raleway-regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/raleway-regular.woff2') format('woff2'),
    url('../fonts/raleway-regular.woff') format('woff'),
    url('../fonts/raleway-regular.ttf') format('truetype'),
    url('../fonts/raleway-regular.svg#ralewayregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1, h2 {
    text-transform: uppercase;
}

a {
    text-decoration: none;
}

/* Main content */
#main-content {
    position: relative;
    z-index: 0;
}

/* Container styles */
* {
    box-sizing: border-box;
}

.container {
    position: relative;
    width: 1180px;
    margin: 0 auto;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

/* Main header */
.main-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 99;
    text-transform: uppercase;
    background-color: #000000;
}

/* Logo */
.logo-wrapper {
    margin: 16px 0;
}

/* General header styles */
.header-content .main-nav-list li {
    display: inline;
    padding: 0 30px;
    &:nth-child(3) {
        padding-left: 30px;
        padding-right: 0;
    }
}

.header-content {
    span {
        color: #66dfc9;
        transition: 0.2s ease-in-out;
    }
    a {
        color: #ffffff;
        transition: 0.2s ease-in-out;
        &:hover {
            color: #66dfc9;
            transition: 0.2s ease-in-out;
            span {
                color: #ffffff;
                transition: 0.2s ease-in-out;
            }
        }
    }
}

/* Dropdown */
.dropdown-content {
    position: absolute;
    top: 60px;
    right: 230px;
    width: 140px;
    padding: 10px;
    display: none;
    overflow: auto;
    z-index: 100;
    border-radius: 5px;
    text-transform: none;
    text-align: left;
    background-color: #000000;
    a {
        display: block;
        padding: 10px;
        text-align: center;
        transition: 0.2s ease-in-out;
        &:hover {
            color: #66dfc9;
            transition: 0.2s ease-in-out;
        }
    }
}

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

I would like to display .dropdown-content when hovering over 'About us’ link. Is it possible to display div element if it is outside of an unordered list? Everything works fine except the last part of my code.

I have tried to change my unordered list for div element, display div element inside link About us, but it also does not work.

Answer 1

I think you can use the onmouseover event. I did something like this and it works fine.

<li><a href="#" class= "dropdown" onmouseover = "document.getElementById('disp').style.display = 'block';">About us</a></li>

<div class="dropdown-content" id = "disp" style="display:none;">

1) set display to none for the div which you want it to appear when the user hovers his mouse

2) for the 'about us' link, add the event 'onmouseover' and set the div display to 'block'.

Answer 2

If you do not want to use javascript, the following code works:

HTML

 <!-- Main menu -->
            <nav class="nav-main pull-right">
                <ul class="main-nav-list">
                    <li><a href="#" class="dropdown">About us</a>
                     <div class="dropdown-content">
                    <a href="#">News</a>
                    <a href="#">Our team</a>
                    <a href="#">History</a>
                </div></li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>

            </nav>

you have to move .dropdown-content under the .dropdown a tag then you select it using:

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

jsfiddle

Answer 3

Check this code tested in local:

<style type="text/css">
            ul{
                background: gray;
            }
            ul>li{
                padding: 10px 15px;
                font-size: 14px;
                font-family: Arial;
                display: inline-block;
                cursor: pointer;
            }
            ul li.dropdown{
                position: relative;
            }
            .dropdown-list{
                position: absolute;
                display: none;
                width: 80px;
            }
            ul li.dropdown:hover > .dropdown-list{
                display: block;
            }
        </style>
        <ul>
            <li>Home</li>
            <li class="dropdown">About
                <ul class="dropdown-list">
                    <li>Item-1</li>
                    <li>Item-2</li>
                    <li>Item-3</li>
                    <li>Item-4</li>
                </ul>
            </li>
            <li>Contact</li>
        </ul>