Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page Resolved Need help getting rid of/changing border color on nav menu

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 04-24-2012, 04:14 AM   PM User | #1
jaydrones
New Coder

 
Join Date: Apr 2012
Posts: 22
Thanks: 6
Thanked 0 Times in 0 Posts
jaydrones is an unknown quantity at this point
Need help getting rid of/changing border color on nav menu
I've been trying to figure out how to get rid of this pesky blue border color that's ruining the flow of my nav menu. Below is the HTML and CSS of the exact project I'm trying to set up so if you want to copy and paste it you'll see what I'm talking about. If not then it's a blue border on the top of the parent menu buttons when they're hovered over. I've been trying to play around and figure out what to change to get rid of it, but I can't seem to get it. Help!!

HTML
Code:
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
 
        <title>Vertical Navigation Menu: CSS3 Coded</title>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        
 
        <link rel="stylesheet" href="horizontal-nav.css" type="text/css" >
         
</head>
<body>
 
 
<div id="wrapper">
 
    <ul class="menu">
        <li class="item1"><a href="#">Friends <span>340</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
        <li class="item2"><a href="#">Videos <span>147</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
        <li class="item3"><a href="#">Galleries <span>340</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
        <li class="item4"><a href="#">Podcasts <span>222</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
        <li class="item5"><a href="#">Robots <span>16</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
    </ul>
 
</div>
  
 
</body>
</html>
CSS
Code:
body {
	font-size: 100%;
	background:#32373d;
}
a {
	text-decoration: none;
}
ul, ul ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#wrapper {	
	width: 220px;
	margin: 100px auto;
	font-size: 0.8125em;
}
.menu {
	width: auto;
	height: auto;
	-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
	-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
	background-color: #616975;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
	background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
	background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
	background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
	background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
	background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
	border-bottom: 1px solid #33373d;
	-webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
	-moz-box-shadow: inset 0px 1px 0px 0px #878e98;
	box-shadow: inset 0px 1px 0px 0px #878e98;
	width: 100%;
	height: 2.75em;
	line-height: 2.75em;
	text-indent: 2.75em;
	display: block;
	position: relative;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 600;
	color: #fff;
	text-shadow: 0px 1px 0px rgba(0,0,0,.5);
}
.menu ul li a {
	background: #fff;
	border-bottom: 1px solid #efeff0;
	width: 100%;
	height: 2.75em;
	line-height: 2.75em;
	text-indent: 2.75em;
	display: block;
	position: relative;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.923em;
	font-weight: 400;
	color: #878d95;
}
.menu ul li:last-child a {
	border-bottom: 1px solid #33373d;
}
.menu > li > a:hover, .menu > li > a.active {
background-image: linear-gradient(bottom, rgb(0,0,0) 12%, rgb(122,7,7) 56%);
background-image: -o-linear-gradient(bottom, rgb(0,0,0) 12%, rgb(122,7,7) 56%);
background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 12%, rgb(122,7,7) 56%);
background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 12%, rgb(122,7,7) 56%);
background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 12%, rgb(122,7,7) 56%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.12, rgb(0,0,0)),
	color-stop(0.56, rgb(122,7,7))
);

	border-bottom: 1px solid #103c56;
	-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
	-moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
	box-shadow: inset 0px 1px 0px 0px #6ad2ef;
}
.menu > li > a.active {
	border-bottom: 1px solid #1a638f;
}
.menu > li > a:before {
	content: '';
	background-image: url(../images/sprite.png);
	background-repeat: no-repeat;
	font-size: 36px;
	height: 1em;
  	width: 1em;
	position: absolute;
  	left: 0;
	top: 50%;
	margin: -.5em 0 0 0;
}
.item1 > a:before {
	background-position: 0 0;
}
.item2 > a:before {
	background-position: -38px 0;
}
.item3 > a:before {
	background-position: 0 -38px;
}
.item4 > a:before {
	background-position: -38px -38px;
}
.item5 > a:before {
	background-position: -76px 0;
}
.menu > li > a span {
	font-size: 0.857em; 
	display: inline-block;
	position: absolute;
	right: 1em;
	top: 50%; 
	background: #48515c;
	line-height: 1em;
	height: 1em;
	padding: .4em .6em;
	margin: -.8em 0 0 0; 
	color: #fff;
	text-indent: 0;
	text-align: center;
	-webkit-border-radius: .769em;
	-moz-border-radius: .769em;
	border-radius: .769em;
	-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
	-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
	box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
	text-shadow: 0px 1px 0px rgba(0,0,0,.5);
	font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
	background: #2173a1;
}
.menu > li > ul li a:before{
	content: '▶';
	font-size: 8px;
	color: #bcbcbf;
	position: absolute;
	width: 1em;
	height: 1em;
	top: 0;
	left: -2.7em;
}

.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
	color: #32373D;
}


.menu ul > li > a span {
	font-size: 0.857em; 
	display: inline-block;
	position: absolute;
	right: 1em;
	top: 50%; /
	background: #fff;
	border: 1px solid #d0d0d3;
	line-height: 1em;
	height: 1em;
	padding: .4em .7em;
	margin: -.9em 0 0 0; 
	color: #878d95;
	text-indent: 0;
	text-align: center;
	-webkit-border-radius: .769em;
	-moz-border-radius: 769em;
	border-radius: 769em;
	text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}
Last edited by jaydrones; 04-24-2012 at 04:44 AM..
jaydrones is offline   Reply With Quote
Old 04-24-2012, 04:43 AM   PM User | #2
jaydrones
New Coder

 
Join Date: Apr 2012
Posts: 22
Thanks: 6
Thanked 0 Times in 0 Posts
jaydrones is an unknown quantity at this point
Quote:
Originally Posted by iBall View Post
I copied and pasted your html and css into a file and I'm not seeing any blue border in IE9 and FF11 when I hover over any parent menu item. The only thing that changes is the background colour in the parent menu's span to blue. ie. when I hover on Friends, the bg colour behing 340 changes to a blueish color. I don't get any border anywhere.

What browser and version are you seeing the blue border in? Perhaps you're using an old browser that doesn't support css3 at all.

btw - I first corrected a couple of syntax errors in your css as well.
Hey man I appreciate the help, but I JUST figured out what the problem was right before I refreshed this. It was actually a box shadow at the bottom of the hover, not a border. Doh! Still a newbie :P

Code:
.menu > li > a:hover, .menu > li > a.active {
	background: rgb(169,3,41); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* IE10+ */
	background: linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */

	border-bottom: 1px solid #103c56;
	-webkit-box-shadow: inset 0px 1px 0px 0px #363636;
	-moz-box-shadow: inset 0px 1px 0px 0px $363636;
	box-shadow: inset 0px 1px 0px 0px #363636;
last 3 lines for anyone that might have the same problem!
jaydrones is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 08:59 AM.
Advertisement
Log in to turn off these ads.