Small Problems With Horizontal Drop Down Menu

Hi guys!

Happy Holidays!

Haven't been pestering much lately cause I have been trying to exercise what I have been learning here and it seems to be going fairly well with one exception . . .

I am trying to incorporate a centered horizontal drop down menu into a site and maybe I have been messing with this site way toooo long, but I cannot figure out what I am doing wrong in turning the horizontal menu into a drop down. If I code it for just a plain menu, it works fine, but its when I try to make it drop down that I am having problems.

Anyway, if ya'll would take a look at my code and let me know what I am doing wrong, I would really appreciate it.

What I think is the affected html looks like:

<div class="heightWrapper">

    <?php include("navMenu.php"); ?>

    <div id="contentWrapper">                   
        <div id="products">

Code (markup):

The navMenu code looks like:

<input type="checkbox" id="navMenuCheck">
            <label for="navMenuCheck"></label>
                <div id="navMenu">
                    <ul>
                        <li>
                        <a href="/">Home</a>
                        </li><li>
                        <a href="/">All Categories</a>
                            <ul>
                                <li>
                                <a href="#">Electronics</a>
                                </li><li>
                                <a href="#">Computers & Networking</a>
                                </li><li>
                                <a href="#">Flashlights & Lamps</a>
                                </li><li>
                                <a href="#">Cell Phones & Accessories</a>
                                </li><li>
                                <a href="#">Automotive</a>
                                </li>
                            </ul>                           
                        </li><li>
                        <a href="/">New Arrivals</a>
                        </li><li>
                        <a href="/">Top Sellers</a>
                        </li><li>
                        <a href="/">Clearance</a>
                        </li><li>
                        <a href="/">Steals & Deals</a>
                        </li><li>
                        <a href="/">Contact Us</a>
                        </li>
                    </ul>
                <!-- end navMenu --></div>   

Code (markup):

And the CSS looks like:

#navMenuCheck {
    position:absolute;
    left:-999em;
}

#navMenu {
    width: 1265px;
    position: relative;
    margin: 3.9em 0 0 2em;
    padding: 2.5em 0 0.75em 0.75em;
    height: 0.1em;
    text-align: center;
    background: #65656B;

}

#navMenu li {
    list-style:none;
    display:inline-block;
    width: 12em;
    margin-top: -3em;
}

#navMenu a {
    display: inline-block;
    vertical-align: bottom;
    text-decoration: none;
    font-size: 1.25em;
    color: #38E7F0;
    padding: 0 0.5em 0 0.5em;       
    line-height: 3em;
}

#navMenu a.current {
    color:#AEF;
}

#navMenu a:active,
#navMenu a:focus,
#navMenu a:hover {
    width: 90%;
    color:#FFF;
    font-weight: bold;
}

#navMenu a:after {
    display:inline-block;
    padding:0 0.1em 0 0.5em;
    color:#FFF;
}

#navMenu .lastInSet a:after {
    display:none;
}

#navMenu .setBreak {
    padding-right:8em;
}

#navMenu a:after,
#navMenu:after,
#navMenu ul:before,
#navMenu ul:after {
    color: #FFF;
    font-family: arial,helvetica,sans-serif;
}

#navMenu:after,
#navMenu ul:before,
#navMenu ul:after {
    position:absolute;
    left:50%;
    width:3em;
    bottom:0.65em;
}

#navMenu:after {
    bottom:0.2em;
    font-size:150%;
    margin-left:-1.5em;
}

#navMenu ul:before {
    margin-left:-3em;
}

Code (markup):

If it is helpful, you can see the page at test.allvixen.com/index.php

My thanks for your help with this . . .

 

Not 100% sure what you're trying to do, I'm guessing something like this:

http://codepen.io/anon/pen/ZBwejp

You want to add position: relative to the parent li and position: absolute on the child list.

Positioning's kind of the hardest CSS thing to explain, maybe someone else can do a better job.

 

The above codepen link given by @KewL will absolutely work for your requirement. Basically in HTML There are 6 types of positions. They are static, relative, absolute, fixed, initial and inherit. The default position of any object in DOM of a HTML is static. Relative is the object positioned relative to its normal position. Absolute is object positioned relative to its ancestor object. Fixed is the object positioned relative to browser window. Initial is the object returns to its default position and finally inherit is the object inherits its parent object position. Basically position used in HTML only to place one object on another. But using positions more will give issues in IE sometimes. So my advice is try to manage with floats as much as possible. Hope this information helps you.

 

Thanks so much for the advice and suggestions. I will continue to work on this until I get it all figured out. Once I get all the pages done I will work on trying to figure out how to make the menu responsive. I got the pages figured out, next I will work on the menu.

Thanks so much . . .

 

I had this same problem, it's so annoying!

 

Good luck.

 

You welcome Vance.