Reputation: 25
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
Reputation: 3025
There're several things that is wrong with the CSS.
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.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)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