HTML CSS Navigation Child Styling Error

Question

I am having a hard time positioning my drop down menus within my Wordpress Theme Navigation. They are showing up no where near the nav bar and are near the top left corner of the screen when I hover over a ul li >.

My CSS Is Below:

 #main-navigation {

    clear: both;
    float: left;
    font-size: 17px;
    margin-top: 30px;
    width: 938px;
}
#main-navigation > ul { width: 105%; margin-left:auto; margin-right:auto; }
#main-navigation > ul > li {}
#main-navigation > ul > li:hover { transparent; }
#main-navigation > ul > li:first-child { border: medium none; }
#main-navigation > ul > li > a {
    margin-right:20px;
    border-bottom: 2px solid #6a6a65;
    color: #181818;
    display: block;
    font-weight: bold;
    height: 48px;
    line-height: 48px;
    padding: 0 29px;
//    text-shadow: 0 1px 0 #AD581D;\
    text-transform:uppercase;

}
#main-navigation > ul > li:first-child > a {
    background: url("./assets/img/home.png") no-repeat scroll center 10px transparent;
 //   border: medium none;
color:#6a6a65;
border-bottom: 2px solid #6a6a65;
    overflow: hidden;
    padding: 0 25px;
    text-indent: -999px;
    width: 31px;
}

#main-navigation > ul > li:first-child > a:hover {
border-bottom: 2px solid #fa7d4c;

}
#main-navigation a:hover { text-decoration: none; border-bottom: 2px solid #fa7d4c;}
#main-navigation ul li:hover ul { display: block; }
#main-navigation ul ul {
    border-bottom: 1px solid #333333;
    display: none;
    left: 0;
    padding-top: 20px;
    position: absolute;
    top: 148px;
    white-space: nowrap;
    z-index: 1000;
    background: url("./assets/img/dd-arrow.png") 33px 10px no-repeat;
}
#main-navigation ul ul li {
    background: none repeat scroll 0 0 #3C3C3D;
    border-left: 1px solid #333333;
    border-right: 1px solid #333333;
    border-top: 1px solid #2C2C2C;
    box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3), 0 1px 0 #444445 inset;
    float: none;
    font-size: 16px;
}
#main-navigation ul ul li:first-child {
    border-top: medium none;
    box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3);
}
#main-navigation ul ul a {
    color: #FFF;
    display: block;
    height: 48px;
    line-height: 48px;
    padding: 0 29px;
    text-shadow: 0 1px 0 #2D2D2E;
}
#main-navigation ul ul a:hover { color: #ccc; }

Any help would be greatly appreciated as I have spent a long time looking for the error its starting to frustrate me.

Thanks a bunch guys!

G-Cyrillus · Accepted Answer · 2013-06-29 10:00:29Z

1

You need to tell childs to absolute position from main-navigation and not screen by defaut, Iguess since HTML code is missing :)

 #main-navigation {
    position:relative; /* tells absolute child to take coordonates from here */
    clear: both;
    float: left;
    font-size: 17px;
    margin-top: 30px;
    width: 938px;
}

answered Jun 29, 2013 at 10:00

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1658953 Over a year ago

Thanks very much! I knew it was something so small. You're a champ!

Collectives™ on Stack Overflow

HTML CSS Navigation Child Styling Error

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related