CODEWITHSUNDEEP
htmlcss
kikimonchik
kikimonchik

Reputation: 53

Dropdown menu appears when it's not supposed to

So I'm kinda new to Web and I'm training on a project. I really wanna now how to create a full width dropdown menu for my nav section(mega menu mb it's called). I've tried a lot, and it works but not the way i want it to work. So that's what i got 

<nav class="menu">
    <ul>
        <li><a class="menu-item" href="#">Home</a>
            <div class="dropdown-nav">
                <div class="dropdown-nav-item">
                    <h3>Clothing</h3>
                </div>
                <div class="dropdown-nav-item">
                    <h3>Shoes</h3>
                </div>
                <div class="dropdown-nav-item">
                    <h3>Accessories</h3>
                </div>
                <div class="dropdown-nav-item">
                    <h3>Jewelry</h3>
                </div>

            </div>
        </li>
        <li><a class="menu-item" href="#">Man</a></li>
        <li><a class="menu-item" href="#">Women</a></li>
        <li><a class="menu-item" href="#">Kids</a></li>
        <li><a class="menu-item" href="#">Accessories</a></li>
        <li><a class="menu-item" href="#">Featured</a></li>
        <li><a class="menu-item" href="#">Hot Deals </a></li>
    </ul>

</nav>

And CSS

.menu{
    height: 51px;
    display: flex;
    justify-content: center;
    width: 780px;
    margin: 0 auto;
    position: relative;

}
nav ul {
    width: 680px;
    height: 51px;
    display: flex;
    list-style-type: none;
    justify-content: space-around;
}
nav li {
    height: 51px;
    line-height: 51px;
}
nav a {
    opacity: 1;
    color: #222222;
    font-size: 14px;
    line-height: 26px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 17px 7px;
}
nav a:visited {
    color: #222222;
}
nav li:hover{
    border-bottom: 2px solid #ef5b70;
}
nav li:hover .dropdown-nav{
    opacity: 1;
}
.dropdown-nav{
    display: flex;
    justify-content: center;
    opacity: 0;
    position: absolute;
    background-color: #f1f1f1;
    left: 0;
    width: 100%;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1;
    height: 400px;
}

.dropdown-nav-item{
    display: flex;
    justify-content: center;
    margin-right: 100px;
}

Codepen if you need https://codepen.io/serg-yefr/pen/wvKRgBZ

The most annoying thing is the dropdown list itself is hoverable even when the mouse is over it an it's not displayed. If you place your cursor somewhere under my menu you'll get what I'm talking about. And I want it to appear only when I hover over my menu item.

Upvotes: 1

Views: 34

Answers (1)

focus.style
focus.style

Reputation: 6750

Just use display, not opacity. With opacity: 0; your dropdown is still a part of a li, but transparent, and it's act on hover. display: none will hide it from hovering. 

.menu{
    height: 51px;
    display: flex;
    justify-content: center;
    width: 780px;
    margin: 0 auto;
    position: relative;

}
nav ul {
    width: 680px;
    height: 51px;
    display: flex;
    list-style-type: none;
    justify-content: space-around;
}
nav li {
    height: 51px;
    line-height: 51px;
}
nav a {
    opacity: 1;
    color: #222222;
    font-size: 14px;
    line-height: 26px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 17px 7px;
}
nav a:visited {
    color: #222222;
}
nav li:hover{
    border-bottom: 2px solid #ef5b70;
}
nav li:hover .dropdown-nav{
    display: flex;
}
.dropdown-nav{
    display: none;
    justify-content: center;
    position: absolute;
    background-color: #f1f1f1;
    left: 0;
    width: 100%;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1;
    height: 400px;
}

.dropdown-nav-item{
    display: flex;
    justify-content: center;
    margin-right: 100px;
}
<nav class="menu">
    <ul>
        <li><a class="menu-item" href="#">Home</a>
            <div class="dropdown-nav">
                <div class="dropdown-nav-item">
                    <h3>Clothing</h3>
                </div>
                <div class="dropdown-nav-item">
                    <h3>Shoes</h3>
                </div>
                <div class="dropdown-nav-item">
                    <h3>Accessories</h3>
                </div>
                <div class="dropdown-nav-item">
                    <h3>Jewelry</h3>
                </div>

            </div>
        </li>
        <li><a class="menu-item" href="#">Man</a></li>
        <li><a class="menu-item" href="#">Women</a></li>
        <li><a class="menu-item" href="#">Kids</a></li>
        <li><a class="menu-item" href="#">Accessories</a></li>
        <li><a class="menu-item" href="#">Featured</a></li>
        <li><a class="menu-item" href="#">Hot Deals </a></li>
    </ul>

</nav>

Upvotes: 1

Related Questions