CODEWITHSUNDEEP
htmlcss
Name
Name

Reputation: 529

Can't see the elements of the dropdown menu

I created a navigation bar. Now I want to expand this bar to include a dropdown menu. Here is a jfiddle.

If I hover over the last element, I can't see the dropdown bar (class="dropdown_ul"). And if I use "examine element" I see that the CSS changes the display of the dropdown_ul, but I cant see/find it.

.float_left {
    float: left;
}
.float_right {
    float: right;
}
.clear_both {
    clear: both;
}
* {
    margin: 0px;
    padding: 0px;
    font-family:"Oswald", sans-serif;
}
body {
    background-color: #E2DCDC;
}
nav {
    width: 994px;
    background-color: #77BCF1;
    border: 3px solid white;
    margin: 45px auto;
    color: black;
}
nav > .navigationbar_ul {
    list-style-type: none;
    width: 100%;
    font-size: 0px;
}
nav > .navigationbar_header {
    width: 100%;
    text-align: center;
}
.navigationbar_li {
    display: inline-block;
}
.navigationbar_li_left {
    border-right: 3px solid white;
}
.navigationbar_li_right {
    border-right: none;
    border-left: 3px solid white;
}
.navigationbar_li:last-child {
    margin-right: 0px;
}
.navigationbar_li > .navigationbar_a {
    color: black;
    font-size: 16px;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out 0s;
}
.navigationbar_li > .navigationbar_a:hover {
    background-color: white;
}
.dropdown_ul {
    position: absolute;
    top: 0px;
    left: 0;
    width: 150px;
    visibility: hidden;
    display: none;
}
.dropdown_li {
    display: block;
}
.navigationbar_li:hover .dropdown_ul {
    display: block;
    opacity: 1;
    visibility: visible;
}
<nav>
    <ul class="navigationbar_ul">
        <div class="float_left">
            <li class="navigationbar_li navigationbar_li_left"><a class="navigationbar_a" href="#">Link 1</a></li>
            <li class="navigationbar_li navigationbar_li_left"><a class="navigationbar_a" href="#">Link 2</a></li>
        </div>
        <div class="float_right">
            <li class="navigationbar_li navigationbar_li_right"><a class="navigationbar_a" href="#">Link 3</a>
                <ul class="dropdown_ul">
                    <li class="dropdown_li"><a class="dropdown_a">Link 1</a></li>
                </ul>
            </li>
        </div>
        <div class="clear_both"></div>
    </ul>
</nav>

Upvotes: 2

Views: 48

Answers (3)

Arunprakash
Arunprakash

Reputation: 158

You got to do 3 things.

Semantically it is wrong to add div in ul right after, instead of li. So remove .float_left and .float_left divs and add this class to li itself.

Add position: relative; to .navigationbar_li_right so that absolutely positioned .dropdown_ul will display right down like a drop down menu as you have asked.

Increase the font-size when you hover .navigationbar_li_right

http://jsfiddle.net/6Lf0wpvz/4/

Upvotes: 1

Frank
Frank

Reputation: 634

EDIT

Change .navigationbar_li:hover .dropdown_ul to:

.navigationbar_li:hover .dropdown_ul {
    display: block !important;
    opacity: 1;
    visibility: visible !important;
}

You need to add !important in order to override the previous display:none and visibility:hidden

By the way, you might as well ditch the visibility:hidden when declaring display:none

Hope this helps!

Upvotes: 0

brance
brance

Reputation: 1178

It is because you have specified font-size 0 here

nav > .navigationbar_ul {
 font-size: 0px;
}

Change the 0px to i.e. 14px and you will see the text.

Upvotes: 1

Related Questions