CODEWITHSUNDEEP
htmlcssclass
Mr. MikaS
Mr. MikaS

Reputation: 13

How to modify a div with another div with Css

I want to change the display: from none to block in the div drop when you hover the cursor over the div menu. I have tried using the characters +, ~, >, ., and a space. I have also tried using ids with classes, ids with ids, and classes with classes. Here is the code for the

CSS and HTML

#menu ol li:hover{
   		color:yellow;
}
#menu ol{
   		list-style:none;
   		background-color:black;
   		color:#11B594;
   		padding:5px;
   		width:40px;
   		height:20px;
   		text-decoration:none;
   		display:block;
   		margin:left;
   		position:top;
   		padding-top:5px;
}
#drop ul{
   		list-style:none;
   		background-color:grey;
   		padding:5px;
   		width:120px;
   		height:60px;
   		text-decoration:none;
   		display:none;
   		position:absolute;
   		padding-top:5px;
  		top:0px;
   		left:55px;
}
#drop ul li:hover{
  		background-color:#1DE5FC;
   		padding:5px;
   	}
#menu ol li:hover .drop ul{
   		display:block;
}
<!DOCTYPE HTML>
<html lang="en"> 
	<head>
		<link type="text/css" rel="stylesheet" href="css.css"/>
		<title>
			Main page
		</title>
	</head>
	<body>
		<div id="menu">
			<ol>
				<li>
					<b>
						Menu
					</b>
				</li>
			</ol>
		</div>
		<div id="drop">
			<ul>
				<li>
					<a href="#.html" >#</a>
				</li>
			</ul>
		</div>
	</body>
</html>

Upvotes: 0

Views: 284

Answers (1)

sbeliv01
sbeliv01

Reputation: 11820

You'll need to specify that when you hover over #menu (#menu:hover) that you want the adjacent sibling #drop ul to be visible display:block;.

Also, in order to avoid any "jumpiness", you'll also need to specify the same rule when hovering over the #drop ul.

#menu:hover + #drop ul,
#drop ul:hover {
  display:block;
}


#menu ol li:hover
	{
		color:yellow;
	}
#menu ol
	{
		list-style:none;
		background-color:black;
		color:#11B594;
		padding:5px;
		width:40px;
		height:20px;
		text-decoration:none;
		display:block;
		margin:left;
		position:top;
		padding-top:5px;
	}
#drop ul
	{
		list-style:none;
		background-color:grey;
		padding:5px;
		width:120px;
		height:60px;
		text-decoration:none;
		display:none;
		position:absolute;
		padding-top:5px;
		top:0px;
		left:55px;
	}
#drop ul li:hover
	{
		background-color:#1DE5FC;
		padding:5px;
	}
#menu:hover + #drop ul,
    #drop ul:hover {
      display:block;
    }
<!DOCTYPE HTML>
<html lang="en"> 
	<head>
		<link type="text/css" rel="stylesheet" href="css.css"/>
		<title>
			Main page
		</title>
	</head>
	<body>
		<div id="menu">
			<ol>
				<li>
					<b>
						Menu
					</b>
				</li>
			</ol>
		</div>
		<div id="drop">
			<ul>
				<li>
					<a href="#.html" >#</a>
				</li>
			</ul>
		</div>
	</body>
</html>

Upvotes: 1

Related Questions