Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Dylan Carter
Dylan Carter
4,780 Points

Dropdown navigation overlapping my other nav links

heres the skinny, I have a navigation of 5 items, with a break on the 3rd so the last 2 are on there own line, each are a link but when highlighted the dropdown of sublinks will appear.

the problem I am having is that when I hover one of the links in the top row and the nav drops down, the content of the dropdown overlaps with the below navigation links as seen in this picture....

http://imgur.com/DuuImX4

heres the relevant code:

header ul {
    padding-left: 0px;

}

header li {
    display: inline-block;
    padding: 0px 20%;
    margin: 0;
    height: 100%;
}
 header nav a {
    font-size: 3vw;
    vertical-align: 50%;
    text-decoration: none;
    font-weight: bold;

}

nav a:hover {
    color: white;

}

nav a:active {
    font-weight: bold;

}

.main-link {
    text-decoration: none;
}

/*---------------------------------------------------------------------------------------------------*/
    .dropbtn {

    padding: 4px;

    border: none;
    cursor: pointer;
}
.dropdown {
    position: relative;
    display: inline-block;

}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1
    }

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

<nav>
            <ul>
            <div class="navrow1">

                    <div class="dropdown">
                        <li class="dropbtn"><a href="">Withdrawal</a></li>
                            <div class="dropdown-content">
                                <a href="#">Link 1</a>
                                <a href="#">Link 2</a>
                                <a href="#">Link 3</a>
                            </div>
                    </div>
                <div class="dropdown">
                        <li  class="dropbtn"><a href="">Journal</a></li>
                            <div class="dropdown-content">
                                <a href="#">Link 1</a>
                                <a href="#">Link 2</a>
                                <a href="#">Link 3</a>
                            </div>
                    </div>
                <div class="dropdown">
                        <li class="dropbtn"><a href="">Science</a></li>
                            <div class="dropdown-content">
                                <a href="#">Link 1</a>
                                <a href="#">Link 2</a>
                                <a href="#">Link 3</a>
                            </div>
                    </div><br class="nav-break"/>
                <div class="dropdown">
                        <li class="dropbtn"><a href="">Drug Tests</a></li>
                            <div class="dropdown-content">
                                <a href="#">Link 1</a>
                                <a href="#">Link 2</a>
                                <a href="#">Link 3</a>
                            </div>
                    </div>
                <div class="dropdown">
                        <li class="dropbtn"><a href="">Forum</a></li>
                            <div class="dropdown-content">
                                <a href="#">Link 1</a>
                                <a href="#">Link 2</a>
                                <a href="#">Link 3</a>
                            </div>
                    </div> 


            </ul>
        </nav>

thank you!

1 Answer

Bryce Santos
Bryce Santos
11,157 Points

I would probably use a z-index so that it's above the text rather than below it.

Dylan Carter
Dylan Carter
4,780 Points

Thank you thats what it needed