How to make menu?

HTML & CSS
1

How to make the first menu link look as if it is hovered until hovering another link

2

Hi,

The question is a little vague so can you clarify the type of menu you are using and document exactly what you want to happen. e.g. Is this a dropdown menu, horizontal or vertical menu?

Do you have some html or css that we can look at or do you have a live link?

It sounds like you want a current page indicator menu item which is usually achieved by setting a class on the current item so that it stays in the highlighted state for that page.

3

I mean drop down menu

4

HI,

You really need to provide us with more details in order to help you :slight_smile: Check out the forum posting basics thread for more info.

If I can make a guess that you want the top level item to remain hovered while still negotiating the sub menu then you need this type of code structure.


#nav > li:hover > a, #nav li li a:hover {
	background:red;
	color:#fff
}

Here is a full example.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
	margin:0;
	padding:0;
	list-style:none;
}
#nav {
	display:table;
	width:960px;
	margin:auto;
	border:1px solid #000;
	text-align:center;
}
#nav > li {
	display:inline-block;
	position:relative;
}
#nav li a {
	display:block;
	padding:5px 10px;
	text-decoration:none;
	background:#f9f9f9;
}
#nav li li { text-align:left }
#nav li li a {
	display:block;
	border:1px solid #000;
	margin:0 0 -1px;
}
#nav li ul {
	position:absolute;
	left:-999em;
	width:200px
}
#nav li:hover ul { left:0 }
#nav > li:hover > a, #nav li li a:hover {
	background:red;
	color:#fff
}
</style>
</head>

<body>
<h1>IE8 + only</h1>
<ul id="nav">
		<li><a href="#">Menu item</a>
				<ul>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
				</ul>
		</li>
		<li><a href="#">Menu item</a>
				<ul>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
				</ul>
		</li>
		<li><a href="#">Menu item</a>
				<ul>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
				</ul>
		</li>
		<li><a href="#">Menu item</a>
				<ul>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
				</ul>
		</li>
		<li><a href="#">Menu item</a>
				<ul>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
				</ul>
		</li>
		<li><a href="#">Menu item</a>
				<ul>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
				</ul>
		</li>
		<li><a href="#">Menu item</a>
				<ul>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
						<li><a href="#">Sub Menu item</a></li>
				</ul>
		</li>
</ul>
</body>
</html>