i have an issue on my nav bar..trying to cpy the "Dragon interactive" nav only with html and css (still new ont this so i can not handel javascript or jquery yet!!).
since the transition on gradient background is not availble on css i tryed the opacity...things seem working wel for background but the navbar text go away when mouse hover!! any idea guys how to overcome this issue simply!!(css only :p)
html
<div class="wrapper">
<div class="container"><ul class="menu" rel="sam1">
<li class="active">Acceuil</li>
<li><span>Services</span></li>
<li>assistance</li>
<li><a href="http://www.ats.dz" target='_blank'>Produits</a></li>
<li>Contacts</li>
</ul>
</div></div>
css
.wrapper {
width: 100%;
height: 70px;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top: 0px solid #939393;
position: relative;
margin-bottom: 30px;
margin-left:150px;
}
ul {
margin: 0;
padding: 0;
}
ul.menu {
height: 70px;
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
float:left;
}
ul.menu li {
list-style: none;
float:left;
height: 69px;
text-align: center;
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
ul li a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 69px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: opacity;
-webkit-transition-duration: 1.5s;
-moz-transition-property: opacity;
-moz-transition-duration: 1.5s;
text-decoration:none;
color:#000;
font-weight:bold;
text-transform: uppercase;
font-size:13px;
opacity:1;
}
ul li a:hover {
opacity:0;
}
ul li.active a{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
color:#fff;
}
Thank you!!
Well, this happens because of this line:
ul li a:hover {
opacity:0;
}
Related
like this. so 'a' elements adjoin to each other. And with work transition. Do you know how it to implement? i'll be very happy if you at least give me some link
you may use gradients to draw each parts on top of a background-color :
If gradients are not avalaible (older browser), you still have a background to show different state.
nav {
background: #009EAC
}
a {
display: inline-block;
padding: 1em;
color: white;
font-weight: 900;
text-shadow: 1px 1px 1px #333;
text-decoration: none;
background: linear-gradient(-250deg, #009EAC 0.5em, #009EAC 0.5em) top left no-repeat, linear-gradient(70deg, #009EAC 0.5em, #009EAC 0.5em) bottom left no-repeat, linear-gradient(250deg, #009EAC 0.5em, #009EAC 0.5em) top right no-repeat, linear-gradient(-70deg, #009EAC 0.5em, #009EAC 0em) bottom right no-repeat, linear-gradient(to bottom, rgba(255, 250, 0, 0), transparent) top left no-repeat;
background-size: 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 80%;
transition:background 0.5s;
}
a.active,
a:hover {
background: linear-gradient(-250deg, #009EAC 0.5em, transparent 0.5em) top left no-repeat, linear-gradient(70deg, #009EAC 0.5em, transparent 0.5em) bottom left no-repeat, linear-gradient(250deg, #009EAC 0.5em, transparent 0.5em) top right no-repeat, linear-gradient(-70deg, #009EAC 0.5em, transparent 0.5em) bottom right no-repeat, linear-gradient(to bottom, rgba(255, 250, 0, 0.9), transparent) top left no-repeat;
background-color: #EEB01F;
background-size: 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 80%;
}
<nav><a href>LINK</a><a href class="active">ACTIVE HOVER STATE</a><a href>HOVER ME</a>
</nav>
codepen to play with
You can use :before and :after pseudo elements
ul {
padding: 0;
list-style-type: none;
display: flex;
background: #019CB2;
}
a {
text-decoration: none;
color: white;
}
li {
padding: 10px 20px;
margin: 0 10px;
position: relative;
transition: all 0.3s ease-in;
}
li:after,
li:before {
content: '';
top: 0;
position: absolute;
transition: all 0.3s ease-in;
width: 0;
height: 0;
}
li:before {
left: 0;
border-style: solid;
border-width: 20px 10px 20px 0;
border-color: transparent #019CB2 transparent transparent;
transform: translateX(-100%);
}
li:after {
right: 0;
border-style: solid;
border-width: 20px 0 20px 10px;
border-color: transparent transparent transparent #019CB2;
transform: translateX(100%);
}
li:hover {
background: #FFE902;
}
li:hover:after {
border-color: transparent transparent transparent #FFE902;
}
li:hover:before {
border-color: transparent #FFE902 transparent transparent;
}
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
I 'm trying to create a menu. On the active menu item there should be a arrow pointing downwards which looks something like this
So far this is what I have
http://codepen.io/anon/pen/akcfe
My CSS code:
select{
display:none;
}
nav {
margin: 0 auto;
text-align: center;
background: #fff;
height:70px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
}
nav ul li {
float: left;
margin: 0;
padding: 0;
}
nav ul li a {
display: block;
padding: 10px 7px;
width:80px;
color: #000;
text-decoration:none;
}
nav ul li~li { border-left: 1px solid #857D7A; }
nav .active a {
color:#fff;
}
CSS snippet answer: in-action: http://jsfiddle.net/hba18byw/
nav .active:before{
content: ' ';
border:10px solid transparent;
border-top:10px solid red;
border-left:10px solid transparent;
display:inline-block;
height:0;
width:0;
position:absolute;
margin-left:-10px
}
Full CSS:
select{
display:none;
}
nav {
margin: 0 auto;
text-align: center;
background: #fff;
height:70px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
background: rgba(148,148,149,1);
background: -moz-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(148,148,149,1)), color-stop(36%, rgba(192,192,192,1)), color-stop(100%, rgba(192,192,192,1)));
background: -webkit-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -o-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -ms-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: linear-gradient(to bottom, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#949495', endColorstr='#c0c0c0', GradientType=0 );
}
nav ul li {
float: left;
margin: 0;
padding: 0;
}
nav ul li a {
display: block;
padding: 10px 7px;
width:80px;
color: #000;
text-decoration:none;
}
nav ul li~li { border-left: 1px solid #857D7A; }
nav .active:before{
content: ' ';
border:10px solid transparent;
border-top:10px solid red;
border-left:10px solid transparent;
display:inline-block;
height:0;
width:0;
position:absolute;
margin-left:-10px
}
Please check this: http://codepen.io/fadyhasn/pen/sgLiy. These are the extra styles which I've added:
li.active:before {
content: '▼';
position: absolute;
margin-top: -3px;
margin-left: -5px;
color: orange;
font-size: 13px;
transform: scale(2,1);
-webkit-transform: scale(2,1);
-moz-transform: scale(2,1);
-ms-transform: scale(2,1);
-o-transform: scale(2,1);
}
nav ul {
border-top: 5px solid orange;
}
I managed to create a menu with drop-down-menu (sub menu) using CSS. But I can't able to add smooth drop down-menu effect to my coding. I tried to add -moz-transition and more. I didn't know where to add those transition to make my normal drop-down-menu as smooth drop down-menu effect.
Below is my HTML coding
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
Here is the css
<style media="screen" type="text/css">
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
height: 49px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #fefefe;
background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0));
background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
background: linear-gradient(top, #fefefe 0%, #eee9f0 100%);
border-bottom: 2px solid #db000b;
width: auto;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #fefefe;
background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec));
background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: linear-gradient(top, #fefefe 0%, #ececec 100%);
color: #000;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
float: left;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li > a {
color: #000;
font-size: 12px;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #db000b;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li.active:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #db000b;
margin-left: -10px;
}
#cssmenu > ul > li.active > a {
-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
background: #ececec;
background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
}
#cssmenu > ul > li:hover > a {
background: #ececec;
background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #db000b;
border-bottom: 1px dotted #ff0f1b;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
background: #a80008;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #a80008;
border-bottom: 1px dotted #ff0f1b;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #8f0007;
}
</style>
When you wrote 'smooth CSS menu' you meant without javascript and only CSS ?
If so, use css level 3 transition.
#cssmenu ul ul {
/* this will apply to inner UL, adapt to your desired selector */
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
}
[EDIT]
If it is not working for your context, perhaps it is because there is no 'height to your inner UL element.
#cssmenu .has-sub:hover > ul {
display: block;
height:auto; /* add this */
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
height:0; /* add this */
top: 100%;
left: 0;
}
For more about the topic for a cross-browser solution, search the net for css transition generator
I'd recommend using something a little more extensive, such as jQuery, to give your desired effect. Here's a link to the 'accordion' effect that sounds like something you're going for. The layout of the accordion menu is completely adjustable - so don't worry if you don't like the design of the default layout.
http://jqueryui.com/accordion/#default
Adding jQuery to your webpage takes about 30 seconds, but gives you an eternity of useful additions, animations, and interactive content manipulation for your page!
u can use jquery for easing effects for your dropdwon menu here is one example
http://devsnippets.com/article/slick-drop-down-menu-with-easing-effect-using-jquery-css.html
I use this
http://cssdeck.com/labs/pure-css3-smooth-drop-down-menu
This menu is created only in CSS3 which is inspired from this post on Forrst! This consists of a nested ul structure to create the second level of the menu which is initially hidden with it's opacity set to 0. When the link is hovered, the respective ul shows up and slides down. This is achieved by setting its opacity to 1 and changing it's top offset when it's hovered in conjuction with the CSS3 transitions to animate the process smoothly.
Check out the code and play with it as much as you like :)
I have an image I would like to apply to a submenu:
I have added css to apply it but is not working, How can I achieve something like?:
instead of
I have tried to put submenu to the left padding left <ul class="sub-menu" style="padding-left: -30px;"> but it does not work, to apply image I added
#menu ul.sub-menu li {
width: 200px;
background: no-repeat url(menu.png);
border-width: 0 1px 1px 1px;
border-style: solid;
}
But that does not work.
Here is html
<div id="menu">
<nav>
<ul style="padding-left: 0px;">
<li>menu 1
</li>
<li>menu 2
<ul class="sub-menu" style="padding-left: -30px;">
<li>1 submenu
</li>
<br/>
<li>2 submenu
</li>
<br/>
<li>3 submenu
</li>
<br/>
<li>4 submenu
</li>
<br/>
</ul>
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
<li>menu 6
</li>
<li>menu 7
</li>
</ul>
</nav>
</div>
here is css:
#menu {
width: 100%;
-webkit-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
-moz-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
padding-top: 15px;
}
hgroup, main, nav {
margin-bottom: 30px;
width: 100%;
background: -moz-linear-gradient(top, #353535 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353535), color-stop(100%, #222222));
background: -webkit-linear-gradient(top, #353535 0%, #222222 100%);
background: -o-linear-gradient(top, #353535 0%, #222222 100%);
background: -ms-linear-gradient(top, #353535 0%, #222222 100%);
background: linear-gradient(top, #353535 0%, #222222 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#353535', endColorstr='#222222', GradientType=0);
border-top:1px solid #000;
border-bottom:1px solid #000;
}
nav ul {
height: 45px;
margin: 0 auto;
}
nav li {
float: left;
list-style-type:none;
}
nav li a {
display: inline-block;
width:auto;
padding: 0 12px;
height: 45px;
font: bold 14px'Arial', sans-serif;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 48px;
text-shadow: 1px 1px 0px #111;
filter: dropshadow(color=#111, offx=1, offy=1);
border-left: 1px solid #444;
border-right: 1px solid #111;
background-color:#2B2B2B;
}
nav li a:hover {
background: -moz-linear-gradient(top, #444 0%, #222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444), color-stop(100%, #222));
background: -webkit-linear-gradient(top, #444 0%, #222 100%);
background: -o-linear-gradient(top, #444 0%, #222 100%);
background: -ms-linear-gradient(top, #444 0%, #222 100%);
background: linear-gradient(top, #444 0%, #222 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#222', GradientType=0);
}
nav li a:active {
background: #222;
-webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
}
nav li a:active:after {
content:"";
display: block;
width: 100%;
height: 4px;
position: relative;
bottom: 6px;
background: -moz-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff5e1f), color-stop(100%, #ff3410));
background: -webkit-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
background: -o-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
background: -ms-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
background: linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5e1f', endColorstr='#ff3410', GradientType=0);
}
#menu ul.sub-menu {
display: none;
position: absolute;
}
#menu ul.sub-menu li {
width: 200px;
background: no-repeat url(http://www.eurekavi.com/amores/images/menu.png);
border-width: 0 1px 1px 1px;
border-style: solid;
}
#menu ul.sub-menu li a {
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
}
#menu ul.sub-menu li a:hover {
color: #FFF;
background-color: #b80063;
}
#menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
HERE IS jsfiddle
Made a couple changes which you can find here:
http://jsfiddle.net/wWx6f/
LexLusa's answer had the right idea but it was incomplete but I do want to give him/her credit. Like he said you can't just add the styling to each li or else the background gets applied to each list item.
You also need to remove this block because you no longer want the borders
/* Removed this because you don't want borders anymore
#menu ul.sub-menu li {
width: 200px;
border-width: 0 1px 1px 1px;
border-style: solid;
}
*/
Another issue that would come up was that because your submenus received the same styling as your main menu, it would get the black/gray box. In order to avoid this, you should make the styling more specific so the styling does not trickle down. You can do this by using the child operator
nav > ul > li > a {
However, you still wanted some of these stylings like the font text and the lineheight, so I simply added them in. I'm sure there is a more elegant solution but for now this works. If you want other stylings you can just add it here too.
/* copied stylings from parent */
#menu ul.sub-menu li a {
font: bold 14px'Arial', sans-serif;
color: #fff;
text-decoration: none;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
line-height: 48px;
text-shadow: 1px 1px 0px #111;
filter: dropshadow(color=#111, offx=1, offy=1);
}
You have to apply the background to the <ul>, not the <li>'s.
Givbe it a min-height to see the full bg-image and don't use the element style with the nagative padding.
#menu ul.sub-menu {
display: none;
position: absolute;
background: no-repeat url(http://www.eurekavi.com/amores/images/menu.png);
min-height: 264px;
margin: 0;
padding: 0;
}
Here you go:
http://jsfiddle.net/qGX5U/1/
Have you tried to set the background at the UL level? and then the LI's background: transparent? You could also set the UL background as a cover, like in http://css-tricks.com/perfect-full-page-background-image/?
First of all change this
#menu ul.sub-menu li {
width: 200px;
background: no-repeat url(http://www.eurekavi.com/amores/images/menu.png);
border-width: 0 1px 1px 1px;
border-style: solid;
}
to
#menu > ul > li {
width: 200px;
background: no-repeat url(http://www.eurekavi.com/amores/images/menu.png);
border-width: 0 1px 1px 1px;
border-style: solid;
}
I am creating a menu which I am trying to base on this menu:
http://www.yootheme.com/widgetkit
However I have run into a small problem where if you hover over the middle of the menu item, it works ok, but if you hover over the edge of it (where the border line is), it moves itself and the other menu items in front of it to the right by 1px.
I have been messing around with the code for a fair amount of time now and can't seem to figure it out.
HTML:
<div class="nav">
<ul>
<li>Home</li>
<li class="active">Structure</li>
<li>Buttons</li>
<li>Forms</li>
<li>Download</li>
</ul>
</div>
CSS:
.nav {
max-width: 100%;
}
.nav ul {
max-width: 100%;
margin: 0 auto;
background: #FFFFFF;
background: -webkit-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: -moz-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: -ms-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: -o-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat-x;
background-size: 100% 100%;
border: 1px solid #c8c9ca;
border-radius: 6px 6px 6px 6px;
height: 40px;
}
.nav ul li {
margin-top: -1px;
padding-top: 1px;
float: left;
height: 39px;
list-style: none outside none;
}
.nav ul li:first-child {
border-left: none;
}
.nav ul li.active{
border-left: 1px solid #DCDDDE;
border-right: 1px solid #DCDDDE;
padding-top: 1px;
float: left;
list-style: none outside none;
background: -webkit-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: -moz-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: -ms-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: -o-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
border-left: 1px solid #DCDDDE;
border-top: 1px solid #D2D3D4;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) inset;
color: #000000;
}
.nav ul li.active:hover{
padding-left: 1px;
padding-right: 1px;
}
.nav ul li:hover{
border-right: 1px solid #DCDDDE;
border-left: 1px solid #DCDDDE;
border-top: 1px solid #D2D3D4;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07) inset;
color: #000000;
}
.nav ul li a {
float: left;
text-decoration: none;
display: block;
font-family: 'YanoneKaffeesatzLight', Arial, sans-serif;
height: 38px;
line-height: 38px;
padding-left: 22px;
padding-right: 22px;
display: block;
color: #444444;
font-size: 17px;
text-shadow: 0 1px 0 #FFFFFF;
}
.nav ul li a:hover{
padding-left: 21px;
padding-right: 21px;
}
I have also made a JSFiddle for a proper preview.
Can anyone help me figure out why this is happening and provide a possible solution? It's probably something stupid I'm not seeing.
That's because you put borders on LI:HOVER and after that you change the padding on A:HOVER not on LI:HOVER again. Just change the place of :hover like this:
.nav ul li:hover a{
padding-left: 21px;
padding-right: 21px;
}
And I think it should be fine now.