CODEWITHSUNDEEP
htmlcssnav
nellygrl
nellygrl

Reputation: 657

Dropdown appearing on left of Screen

For some reason, when I hover over my navigation items, the drop downs are appearing on the very left of the screen instead of under that menu item and I can't figure out why. If anybody could help, it would be greatly appreciated.

Here's my code (JSFIDDLE: http://jsfiddle.net/A5jtC/):

HTML:

<div id="nav" class="wrapper">
    <ul class="site-navigation">
        <li><a href="/bio/">About</a></li>
        <li><a href="/portfolio/">Work</a>
            <ul>
                <li><a href="#">Testing</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS:

.wrapper{
    width: 1000px;
    background-color: rgb(255,255,255);
    margin: 0 auto;
    overflow: hidden;
}

ul.site-navigation {
    text-align: center;
    list-style: none;
}


ul.site-navigation li a{
    font-family: 'Arvo', serif, Georgia;
    width: 125px;
    float: left;
    padding: 50px 0 47px 0;
    letter-spacing: 4px;
    text-transform: uppercase;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    color: rgb(82,82,82);
    border-bottom: 3px solid transparent;
}

ul.site-navigation a:hover{
    font-weight: bold;
    border-bottom: 3px solid rgb(4,141,195);
    text-shadow: rgb(200, 200, 200) 1px 1px 0px;
    padding: 97px 0 0 0;
}

ul.site-navigation ul {
    list-style: none;
     width: 100px;
     height: 30px;
     position: absolute;
     top: 125px;
     left: 0;
     display: none;
     z-index: 1000;
}

ul.site-navigation ul li {
     float: none;
     line-height: 30px;
 }

ul.site-navigation ul li a {
    transition:none; 
    font-weight: regular;
    font-size: 14px;
 }

ul.site-navigation li:hover ul {
     display: block;
}

Upvotes: 3

Views: 2390

Answers (3)

Kasey Krehbiel
Kasey Krehbiel

Reputation: 433

You've got a couple of issues.

First, in order to have an element that appears under another element, the parent element has to be position: relative; and the direct child position: absolute;.

Next, your overflow:hidden on your wrapper element would hide any child that appears below the parent.

Third, your list items had to be floated and given a width x height, otherwise the browser thinks they all line up on the left side of the page since the elements inside of the list items are all floated.

Finally, after all of that, your submenu s have a 40px left padding by default. You have to get rid of that for the sub-items to line up.

Check this out:

.wrapper{
    width: 1000px;
    background-color: rgb(255,255,255);
    margin: 0 auto;
}

ul.site-navigation {
    text-align: center;
    list-style: none;
}

ul.site-navigation li a{
    padding: 50px 0 47px 0;
    font-family: 'Arvo', serif, Georgia;
    width: 125px;
    float: left;
    letter-spacing: 4px;
    text-transform: uppercase;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    color: rgb(82,82,82);
    border-bottom: 3px solid transparent;
}

ul.site-navigation > li {
    position: relative;
    width: 125px;
    float:left;
    margin: 0;
}

ul.site-navigation a:hover{
    font-weight: bold;
    border-bottom: 3px solid rgb(4,141,195);
    text-shadow: rgb(200, 200, 200) 1px 1px 0px;
    padding: 97px 0 0 0;
}

ul.site-navigation ul {
    list-style: none;
     height: 50px;
     left: 0;
     z-index: 1000;
    padding: 0;
    display: none;
}

ul.site-navigation ul li {
     float: none;
     line-height: 50px;
 }

ul.site-navigation ul li a {
     font-weight: regular;
     font-size: 20px;
 }

ul.site-navigation li:hover ul {
     display: block;
    position: absolute;
    width: 125px;
    top: 100%;
    left: 0;

}

http://jsfiddle.net/A5jtC/74/

UPDATE: I can't comment on others' posts yet, but JRulle's solution will push all of the content under your menu down when you hover over it and a submenu is displayed. In order to prevent that, you HAVE to use the relative/absolute positioning above so that your submenus don't take up page space when they are displayed.

Upvotes: 1

JRulle
JRulle

Reputation: 7568

You have some issues in your styles: Try these: JSFiddle

.wrapper{
    background-color: rgb(255,255,255);
    width: 100%;
    overflow: hidden;
}
ul.site-navigation {
    list-style: none;
}
ul.site-navigation:after {
    clear: both;
}
ul.site-navigation li {
    display: block;
    float: left;
}
ul.site-navigation li a{
    font-family: 'Arvo', serif, Georgia;
    letter-spacing: 4px;
    text-transform: uppercase;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    color: rgb(82,82,82);
    border-bottom: 3px solid transparent;
}
ul.site-navigation li a:hover{
    font-weight: bold;
    border-bottom: 3px solid rgb(4,141,195);
    text-shadow: rgb(200, 200, 200) 1px 1px 0px;
}
ul.site-navigation li ul {
    list-style: none;
    display: none;
    z-index: 1000;
    padding: 0;
    margin: 0;
}
ul.site-navigation ul li {
     line-height: 50px;
}
ul.site-navigation ul li a {
     font-weight: regular;
     font-size: 20px;
}
ul.site-navigation li:hover ul {
     display: block;
 }

Upvotes: 1

Stevo Perisic
Stevo Perisic

Reputation: 353

Try this css, it might get you to where you need to be:

.wrapper{
    width: 100%;
    background-color: rgb(255,255,255);
    margin: 0 auto;
    overflow: hidden;
}

ul.site-navigation {
    text-align: center;
    list-style: none;
}

ul.site-navigation li{
    display: block;
    width: 125px;
    float: left;
}

ul.site-navigation li a{
    font-family: 'Arvo', serif, Georgia;
    width: 125px;
    float: left;
    padding: 50px 0 47px 0;
    letter-spacing: 4px;
    text-transform: uppercase;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    color: rgb(82,82,82);
    border-bottom: 3px solid transparent;
}

ul.site-navigation a:hover{
    font-weight: bold;
    border-bottom: 3px solid rgb(4,141,195);
    text-shadow: rgb(200, 200, 200) 1px 1px 0px;
    padding: 97px 0 0 0;
}

ul.site-navigation li>ul {
    list-style: none;
     height: 50px;
     position: relative;
     display: none;
     z-index: 1000;
}

ul.site-navigation li>ul>li {
     float: none;
     line-height: 50px;
 }

ul.site-navigation ul li a {
     font-weight: regular;
     font-size: 20px;
 }

ul.site-navigation>li:hover ul {
     display: block;
 }

Upvotes: 3

Related Questions