Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts

    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.

  • #2
    New Coder
    Join Date
    Apr 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •