How to get border in nav menu on hover?

Can you help me achieve it ?

You might be able to try something like this

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SitePoint</title>
<style>

nav ul {
	width:500px;
        margin: 0;
        padding: 0;
	background-color:#EBE4C0;
	margin:0 auto;
	text-align:center;
}

nav ul li {
	display:inline;
	padding: 0 15px;
	}
	
nav ul li:hover {
	border:1px solid #000000;
	}

</style>
</head>

<body>

<nav>
    <ul>
    	<li>Home</li>
        <li>About us</li>
        <li>Contact is</li>
    </ul>

</nav>
</body>
</html>

That’s just a gray border with border-radius on it. Maybe 6-7px worth of border radius. The above example is fine but add in (on :hover) border-radius:5px;

Adjust as needed.

HI,

Generally you don’t want to change the width of an item on hover or else the whole page reflows and jiggles about. Therefore if you want to add a border on hover then first make sure that you have a border in the current background colour and then just change the border-color on hover and there will be no horrible jog.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.nav {
	margin:10px auto;
	padding:0;
	max-width:960px;
	width:100%;
	text-align:center;
	display:table;
}
.nav li {
	display:table-cell;
	text-align:center;
}
.nav li a {
	display:inline-block;
	padding:5px 10px;
	border:1px solid #fff;
	border-radius:6px;
	color:#000;
	font-size:120%;
	text-decoration:none;
	line-height:1.0;
}
.nav li a:hover {border-color:#ccc}
</style>
</head>

<body>
<ul class="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Pricing</a></li>
</ul>
</body>
</html>

(If you have a background and the white border spoils the effect then instead add 1px extra padding by default and then when you add the border on hover reduce the padding so that no reflow occurs).

You could probably add an outline on :hover instead of a border and avoid any jiggle.

/*********************************************************************************/
/* Nav                                                                           */
/*********************************************************************************/

	#nav
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		text-align: center;
		padding: 1.5em 0 1.5em 0;
		z-index: 1;
		overflow: hidden;
	}
	
		#nav > ul
		{
			line-height: 0px;
			position: relative;
			display: inline-block;
			margin: 0;

			height: 21px;
			border-left: solid 1px rgba(192,192,192,0.35);
			border-right: solid 1px rgba(192,192,192,0.35);
		}
		
			#nav > ul:before,
			#nav > ul:after
			{
				content: '';
				display: block;
				width: 300%;
				position: absolute;
				top: 50%;
				margin-top: -2px;

				height: 5px;
				border-top: solid 1px rgba(192,192,192,0.35);
				border-bottom: solid 1px rgba(192,192,192,0.35);
			}
		
			#nav > ul:before
			{
				left: 100%;
				margin-left: 1px;
			}
		
			#nav > ul:after
			{
				right: 100%;
				margin-right: 1px;
			}
		
			#nav > ul > li
			{
				display: inline-block;
				margin: -9px 0.5em 0 0.5em;
				border-radius: 0.5em;
				padding: 0.85em;
				border: solid 1px transparent;
				-moz-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
				-webkit-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
				-o-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
				-ms-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
				transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
				
}
			
			
				#nav > ul > li.active
				{
					border-color: rgba(192,192,192,0.45);
				}
			
				#nav > ul > li > a,
				#nav > ul > li > span
				{
	display: block;
	color: #666;
	text-decoration: none;
	border: medium  #C6C6C6;
	outline: 3;
				}

				#nav > ul > li > ul
				{
					display: none;
				}

	.dropotron
	{
		background:rgba(143,213,244,0.4);
		padding: 1em 1.25em 1em 1.25em;
		line-height: 1em;
		height: auto;
		text-align: left;
		border-radius: 0.5em;
		box-shadow: 0 0.15em 0.25em 0 rgba(0,0,0,0.25);
		min-width: 12em;
	}
	
		.dropotron li
		{
			color: #000000;
		}
		
			.dropotron li:first-child
			{
				border-top: 0;
			}

			.dropotron li:hover
			{
				color: #151515;
			}

			.dropotron li a,
			.dropotron li span
			{
				display: block;
				border: 0;
				padding: 0.5em 0 0.5em 0;
				-moz-transition: color 0.35s ease-in-out;
				-webkit-transition: color 0.35s ease-in-out;
				-o-transition: color 0.35s ease-in-out;
				-ms-transition: color 0.35s ease-in-out;
				transition: color 0.35s ease-in-out;
			}
		
		.dropotron.level-0
		{
			margin-top: 2em;
			font-size: 0.9em;
		}
		
			.dropotron.level-0:before
			{
				content: '';
				position: absolute;
				left: 50%;
				top: -0.7em;
				margin-left: -0.75em;
				border-bottom: solid 0.75em rgba(255,255,255,0.975);
				border-left: solid 0.75em rgba(64,64,64,0);
				border-right: solid 0.75em rgba(64,64,64,0);
			}

The code looks like this, I have border on Services hover, but I am not sure how to add it to the other links.

Hi,

CSS on its own means nothing without the html to which it is being applied (although If I spent an hour on it I could probably guess at the html). :slight_smile:

That is some substantial CSS so will need the html that goes with it or at least a working demo (or a link to the actual page). It looks like that is a dropdown menu also so will need more specific targeting but the techniques we have already described will still work if targeted correctly.

HI,

In the page you sent me via PM you can turn on the border with:


#nav > ul > li:hover {border-color:rgba(192,192,192,0.5)}


Love you! Thanks!