1 Replies - 409 Views - Last Post: 22 June 2012 - 04:49 PM

#1 cesarwj  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 06-January 12

How to highlight the menu topnav?

Posted 22 June 2012 - 03:07 PM

hi,

I want highlighted the current menu after passover the mouse on menu. See http://www.efk.se/. After u pass the mouse over the menu, the current menu is highlighted automatically.

Attached File(s)


Is This A Good Question/Topic? 0
  • +

Replies To: How to highlight the menu topnav?

#2 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: How to highlight the menu topnav?

Posted 22 June 2012 - 04:49 PM

So yeah, I don't really get what you're trying to say. I'm assuming that's not your site but you want to produce an effect similar to it. I'm not going to download your HTML file, I'd prefer you'd post your code here. But here's how I'd achieve that effect.

HTML document:

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>
	
	<body>
		<ol class="nav">
			<li id="red">Yo</li>
			<li id="blue">Sup</li>
		</ol>
	</body>
</html>


Here's the CSS:

.nav {
	margin: 0;
	padding: 0;
}

.nav li {
	display: inline;

	list-style-type: none;
}

.nav li#red:hover {
	background-color: #FF0000;
}

.nav li#blue:hover {
	background-color: #0000FF;
}


Do note, that this is a very minified version of what that site has. If you want me to work with your code, then post it on here in code tags. Let me know exactly what you want, and I'll try to see what I can get.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1