2
Contributors
1
Reply
2
Views
6 Years
Discussion Span
Last Post by Sanket_s
0

Try this code very simple to understand
just customize background colurs as you want

<html>
<head>
<style type="text/css">
<!--
.topmenu {
	border-bottom-width: thick;
	border-bottom-style: groove;
	border-bottom-color: #666;
	height: 20px;
	padding: 2px;
}
<!-- your menu class -->
.topmenu a {
	background-color: #666;
	border-bottom-width: medium;
	border-bottom-style: groove;
	border-bottom-color: #FFF;
	float: left;
	width: auto;
	font-family: sans-serif;
	font-size: 14px;
	color: #FFF;
	text-decoration: none;
	margin-right: 2px;
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 10px;
}
<!-- tab effect when on mouse over-->
.topmenu a.hover, .topmenu a:hover {	background-color: #000;
	border-bottom-width: medium;
	border-bottom-style: groove;
	border-bottom-color: #000;
	float: left;
	width: auto;
	font-family: sans-serif;
	font-size: 14px;
	color: #FFF;
	text-decoration: none;
	margin-right: 2px;
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 10px;
}
-->
</style>
</head>

<body>
<div class="topmenu">
<!--give class hover to link which you want to show as selected tab -->
 <a href="http://google.com" class="hover">google</a>
  <a href="http://yahoo.com">yahoo</a>
   <a href="http://flicker.com">flicker</a>
    <a href="http://facebook.com">facebook</a>
</div>
</body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.