CODEWITHSUNDEEP
csshtmldrop-down-menunav
RMitchell
RMitchell

Reputation: 25

CSS - Drop down menu appearing outside UL

I am creating a drop down menu using CSS. However when I select the menu it selects in the space that the List will appear and from the UL. Not just the UL if that makes sense and i cannot work out why it does that. Please see the code for the example:-

The CSS:-

#navigation .menu ul {position:absolute; top:45px; left:0px; opacity:0; background:black; transition:opacity .25s ease; -webkit-transition:opacity .25s ease;}
#navigation .menu li:hover > ul {opacity:1; margin:0;}
#navigation .menu ul li {height:25px; width:200px; overflow:hidden; border-bottom:red 1px solid; border-left:none; margin:none; transition:opacity .25s ease; -webkit-transition:height .25s ease;}
#navigation .menu ul li:hover {overflow:hidden; margin:0;}
#navigation .menu ul li a {text-decoration:none; height:25px; width:200px;}
#navigation .menu ul li:last-child {border-bottom:none;}

HTML code:-

<div id="navigation"> <nav> <ul class="menu"> 

        <li> <a href="Option.html"> <h1> Homepage </h1> </a> </li>

        <li> <a href="Option2.html"> About </a> <ul class="ulbox">

                <li class="dm"> <a href="Option1.html"> <img src="images/Avengers.jpeg" width="25" /> The Site </a></li>
                <li class="dm"> <a href="Option2.html"> <img src="images/Doctor Strange.jpeg" width="25" /> Find Us </a></li>
                <li class="dm"> <a href="Option3.html"> <img src="images/Guardians.jpeg" width="25" /> The Company </a></li>
                <li class="dm"> <a href="Option4.html"> <img src="images/Inhumans.jpeg" width="25" /> Contrived Page </a></li>
                <li class="dm"> <a href="Option5.html"> <img src="images/Thor.jpeg" width="25" /> Drop Down Success </a></li>

</ul>  </li>
        <li> <a href="Option3.html"> Images </a> <ul>

                <li> <a href="Option1.html"> The Site </a></li>
                <li> <a href="Option2.html"> Find Us </a></li>
                <li> <a href="Option3.html"> The Company </a></li>
                <li> <a href="Option4.html"> Contrived Page </a></li>
                <li> <a href="Option5.html"> Drop Down Success </a></li>

 </ul> </li> 
            <li> <a href="Option4.html"> The next page </a> <ul>

                <li> <a href="Option1.html"> The Site </a></li>
                <li> <a href="Option2.html"> Find Us </a></li>
                <li> <a href="Option3.html"> The Company </a></li>
                <li> <a href="Option4.html"> Contrived Page </a></li>
                <li> <a href="Option5.html"> Drop Down Success </a></li>

 </ul> </li>
            <li> <a href="Option5.html"> Terms and Stuff  </a> <ul>

                <li> <a href="Option1.html"> The Site </a></li>
                <li> <a href="Option2.html"> Find Us </a></li>
                <li> <a href="Option3.html"> The Company </a></li>
                <li> <a href="Option4.html"> Contrived Page </a></li>
                <li> <a href="Option5.html"> Drop Down Success </a></li>

 </ul> </li> </ul> </nav> </div>

I can't see why the menu is showing from outside the UL nav bar. Can someone help?

Upvotes: 2

Views: 2747

Answers (1)

Linh Pham
Linh Pham

Reputation: 3025

There're several things that is wrong with the CSS.

  • First: The position: absolute will remove the element out of the flow. So won't be counted as something existing to calulate the position of sibling and parent elements.
  • Second: Your expecting display still using the sub Menu flow. In order to make another parent Menu to flow down. So you must not use position: absolute. By removing it you will get back the flow of your Menu. (the position: relative; is not necessary I just left it there because lazy removing it)
  • Third: Now you encounted with the sub Menu being displaying without hovering. To deal with it there is 2 ways. But my jsfiddle only use one. Just add display: none to the sub Menu. And then display: block when its parent is hovering. (1)
#navigation .menu ul {
  display: none;
  z-index: 1;
  position:relative; 
}
#navigation .menu li:hover > ul {opacity:1; margin:0; display: block}

(2)

NOTE:

(1): If you want it to look nice with animation. Use the max-heigth: 0 property as transition. (instead of using display: none;

(2): z-index and position:relative; is not necessary. Just that you need to remove position: absolute then it will work

http://jsfiddle.net/7r7zLuar/3/

Upvotes: 1

Related Questions