serious_coder serious_coder - 6 months ago 17
HTML Question

parent ul color in the background of dropdown child li

In this code (practicing css dropdown menu) the background color of the main parent ul is Red, and background color of the dropdown child li "Sub" is violet. Now when I tried to move the dropdown child li "Sub" 20px right from its position, I see the background color Red still appearing. You can see this if you hover your mouse over li "Hello" I dont want that. It's like something shifting from its placeholder leaving behind the original placeholder color. I want no background color if I shift the dropdown child li "Sub" from its original position to either left/right/up/down



html body {
height: 100%;
width: 100%;
left: 0px;
top: 0px;
margin-top: 0px;
margin-left: 0px;
}

.roundborder {
border-radius:5px
}

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

ul {
text-align: center;
/* [disabled]border: thin solid rgba(0,0,0,1); */
width: 100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0px;
margin-left: 0%;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-color: rgba(255,0,0,1);
height: 25px;
position: absolute;
}

li {
display: inline-block;
/* [disabled]border: 1px solid black; */
/* [disabled]padding: 5px; */
height: 25px;
width: 40px;
margin-top: auto;
margin-right: 30px;
margin-bottom: auto;
margin-left: 30px;
position: relative;
background-color: rgba(0,0,255,1);
}

ul > li > ul {
padding-left: 0px;
width: 100%;
height: auto;
visibility: hidden;
position: absolute;
left: 0px;
top: 100%;
text-align: center;
/* [disabled]background-color: rgba(255,255,255,1); */
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-style: none;
}

ul > li > ul > li {
display: block;
list-style-type: none;
width: 40px;
margin-left: auto;
margin-right: auto;
position: relative;
border: 1px solid rgba(0,255,102,1);
left: 20px;
background-color: rgba(204,102,153,1);
}

ul li:hover > ul {
visibility:visible;
}

<div class="container">
<ul class="roundborder">
<li>Hello
<ul>
<li>Sub</li>
</ul>
</li>
<li>Cool</li>
<li>World</li>
</ul>
</div>




Answer

You need to set your ul > li > ul{ to have background:transparent; because it is currently getting background:red; from ul{

html body {
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	margin-top: 0px;
	margin-left: 0px;
}

.roundborder {
	border-radius:5px
}

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

ul {
	text-align: center;
	/* [disabled]border: thin solid rgba(0,0,0,1); */
	width: 100%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: 0%;
	padding-top: 0;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0px;
	background-color: rgba(255,0,0,1);
	height: 25px;
	position: absolute;
}

li {
	display: inline-block;
	/* [disabled]border: 1px solid black; */
	/* [disabled]padding: 5px; */
	height: 25px;
	width: 40px;
	margin-top: auto;
	margin-right: 30px;
	margin-bottom: auto;
	margin-left: 30px;
	position: relative;
	background-color: rgba(0,0,255,1);
}

ul > li > ul {
	padding-left: 0px;
	width: 100%;
	height: auto;
	visibility: hidden;
	position: absolute;
	left: 0px;
	top: 100%;
	text-align: center;
	/* [disabled]background-color: rgba(255,255,255,1); */
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	border-style: none;
    background:transparent;
}

ul > li > ul > li {
	display: block;
	list-style-type: none;
	width: 40px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	border: 1px solid rgba(0,255,102,1);
	left: 20px;
	background-color: rgba(204,102,153,1);
}

ul li:hover > ul {
	visibility:visible;
}
<div class="container">
<ul class="roundborder">
<li>Hello
<ul> 
<li>Sub</li>
</ul>
</li>
<li>Cool</li>
<li>World</li>
</ul>
</div>