Nav Menu items hover padding ignore margins - html

Interesting title I know, didn't know how else to word it. I'm trying to have my navigation bar items evenly spaced regardless of font type which will change the size slightly. I've included a :hover feature with will darken the background behind the items. This works well, however when I add margins or padding to the left and right of nav ul to indent the sides, the darkened area is omitted from the margin/padding space.
The first is how it looks with no 'nav ul' padding. The second is with it where the area is cut off and the third is how I'd like it to look (with the 'home' text more centered, this was a rough mspaint edit lol.
On top of this, is there a way to make the padding for the 'header nav ul li a {' align perfectly so there's no space inbetween? I have a few px's space between where the hover occurs to allow for change in font-type without ruining the even spacing.
Totally a beginner at both CSS and HTML so if you're going to help me please only offer your kindest beginner-friendly advice.
JSFiddle: https://jsfiddle.net/c1y9axqt/
Relevant code:
CSS
.container {
width: 960px;
padding: 0 10px;
margin: 0 auto;
}
.nav_menu {
background-color: #005073;
background-image: -webkit-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* Standard syntax */
-webkit-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4); /* For Firefox 3.6 to 15 */
-moz-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4); /* For Firefox 3.6 to 15 */
box-shadow: inset 0px 0px 2px 1x rgba(0,0,0,0.4); /* Standard syntax */
border-style: solid;
border-width: 1px;
border-color: black;
height: 26px;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content:space-between;
}
nav ul li{
display: inline;
}
header nav ul li a {
display: inline;
padding: 6px 30px 6px 30px;
letter-spacing: 1px;
text-decoration: none;
font-weight: bold;
line-height: 26px;
color: #EBEAEA;
text-shadow:
-1px -1px 1px rgba(0, 0, 0, .6),
1px -1px 1px rgba(0, 0, 0, .6),
-1px 1px 1px rgba(0, 0, 0, .6),
1px 1px 1px rgba(0, 0, 0, .6);
}
header nav ul li a:hover {
color: #E1E0E0;
background: rgba(0,0,0,0.2);
}
header nav ul li a:active {
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.7) inset;
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.7) inset;
box-shadow: 0 0 5px rgba(0,0,0,0.7) inset;
color: #CECCCC;
background: rgba(0,0,0,0.3);
}
HTML
<header>
<div class="container clearfix">
<div class="nav_menu">
<nav>
<ul>
<li>Home</li>
<li>Website Design</li>
<li>Art & Poetry</li>
<li>Blog & Other</li>
<li>Music & More</li>
<li>Shop</li>
</ul>
</nav>
</div> <!-- end of container-->
</div> <!-- end of navigator menu bar-->
</header>
JSFiddle (again lol): https://jsfiddle.net/c1y9axqt/

guess you wanted this i changed only the css thats all
.container {
width: 960px;
padding: 0 10px;
margin: 0 auto;
}
.nav_menu {
background-color: #005073;
background-image: -webkit-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* Standard syntax */
-webkit-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4); /* For Firefox 3.6 to 15 */
-moz-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4); /* For Firefox 3.6 to 15 */
box-shadow: inset 0px 0px 2px 1x rgba(0,0,0,0.4); /* Standard syntax */
border-style: solid;
border-width: 1px;
border-color: black;
height: 26px;
}
header nav ul li:hover {
color: #E1E0E0;
background: rgba(0,0,0,0.2);
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content:space-between;
}
nav ul li{
display: inline;
width:160px;
text-align:center;
}
header nav ul li a {
display: inline;
letter-spacing: 1px;
text-decoration: none;
font-weight: bold;
line-height: 26px;
color: #EBEAEA;
text-shadow:
-1px -1px 1px rgba(0, 0, 0, .6),
1px -1px 1px rgba(0, 0, 0, .6),
-1px 1px 1px rgba(0, 0, 0, .6),
1px 1px 1px rgba(0, 0, 0, .6);
}
header nav ul li a:hover {
color: #E1E0E0;
background: rgba(0,0,0,0.2);
}
header nav ul li a:active {
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.7) inset;
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.7) inset;
box-shadow: 0 0 5px rgba(0,0,0,0.7) inset;
color: #CECCCC;
background: rgba(0,0,0,0.3);
}
hope it helps

I've changed the way you had it styled slightly to keep things in blocks. I think you'd over complicated it for yourself in places.
As you can see i've set a width on the list items in the nav using % to keep them all evenly sized, and given them text-align: center;. Then by setting the background color of the anchor tags, it makes changing the color for the hover effect much easier.
You should look into Media Queries to make the nav become responsive for smaller screens.
Hope this all help,
Happy Coding!
Fiddle here
HTML:
<div id="navContainer">
<nav>
<ul>
<li>Home</li>
<li>Website Design</li>
<li>Art & Poetry</li>
<li>Blog & Other</li>
<li>Music & More</li>
<li>Shop</li>
</ul>
</nav>
</div>
CSS:
body {
margin: 0px 0px;
}
#navContainer {
width: 100%;
}
#navContainer nav {
width: 960px;
margin-left: auto;
margin-right: auto;
}
#navContainer ul {
list-style: none;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}
#navContainer li {
float: left;
width: 16.666667%;
text-align: center;
}
#navContainer a {
text-decoration: none;
display: block;
background-color: #005073;
line-height: 26px;
}
#navContainer a {
text-decoration: none;
display: block;
background-color: #005073;
line-height: 26px;
color: #EBEAEA;
text-shadow:
-1px -1px 1px rgba(0, 0, 0, .6),
1px -1px 1px rgba(0, 0, 0, .6),
-1px 1px 1px rgba(0, 0, 0, .6),
1px 1px 1px rgba(0, 0, 0, .6);
font-weight: bold;
letter-spacing: 1px;
background-image: -webkit-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* Standard syntax */
}
#navContainer a:hover {
color: #E1E0E0;
background-image: -webkit-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2)); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2)); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2)); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2)); /* Standard syntax */
}

Related

Fixing CSS navbar buttons floating and direction

I am having trouble with this navbar: https://jsfiddle.net/d6a7b3Ly/1/
1- With many links in the bar, the on-hover effect makes the other below links to move to the sides, but I am not sure which padding effect is doing that and how to fix it.
When changing border-top to 0px it fixes the issue, but makes the submenus not working:
#nav .current a, #nav li:hover > a {
background: #d1d1d1; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ebebeb, #a1a1a1); /* for firefox 3.6+ */
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
2- I am trying to make a right to left option of the menu. and I changed float: right; under #nav li { in the csss, and added the whole html in a <div dir="RTL">, but the level 2 submenus are still opening facing left, and they should be right. I tested some changes in the css but none worked for that.
Here is a link to the rtl navbar: https://jsfiddle.net/ct8kp6eo/1/
And this is the floating change in the CSS:
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: right;
position: relative;
list-style: none;
}
To solve issue add padding-top: 7px to adjust for the border-top spoiling the layout to #nav ul li:hover a, #nav li:hover li a.
You have overlapping labels and to solve that adjust the z-index property of the #nav li:hover > ul to 1.
body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ebebeb;
width: 900px;
margin: 100px auto;
color: #666;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
background: #8b8b8b; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a)); /* for webkit browsers */
background: -moz-linear-gradient(top, #a9a9a9, #7a7a7a); /* for firefox 3.6+ */
border: solid 1px #6d6d6d;
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #d1d1d1; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ebebeb, #a1a1a1); /* for firefox 3.6+ */
color: #444;
border-top: solid 1px #f8f8f8;
padding-top: 7px; /* ADDED */
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0399d4 !important; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* for webkit browsers */
background: -moz-linear-gradient(top, #04acec, #0186ba) !important; /* for firefox 3.6+ */
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
background: #ddd; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #cfcfcf); /* for firefox 3.6+ */
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* dropdown */
#nav li:hover > ul {
display: block;
z-index: 1; /* ADDED */
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
<ul id="nav">
<li class="current">Home</li>
<li>My Projects
<ul>
<li>N.Design Studio
<ul>
<li>Portfolio</li>
<li>WordPress Themes</li>
<li>Wallpapers</li>
<li>Illustrator Tutorials</li>
</ul>
</li>
<li>Web Designer Wall
<ul>
<li>Design Job Wall</li>
</ul>
</li>
<li>IconDock</li>
<li>Best Web Gallery</li>
</ul>
</li>
<li>Multi-Levels
<ul>
<li>Team
<ul>
<li>Sub-Level Item</li>
<li>Sub-Level Item
<ul>
<li>Sub-Level Item</li>
<li>Sub-Level Item</li>
<li>Sub-Level Item</li>
</ul>
</li>
<li>Sub-Level Item</li>
</ul>
</li>
<li>Sales</li>
<li>Another Link</li>
<li>Department
<ul>
<li>Sub-Level Item</li>
<li>Sub-Level Item</li>
<li>Sub-Level Item</li>
</ul>
</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
<li>Contact Us</li>
<li>Contact Us</li>
<li>Contact Us</li>
<li>Contact Us</li>
<li>Contact Us</li>
<li>Contact Us</li>
<li>Contact Us</li>
</ul>
To solve the second issue, add transform: translateX(-100%); to the #nav ul ul rule instead of the left value - see demo below:
body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ebebeb;
margin: 100px auto;
color: #666;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
background: #8b8b8b; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a)); /* for webkit browsers */
background: -moz-linear-gradient(top, #a9a9a9, #7a7a7a); /* for firefox 3.6+ */
border: solid 1px #6d6d6d;
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: right;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 4px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #d1d1d1; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ebebeb, #a1a1a1); /* for firefox 3.6+ */
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0399d4 !important; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* for webkit browsers */
background: -moz-linear-gradient(top, #04acec, #0186ba) !important; /* for firefox 3.6+ */
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
background: #ddd; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #cfcfcf); /* for firefox 3.6+ */
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 10px
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
/*left: 181px;*/
top: -3px;
transform: translateX(-100%);
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "#">
<body>
<div dir="RTL">
<ul id="nav" >
<li class="current" >Home</li>
<li>test
<ul>
<li>test >
<ul>
<li>test 2</li>
<li>test 3</li>
<li>test test test test test 4</li>
<li>test 555 Tutorials</li>
</ul>
<li>test
<ul>
<li>Design Job Wall</li>
</ul>
</li>
<li>IconDock</li>
<li>Best Web Gallery</li>
</ul>
</li>
<li>Multi-Levels
<ul>
<li>Team
<ul>
<li>Sub-Level Item</li>
<li>Sub-Level Item
<ul>
<li>Sub-Level Item</li>
<li>Sub-Level Item</li>
<li>Sub-Level Item</li>
</ul>
</li>
<li>Sub-Level Item</li>
</ul>
</li>
<li>Sales</li>
<li>Another Link</li>
<li>Department
<ul>
<li>Sub-Level Item</li>
<li>Sub-Level Item</li>
<li>Sub-Level Item</li>
</ul>
</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
You are adding a border-top solid 1px on hover. Change it to 0px on hover and it will work fine.
#nav .current a, #nav li:hover > a {
background: #d1d1d1; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ebebeb, #a1a1a1); /* for firefox 3.6+ */
color: #444;
/*border-top: solid 1px #f8f8f8;*/
border-top: solid 0px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
adding 1px top on the hover just gets too much, which makes your items move

Button on hover flashes a glitchy black border?

When I hover over one of these buttons it flashes a black border and then it disappears. There is no border in the code. I am also using Chrome if that causes any issues. I do not want the border here.
Here is the code:
body {
background: #5544aa;
}
nav {
background: rgba(0, 0, 0, .2);
border-radius: 0px;
box-shadow: 2px 2px 3px rgba(255,255,255,0.1), -2px -2px .5px rgba(0,0,0,0.3);
}
nav ul {
width: 950px;
margin: 0 auto;
}
nav ul li {
list-style-type: none;
width: 150px;
margin-top: 15px;
float: left;
border: none;
text-align: center;
}
li a {
text-decoration: none;
color: #555555;
border-radius: 0px;
box-shadow: 0 0 0 #000;
text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
line-height: 50px;
display: block;
transition: all ease-in-out 250ms;
}
li a:hover {
background: rgba(255, 255, 255, .1);
box-shadow: 0 8px 8px -6px #333, inset 0 0 3px rgba(0,0,0,0.1);
color: #222222;
padding: 0px 0px;
text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
<nav>
<ul>
<li> Home
</li>
<li> Products
</li>
<li> Contacts
</li>
<li> About
</li>
</ul>
</nav>
It will be your box-shadow transitioning. To stop it, you'll need to edit your transition from all to just the CSS rules you want to transition.
I fixed it. I needed to delete the box-shadow: 0 0 0 #000; in the li a { } part. Now it works just fine.

How can I show my upper menu, above any icons and text?

I have an upper menu with the following CSS:-
nav {
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
background-image: linear-gradient(#fff, #ccc);
border-radius: 6px;
box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);
padding: 0 10px;
position: relative;
}
.menu li {
float: left;
position: relative;
list-style-type: none;
/*background: url('img/denim.png');
font-family: 'Droid Sans', sans-serif;*/
}
.menu li a {
color: #444;
display: block;
font-size: 12px;
line-height: 5px;
padding: 6px 12px;
margin: 8px 8px;
vertical-align: middle;
text-decoration: none;
}
.menu li a:hover {
background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));
background-image: linear-gradient(#ededed, #fff);
border-radius: 12px;
box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
color: #222;
}
/* Dropdown styles */
.menu ul {
position: absolute;
left: -9999px;
list-style: none;
opacity: 0;
transition: opacity 1s ease;
}
.menu ul li {
float: none;
}
.menu ul a {
white-space: nowrap;
}
/* Displays the dropdown on hover and moves back into position */
.menu li:hover ul {
background: rgba(255,255,255,0.7);
border-radius: 0 0 6px 6px;
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
left: 5px;
opacity: 1;
}
/* Persistant Hover State */
.menu li:hover a {
background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));
background-image: linear-gradient(#ccc, #ededed);
border-radius: 12px;
box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
color: #222;
}
.menu li:hover ul a {
background: none;
border-radius: 0;
box-shadow: none;
}
.menu li:hover ul li a:hover {
background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff));
background-image: linear-gradient(#ededed, #fff);
border-radius: 12px;
box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);
}
Currently when the menu is displayed above an icon , the icon will occur above the menu text as follow:-
So is there a way to force the menu to be displayed above any text and icons ?
Thanks
Use Z-index to a high level on the menu and set the background color to solid white on the .menu li class as shown below:
nav {
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
background-image: linear-gradient(#fff, #ccc);
border-radius: 6px;
box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);
padding: 0 10px;
position: relative;
z-index: 1000;
}
.menu li {
float: left;
position: relative;
list-style-type: none;
/*background: url('img/denim.png');
font-family: 'Droid Sans', sans-serif;*/
z-index: 1000;
}
.menu li:hover ul {
/*background: rgba(255,255,255,0.7);*/
background: rgba(255,255,255,1); /* use this to make the background solid white */
border-radius: 0 0 6px 6px;
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
left: 5px;
opacity: 1;
z-index:1000;
}
You need to change the background-color opacity to 1 block out the rear elements.
.menu li:hover ul {
background: rgba(255,255,255,1);
...

How come the navigation's box-shadow isn't showing?

I want to have the header's navigation to have a box shadow. However, the box-shadow seems to be hidden by the carousel I placed below it. I put a z-index of all children of #carousel but the box-shadow still doesn't show up.
(page snippet)
Here's what happens when I push #carousel down when I give it margin-top: 40px;
(another page snippet)
HTML
<header>
<nav>
<div class="container">
<h1><img src="images/logo.png" alt="" id="logo"></h1>
<h1 id="NHS">Newport High School</h1>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Students</li>
<li>Parents</li>
<li>Activities & Atletics</li>
<li>Resources</li>
</ul>
</div><!--container--->
</nav>
</header><div id="carousel">
<div class="inner">
<ul>
<li><img src="images/example-slide-1.jpg" alt="Fish"></li>
<li><img src="images/example-slide-2.jpg" alt="Elephant"></li>
<li><img src="images/example-slide-3.jpg" alt="Giraffe"></li>
<li><img src="images/example-slide-4.jpg" alt="Fish"></li>
</ul>
</div>
</div>
CSS
/* - - - header - - - */
header {
background: rgb(30,27,27); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,27,27,1) 0%, rgba(2,2,2,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,27,27,1)), color-stop(100%,rgba(2,2,2,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%);
box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
-webkit-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
-moz-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
z-index: 1000;
}
header h1, header li {
float: left;
}
header a {
color: #A1A1A1 ;
font-family: arial, helvetica, verana, sans-serif;
}
header a:hover {
color: #A1A1A1;
text-decoration: none;
}
#logo {
width: 50px;
}
#NHS {
margin: 1.8% 0 0 2%;
font-size: 1.2em;
text-transform: uppercase;
}
#NHS a {
color: #F6F6F6;
letter-spacing: 2px;
}
#nav {
float: right;
margin: 3% 0 0 0;
}
#nav li {
margin-right: 20px;
padding: 0;
}
#nav li:last-of-type {
margin-right: 0px;
}
#nav a {
font-size: .8em;
text-transform: uppercase;
padding-top: 3px;
font-weight: 400;
}
#nav a:hover {
border-top: 1px dotted #C41D0E;
}
/* - - - carousel - - - */
#carousel {
margin: 40px 0 0 0;
width: 100%;
overflow: hidden;
z-index: -999;
}
#carousel .inner {
box-sizing: border-box;
margin-left: -50px;
z-index: -5000;
}
#carousel ul {
width: 60000px;
height: 480px;
z-index: -5000;
}
#carousel li {
height: 480px;
float: left;
overflow: hidden;
z-index: -5000;
}
#carousel img {
text-align: center;
width: 1375px;
height: auto;
z-index: -5000;
}
Remember z-index only works with positioned elements. So both your carousel and header needs to have a position value other than static and then you can specify a higher z-index to the header. That way box-shadow will appear properly above the carousel.
You only need to add position:relative to the header. The carousel doesn't need a z-index alteration.
try adding !important to your shadowbox. I think that should work.
box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;
-webkit-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;
-moz-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;

Working with CSS3 Menu

I am presently doing a project with menus and trying to implement something which is the same menu appeared below:
And now I have got which is similar to this menu and trying to modify it but I am stucked with it.
Here is the screenshot of my menu how it looks in chrome:
And this is how it looks in IE8 and firefox:
The problem is I am able to get rounded corners but the gloss and the bump over the menu which is shown in 1st menu is not appearing in my menu as it is showing as flat in chrome,IE as well as firefox.So how do I modify in order to get the same menu as shown in 1st figure.
Here is my menu css:
.menu
{
height: 18px;
margin-left:318px;
margin-top:10px;
width:914px;
border: 1px solid #d6d6d6;
background: #fff;
padding: 14px;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #1612CE;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#1612CE), to(#3B91F1));
background: -webkit-linear-gradient(#1612CE, #3B91F1);
background: -moz-linear-gradient(#1612CE, #3B91F1);
background: -ms-linear-gradient(#1612CE, #3B91F1);
background: -o-linear-gradient(#1612CE, #3B91F1);
background: linear-gradient(#1612CE, #3B91F1);
behavior: url(css/ie-css3.htc);
}
.blue {
background : rgb(52,119,210);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(52,119,210)), to(rgb(34,98,188)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(52,119,210)), to(rgb(34,98,188)));
border: 1px solid #2f8893;
}
.blue li a
{
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.40);
}
a {
text-decoration: none;
color: #262626;
line-height: 20px;
}
ul
{
margin: 0;
padding: 0;
z-index: 300;
text-align:right;
}
li
{
padding: 0 10px;
display:inline-block;
}
li:first-child {
float:left;
}
This is how I'm showing it:
<div class="menu blue">
<ul >
<li class="active">Home</li>
<li>About</li>
<li>Blog</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contacts</li>
<li>Back to Article</li>
<li>How it Works?</li>
</ul>
</div>
Try this combination of colors: http://jsfiddle.net/TLS3Y/4/
CSS3 Please! makes all these CSS3 rules so easy :)
.menu {
border-color: #598FD1 #598FD1 #1A53A2;
border-style: solid;
border-width: 2px 1px 3px;
height: 18px;
margin-left: 318px;
margin-top: 10px;
padding: 14px;
text-align: center;
width: 914px;
background-color: #2A72D8;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2A72D8), to(#1A53A2));
background-image: -webkit-linear-gradient(top, #2A72D8, #1A53A2);
background-image: -moz-linear-gradient(top, #2A72D8, #1A53A2);
background-image: -ms-linear-gradient(top, #2A72D8, #1A53A2);
background-image: -o-linear-gradient(top, #2A72D8, #1A53A2);
background-image: linear-gradient(top, #2A72D8, #1A53A2);
-webkit-box-shadow: inset 0px 0px 9px #2A72D8;
-moz-box-shadow: inset 0px 0px 9px #2A72D8;
box-shadow: inset 0px 0px 9px #2A72D8;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
behavior: url(css/ie-css3.htc);
}
First of all i encourage you to use Lea Verou's http://leaverou.github.com/prefixfree/ which saves you the pain of having to add all those prefixes for different browsers and makes just one linear-gradient declaration
Second you are not using the proper declarations for linear-gradient in webkit. Should be
-webkit-linear-gradient(rgb(52,119,210),rgb(34,98,188))
This is the shorthand method which you should use since you are not specifying any angles for your gradient
This is also available in FF
background: -moz-linear-gradient(rgb(52,119,210),rgb(34,98,188)); /* Firefox */
background: -webkit-linear-gradient(rgb(52,119,210),rgb(34,98,188)); /* Webkit */
For a 3d-er look add box-shadow set on inset
box-shadow:inset 0 1px 0 #fff; // for a nice thing white line at the top of the menu
You can also chain the box-shadow declarations and have
box-shadow:inset 0 1px 0 #fff, 0 2px 5px #222 // thing white line at the top and drop shadow
You can emboss the ul using box-shadow:
div.blue {
box-shadow: 2px 2px 2px #888888;
}
Gradient can be made with linear-gradient. I like the generator at http://gradients.glrzad.com/.