CODEWITHSUNDEEP
htmlcss
serious_coder
serious_coder

Reputation: 85

erratic behavior in css drop down

I am practicing in making a css dropdown. However, in the following code, on hovering the "Hello" li , I want the dropdown li "Hello1" to drop just below it. It's happening. However unfortunately the other li's "Cool" and "World" also comes down. I wanna know both the reason and the solution. However I don't want to add float to any of the elements as it has created some issues previously.

html body {
	height: 100%;
	width: 100%;
}

.roundborder {
	border-radius:5px
}

.container {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: 75%;
	/* [disabled]background-color: rgba(153,153,153,1); */
	height: auto;
}

ul {
	text-align: center;
	border: thin solid rgba(0,0,0,1);
	width: auto;
	margin-top: 0;
	margin-right: 10%;
	margin-bottom: 0;
	margin-left: 10%;
	padding-top: 0;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0px;
	background-color: rgba(255,0,0,1);
	height: 30px;
}

li {
	display: inline-block;
	border: 1px solid black;
	/* [disabled]padding: 5px; */
	height: 30px;
	width: auto;
	margin-top: 0;
	margin-right: 15px;
	margin-bottom: 0;
	margin-left: 15px;
}

ul > li > ul {
	width: 100px;
	display: none;
	padding-left: 0px;
	margin-top: 10px;
	margin-left: 0px;
}

ul > li > ul > li {
	display:block;
list-style-type:none;
}

ul li:hover > ul {
	display: block;
}
<div class="container">
<ul class="roundborder">
<li>Hello
<ul> 
<li> Hello1 </li>
</ul>
</li>
<li>Cool</li>
<li>World</li>
</ul>
</div>

Upvotes: 0

Views: 45

Answers (1)

sjm
sjm

Reputation: 5468

Because your not specifically setting the 'position' attribute for your dropdown it will use the default positioning(position:relative) which will affect the positioning of the elements around it try position:absolute

i.e

ul > li{
   position:relative;
   ...
}
ul > li > ul{
   position:absolute;
   left:0;
   top: 30px;/*or height of header*/
   ...
}

This article explains the positioning attribute in depth https://developer.mozilla.org/en/docs/Web/CSS/position

Upvotes: 1

Related Questions