Question

I'm having issues with creating a drop-down menu with HTML&CSS. I got the HTML part down (I think).

<div id="Nav">
    <ul>
        <li class="Navigation"><a href="" class="Nav_Text">Item 1</a></li>
        <li class="Navigation"><a href="" class="Nav_Text">Item 2</a></li>
        <li class="Navigation"><a href="" class="Nav_Text">Item 3</a></li>
        <li class="Navigation">
            <a class="Nav_Text">Item 4</a>
            <ul class="sub-menu">
                <li class="Sub_Navigation"><a href"" class="Sub_Nav_Text">Sub Item1</a></li>
                <li class="Sub_Navigation"><a href"" class="Sub_Nav_Text">Sub Item2</a></li>
            </ul>
        </li>
    </ul>
</div>

Here is what I have for the CSS

.submenu
{
    display: none;
}

#Nav ul li:hover > ul
{
    display: block;
    position: absolute;
    /*The rest of the code is just for looks and doesn't effect the position*/
}

The issue that I'm having is that the drop-down menu is not showing up underneath Item 4, but instead at the far left of the screen. Can anyone help me with positioning the drop-down menu underneath Item 4? And not by setting a margin. I tried that, and when the screen resized, the drop-down menu was off alignment.

Thank you ahead of time.

Answer 1

try give class="sub-menu" position:relative

.sub-menu{
    position:relative;
}

Not sure it will work :)

Haven't tryed it.

Answer 2

when you're using

position: absolute;

on child elements in the sublist you have to set the parent li's to

position: relative;

#Nav > ul > li{
  position: relative;
}

HTML/CSS Drop-down Menu Location

2 个答案: