I am using a dropdown menu and a form with a select dropdown right under it.
The problem is that when I open the dropdown in the form and select the first option ("1") the menu automatically opens.
If I use some <br> or put some margin-top in the form div, this doen't happen, so I think It has something to do with the proximity of the menu with the form, but I can't figure out what is going on.
Here is an exemple of what is happening (alternatively as a jsfiddle):
#menu {
position: relative;
z-index: 1;
clear: both;
}
#nav{
height: 39px;
font: 14px Arial,Verdana,sans-serif;
background: #f8f8f8;
border: 1px solid #DDDDDD;
border-radius: 3px;
min-width:500px;
margin-left: 0px;
padding-left: 0px;
}
#nav li{
list-style: none;
display: block;
float: left;
height: 40px;
position: relative;
border-right: 1px solid #DDDDDD;
}
#nav li a{
padding: 0px 30px 0px 30px;
margin: 0px 0;
line-height: 40px;
text-decoration: none;
border-right: 1px solid #DDDDDD;
height: 40px;
color: #6791AD;
font-weight: bold;
}
#nav ul{
background: #f2f5f6;
padding: 0px;
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-left:1px solid #DDDDDD;
border-radius: 0px 0px 3px 3px;
box-shadow: 2px 2px 3px #ECECEC;
-webkit-box-shadow: 2px 2px 3px #ECECEC;
-moz-box-shadow:2px 2px 3px #ECECEC;
width:200px;
}
#nav li:hover{
background: white;
}
#nav li a{
display: block;
}
#nav ul li {
border-right:none;
border-bottom:1px solid #DDDDDD;
width:200px;
height:39px;
}
#nav ul li li {
background: #f2f5f6;
padding: 0px;
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-left:1px solid #DDDDDD;
border-radius: 0px 0px 3px 3px;
box-shadow: 2px 2px 3px #ECECEC;
-webkit-box-shadow: 2px 2px 3px #ECECEC;
-moz-box-shadow:2px 2px 3px #ECECEC;
width:200px;
}
#nav ul li ul {
background: #f2f5f6;
padding: 0px;
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-left:1px solid #DDDDDD;
border-radius: 0px 0px 3px 3px;
box-shadow: 2px 2px 3px #ECECEC;
-webkit-box-shadow: 2px 2px 3px #ECECEC;
-moz-box-shadow:2px 2px 3px #ECECEC;
width:200px;
}
#nav ul li a {
border-right: none;
color:#6791AD;
text-shadow: 1px 1px 1px #FFF;
border-bottom:1px solid #FFFFFF;
}
#nav ul li:hover{background:#DFEEF0;}
#nav ul li:last-child { border-bottom: none;}
#nav ul li:last-child a{ border-bottom: none;}
/* Sub menus */
#nav ul{
display: none;
visibility:hidden;
position: absolute;
top: 40px;
}
/* Third-level menus */
#nav ul ul{
top: 0px;
left:200px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
}
/* Fourth-level menus */
#nav ul ul ul{
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
}
#nav ul li{
display: block;
visibility:visible;
}
#nav li:hover > ul{
display: block;
visibility:visible;
}
<div id='menu'>
<ul id='nav'>
<li>
<a href='#'>Level 1</a>
<ul>
<li><a href='#'>Level 1-1</a>
<ul>
<li><a href='#'>Level 1-1-1</a></li>
<li><a href='#'>Level 1-1-2</a></li>
</ul>
</li>
<li><a href='#'>Level 1-2</a>
<ul>
<li><a href='#'>Level 1-2-1</a></li>
<li><a href='#'>Level 1-2-2</a></li>
</ul>
</li>
<li><a href='#'>Level 1-3</a>
<ul>
<li><a href='#'>Level 1-3-1</a></li>
<li><a href='#'>Level 1-3-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class='form'>
<form>
<select>
<option selected='true'> 1 </option>
<option> 2 </option>
<option> 3 </option>
</select>
<input type='button' value="Go"/>
</form>
</div>
This is a Chrome (Blink?) related bug. Chrome tries to "reset" the menu hover state at the cursor position. You can try this dirty solution:
Javascript (with JQuery):
$(function(){
$("select").click(function(){
$("body").addClass("select-activated");
setTimeout(function(){
$("body").removeClass("select-activated");
}, 200);
});
});
And in your CSS:
body.select-activated #nav ul {
display: none;
}
This will protect the menu display from the "restoring process".
I suggest you to report this bug on the Chromium Issues site
Update
This JSFiddle demonstrates the original and a fixed version. Tested in Chrome 35.0.1916.153 on Debian 7.6.
After falling into this issue HTML select triggers css:hover on select i have this solution to propose that could be usefull over here as well. it requires only one line of js:
$(".form select").on("change", function(){$("#nav ul").hide(); $(".form form").submit();});
You can add hide selector according to your case.
Related
I am a backend developer and don't know much about the designing. In my ecommerce project, I am trying to get sub-menus to be displayed from the top no matter where the parent menu position.
In my menu HTML I have:
<ul id="nav">
<li class="site-name">Social </li>
<li class="yahoo">Yahoo
<ul style="">
<li>Yahoo Games »
<ul style="">
<li>Board Games</li>
<li>Card Games</li>
<li>Puzzle Games</li>
<li>Skill Games »
<ul style="">
<li>Yahoo Pool</li>
<li>Chess</li>
</ul>
</li>
</ul>
</li>
<li>Yahoo Search</li>
<li>Yahoo Answsers</li>
</ul>
</li>
<li class="google">Google
<ul style="">
<li>Google mail</li>
<li>Google Plus</li>
<li>Google Search »
<ul>
<li>Search Images</li>
<li>Search Web</li>
</ul>
</li>
</ul>
</li>
<li class="twitter">Twitter
<ul style="">
<li>New Tweets</li>
<li>Compose a Tweet</li>
</ul>
</li>
</ul>
And the CSS is to this menu is:
#nav{
height: 39px;
font: 12px Geneva, Arial, Helvetica, sans-serif;
background: #3AB3A9;
border: 1px solid #30A097;
border-radius: 3px;
min-width:500px;
margin-left: 0px;
padding-left: 0px;
}
#nav li{
list-style: none;
display: block;
float: left;
height: 40px;
position: relative;
border-right: 1px solid #52BDB5;
}
#nav li a{
padding: 0px 10px 0px 30px;
margin: 0px 0;
line-height: 40px;
text-decoration: none;
border-right: 1px solid #389E96;
height: 40px;
color: #FFF;
text-shadow: 1px 1px 1px #66696B;
}
#nav ul{
background: #f2f5f6;
padding: 0px;
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-left:1px solid #DDDDDD;
border-radius: 0px 0px 3px 3px;
box-shadow: 2px 2px 3px #ECECEC;
-webkit-box-shadow: 2px 2px 3px #ECECEC;
-moz-box-shadow:2px 2px 3px #ECECEC;
width:170px;
}
#nav .site-name,#nav .site-name:hover{
padding-left: 10px;
padding-right: 10px;
color: #FFF;
text-shadow: 1px 1px 1px #66696B;
font: italic 20px/38px Georgia, "Times New Roman", Times, serif;
background: url(images/saaraan.png) no-repeat 10px 5px;
width: 160px;
border-right: 1px solid #52BDB5;
}
#nav .site-name a{
width: 129px;
overflow:hidden;
}
#nav li.facebook{
background: url(../images/facebook.png) no-repeat 9px 12px;
}
#nav li.facebook:hover {
background: url(../images/facebook.png) no-repeat 9px 12px #3BA39B;
}
#nav li.yahoo{
background: url(../images/yahoo.png) no-repeat 9px 12px;
}
#nav li.yahoo:hover {
background: url(../images/yahoo.png) no-repeat 9px 12px #3BA39B;
}
#nav li.google{
background: url(../images/google.png) no-repeat 9px 12px;
}
#nav li.google:hover {
background: url(../images/google.png) no-repeat 9px 12px #3BA39B;
}
#nav li.twitter{
background: url(../images/twitter.png) no-repeat 9px 12px;
}
#nav li.twitter:hover {
background: url(../images/twitter.png) no-repeat 9px 12px #3BA39B;
}
#nav li:hover{
background: #3BA39B;
}
#nav li a{
display: block;
}
#nav ul li {
border-right:none;
border-bottom:1px solid #DDDDDD;
width:170px;
height:39px;
}
#nav ul li a {
border-right: none;
color:#6791AD;
text-shadow: 1px 1px 1px #FFF;
border-bottom:1px solid #FFFFFF;
}
#nav ul li:hover{background:#DFEEF0;}
#nav ul li:last-child { border-bottom: none;}
#nav ul li:last-child a{ border-bottom: none;}
/* Sub menus */
#nav ul{
display: none;
visibility:hidden;
position: absolute;
top: 40px;
}
/* Third-level menus */
#nav ul ul{
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
}
/* Fourth-level menus */
#nav ul ul ul{
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
}
#nav ul li{
display: block;
visibility:visible;
}
#nav li:hover > ul{
display: block;
visibility:visible;
}
When executes on the server it displayed like this:
https://jsfiddle.net/uqfsvn4L/
As you can see the submenu of Google Search displays from the top of its parent position but I want it to be displayed from the top of the main menu. How can I get the submenu display from the top?
My expected output would be:
Remove position: relative from #nav li and then adjust the top property of #nav ul. Here is the working example
#nav {
height: 39px;
font: 12px Geneva, Arial, Helvetica, sans-serif;
background: #3AB3A9;
border: 1px solid #30A097;
border-radius: 3px;
min-width: 500px;
margin-left: 0px;
padding-left: 0px;
}
#nav li {
list-style: none;
display: block;
float: left;
height: 40px;
border-right: 1px solid #52BDB5;
}
#nav li a {
padding: 0px 10px 0px 30px;
margin: 0px 0;
line-height: 40px;
text-decoration: none;
border-right: 1px solid #389E96;
height: 40px;
color: #FFF;
text-shadow: 1px 1px 1px #66696B;
}
#nav ul {
background: #f2f5f6;
padding: 0px;
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-radius: 0px 0px 3px 3px;
box-shadow: 2px 2px 3px #ECECEC;
-webkit-box-shadow: 2px 2px 3px #ECECEC;
-moz-box-shadow: 2px 2px 3px #ECECEC;
width: 170px;
}
#nav .site-name,
#nav .site-name:hover {
padding-left: 10px;
padding-right: 10px;
color: #FFF;
text-shadow: 1px 1px 1px #66696B;
font: italic 20px/38px Georgia, "Times New Roman", Times, serif;
background: url(images/saaraan.png) no-repeat 10px 5px;
width: 160px;
border-right: 1px solid #52BDB5;
}
#nav .site-name a {
width: 129px;
overflow: hidden;
}
#nav li.facebook {
background: url(../images/facebook.png) no-repeat 9px 12px;
}
#nav li.facebook:hover {
background: url(../images/facebook.png) no-repeat 9px 12px #3BA39B;
}
#nav li.yahoo {
background: url(../images/yahoo.png) no-repeat 9px 12px;
}
#nav li.yahoo:hover {
background: url(../images/yahoo.png) no-repeat 9px 12px #3BA39B;
}
#nav li.google {
background: url(../images/google.png) no-repeat 9px 12px;
}
#nav li.google:hover {
background: url(../images/google.png) no-repeat 9px 12px #3BA39B;
}
#nav li.twitter {
background: url(../images/twitter.png) no-repeat 9px 12px;
}
#nav li.twitter:hover {
background: url(../images/twitter.png) no-repeat 9px 12px #3BA39B;
}
#nav li:hover {
background: #3BA39B;
}
#nav li a {
display: block;
}
#nav ul li {
border-right: none;
border-bottom: 1px solid #DDDDDD;
width: 170px;
height: 39px;
}
#nav ul li a {
border-right: none;
color: #6791AD;
text-shadow: 1px 1px 1px #FFF;
border-bottom: 1px solid #FFFFFF;
}
#nav ul li:hover {
background: #DFEEF0;
}
#nav ul li:last-child {
border-bottom: none;
}
#nav ul li:last-child a {
border-bottom: none;
}
/* Sub menus */
#nav ul {
display: none;
visibility: hidden;
position: absolute;
top:48x;
}
/* Third-level menus */
#nav ul ul {
top: 0px;
left: 170px;
display: none;
visibility: hidden;
border: 1px solid #DDDDDD;
min-height: 100%
}
/* Fourth-level menus */
#nav ul ul ul {
top: 0px;
left: 170px;
display: none;
visibility: hidden;
border: 1px solid #DDDDDD;
min-height: 100%
}
#nav ul li {
display: block;
visibility: visible;
}
#nav li:hover>ul {
display: block;
visibility: visible;
}
<ul id="nav">
<li class="site-name">Social </li>
<li class="yahoo">Yahoo
<ul>
<li>Yahoo Games »
<ul>
<li>Board Games</li>
<li>Card Games</li>
<li>Puzzle Games</li>
<li>Skill Games »
<ul>
<li>Yahoo Pool</li>
<li>Chess</li>
</ul>
</li>
</ul>
</li>
<li>Yahoo Search</li>
<li>Yahoo Answsers</li>
</ul>
</li>
<li class="google">Google
<ul>
<li>Google mail</li>
<li>Google Plus</li>
<li>Google Search »
<ul>
<li>Search Images</li>
<li>Search Web</li>
</ul>
</li>
</ul>
</li>
<li class="twitter">Twitter
<ul>
<li>New Tweets</li>
<li>Compose a Tweet</li>
</ul>
</li>
</ul>
I have created a list and when I hover a line should be displayed like this
See when hovered over Mobile & Tablets a vertical line is shown with orange color at the beginning
This is my simple code
ul {
list-style: none;
}
li {
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
background-color: grey;
}
li:hover {
background-color: white;
}
<ul>
<li>List</li>
<li>List</li>
</ul>
This should give your the result as shown in the example:
ul {
list-style: none;
}
li {
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
background-color: white;
border-top: solid 1px transparent;
border-bottom: solid 1px transparent;
border-left: solid 6px transparent;
}
li:hover {
background-color: white;
border-top-color: grey;
border-bottom-color: grey;
border-left-color: orange;
}
<ul>
<li>List</li>
<li>List</li>
</ul>
You have different possibilities to solve this. You can try the following solutions:
solution using box-shadow:
ul {
list-style:none;
padding:0;
}
li {
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
padding-left:5px;
background-color: grey;
border-top:1px solid transparent;
border-bottom:1px solid transparent;
}
li:hover {
background-color: white;
box-shadow:inset 3px 0px 0px 0px red;
border-top-color:grey;
border-bottom-color:grey;
}
<ul>
<li>List</li>
<li>List</li>
</ul>
solution using border-left:
ul {
list-style:none;
padding:0;
}
li {
border-left:3px solid transparent;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
padding-left:5px;
background-color: grey;
border-top:1px solid transparent;
border-bottom:1px solid transparent;
}
li:hover {
border-left-color:red;
background-color: white;
border-top-color:grey;
border-bottom-color:grey;
}
<ul>
<li>List</li>
<li>List</li>
</ul>
solution using linear-gradient:
ul {
list-style:none;
padding:0;
}
li {
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
padding-left:5px;
background-color: grey;
border-top:1px solid transparent;
border-bottom:1px solid transparent;
}
li:hover {
background:linear-gradient(to right, red 0px, red 3px, transparent 3px);
background-color: white;
border-top-color:grey;
border-bottom-color:grey;
}
<ul>
<li>List</li>
<li>List</li>
</ul>
All you need to do is add a thick orange border to the left side of the li element on hover:
ul {
list-style:none;
}
li {
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
background-color: grey;
}
li:hover {
background-color: white;
border-left: 5px solid orange;
}
<ul>
<li>List</li>
<li>List</li>
</ul>
you can give padding and a border for the same
li:hover
{
background-color: white;
border-left: 5px solid orange;
padding-left: 5px;
}
What you have to do is just add below CSS to your li:hover field,
li:hover{
border: 1px solid #cbcbcb;
border-left: 3px solid orange;
background-color: white;
color: orange;
}
Include a border from the beginning and then change it to the color you need.
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
li {
padding: 5px 0 5px 5px;
margin-bottom: 5px;
border: 1px solid transparent;
border-left-width: 5px;
}
li:hover {
cursor: pointer;
background-color: white;
border-color: lightgray;
border-left-color: orange;
}
<ul>
<li>List</li>
<li>List</li>
</ul>
You could use a css ::before pseudo-element. See code snippet.
ul {
list-style: none;
}
li {
position: relative;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
background-color: grey;
}
li:hover::before {
content: '';
width: 2px;
height: 100%;
position: absolute;
background-color: orange;
top: 0;
}
li:hover {
background-color: white;
}
<ul>
<li>List</li>
<li>List</li>
</ul>
I have created a simple .arrow-up class of CSS:
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
I want this arrow to come on exact top of the second level menu, here is my menu code:
HTML:
<header>
<div class="welcome_area">
<p>
Welcome, <b>Arkam Gadet </b>
</p>
</div>
<div class="menu">
<nav>
<ul>
<li>My Profile
<ul>
<li>My Questions
</li>
<li>Settings
</li>
</ul>
</li>
<li>Inbox
</li>
<li>Notifications
</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
background-color: #eee;
height: 45px;
box-shadow: 0px 2px 3px 1px #bbb;
}
a {
color: black;
text-decoration: none;
}
h2 {
color: #f79a1d;
}
.welcome_area {
float: left;
margin-left: 5%;
}
.menu {
float: right;
margin-right: 5%;
}
.menu nav > ul {
position: relative;
padding:0px;
}
.menu nav ul li {
display: inline;
padding: 5px;
}
.menu nav ul li a {
padding: 2px;
}
.menu nav ul li a:hover {
background: #eee;
border: 0;
border-radius: 3px;
box-shadow: 0px 0px 2px 1px #000;
}
.menu nav > ul ul {
position: absolute;
left: -30px;
top: 40px;
padding:0px;
width: 150px;
border-radius: 3px;
display: none;
background-color: #eee;
box-shadow: 0px 0px 2px 3px #bbb;
}
.menu nav > ul li > ul li {
display: block;
}
Demo.
I tried to add it as a li of the list but then it's coming inside it not on top of it.
How can I bring the .arrow-up on top of the second level menu?
What about something along these lines:
.menu nav ul ul:before {
width:0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
display:block;
clear:both;
position:absolute;
top:-5px;
border-bottom: 5px solid black;
content:'' ;
}
The tabs work perfectly. I am just having a problem with the placement in IE. In Mozilla it shows the placement of the tabs perfectly but when I load the page in IE it moves the tab to the complete left of the table the tabs are in.
Here is my CSS code:
a:active {
outline: none;
}
a:focus {
-moz-outline-style: none;
}
#tabs_container {
width: 626px;
font-family: Arial;
font-size: 10px;
}
#tabs_container ul.tabs {
list-style: none;
border-bottom: none;
height: 25px;
margin: 0px;
}
#tabs_container ul.tabs li {
float: left;
}
#tabs_container ul.tabs li a {
padding: 6px 9px;
display: block;
border-left: 1px solid #90afcb;
border-top: 1px solid #90afcb;
border-right: 1px solid #90afcb;
border-bottom: 1px solid #90afcb;
margin-right: 4px;
text-decoration: none;
background-color: #ffffff;
}
#tabs_container ul.tabs li.active a {
background-color: #90afcb;
padding-top: 6px;
}
div.tab_contents_container {
border: none;
border-top: none;
padding: 10px;
font-size: 10px;
}
div.tab_contents {
display: none;
}
div.tab_contents_active {
display: block;
}
div.clear {
clear: both;
}
HTML
<!-- These are the tabs -->
<ul class="tabs">
<li class="active">
<span>Dienstleistung | Services</span>
</li>
<li><span>Über uns | About us</span></li>
<li><span>Netzwerken | Networking</span></li>
<li><span>Social Media</span></li>
<li><span>Impressum</span></li>
</ul>
I would be very grateful for any assistance you could provide.
Many thanks
hi did you try to add float #tabs_container ul.tabs and #tabs_container ul.tabs li a
#tabs_container ul.tabs {
float:left;
border:1px solid red;
list-style: none;
border-bottom: none;
height: 25px;
margin: 0px;
}
#tabs_container ul.tabs li a {
float:left;
padding: 6px 9px;
display: block;
border-left: 1px solid #90afcb;
border-top: 1px solid #90afcb;
border-right: 1px solid #90afcb;
border-bottom: 1px solid #90afcb;
margin-right: 4px;
text-decoration: none;
background-color: #ffffff;
}
I hope you understood the question, you can see an example here:
http://jsfiddle.net/nFbJY/
When you scroll over any of the links they move :(
Any advice on how to solve this issue?
HTML:
<div class="links">
<ul>
<li>Home</li>
<li>Pricing</li>
<li>FAQ</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
CSS:
div.links {float: left; padding-top:15px;}
ul {list-style:none;}
li {float: left; margin: 0 .15em; padding: 3px 10px 3px 10px; border: 1px solid #CCC; border-radius: 5px; -moz-border-radius: 5px;}
a:hover { border: 1px solid blue; border-radius: 5px; -moz-border-radius: 5px; padding: 3px 10px 3px 10px; background-color:yellow;}
Most of your styling resides on the li, try moving them to the <a> tag instead
li
{
float: left;
margin: 0 .15em;
}
a, a:active, a:visited {
border: 1px solid #CCC;
border-radius: 5px;
-moz-border-radius: 5px;
padding: 3px 10px 3px 10px;
}
a:hover
{
border: 1px solid blue;
background-color:yellow;
}
Change your CSS to this:
div.links {float: left; padding-top:15px;}
ul {list-style:none;}
li {float: left;}
a {margin: 0 .15em; padding: 3px 10px 3px 10px; border: 1px solid #CCC; border-radius: 5px; -moz-border-radius: 5px;}
a:hover {border: 1px solid blue; background-color:yellow; }
This way you're styling the A tag only instead of both LI and A. So instead of the effects stacking causing padding/border on 2 elements you're only causing it on one. Nothing gets pushed around....
Check this one http://jsfiddle.net/huhu/Tn2HV/
div.links {float: left; padding-top:15px;}
ul {list-style:none;}
li { float:left; }
li a { margin: 0 .15em; padding: 3px 10px 3px 10px; border: 1px solid #CCC; border-radius: 5px; -moz-border-radius: 5px; }
li a:hover { background-color:yellow;}
<div class="links">
<ul>
<li>Home</li>
<li>Pricing</li>
<li>FAQ</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
Try to hover the li element instead of a
a:hover { border: 1px solid blue; border-radius: 5px; -moz-border-radius: 5px; padding: 3px 10px 3px 10px; background-color:yellow;}
li:hover { background-color:yellow; }
The easiest way would be to add a margin to your a elements and add margin: 0 to a:hover. That way, the buttons are always the same width. Or, you can do someting similar with padding (or border).
EDIT: In your case, use this CSS (esp. the last 2 lines):
div.links {float: left; padding-top:15px;}
ul {list-style:none;}
li {float: left; margin: 0 .15em; padding: 3px 10px 3px 10px; border: 1px solid #CCC; border-radius: 5px; -moz-border-radius: 5px;}
a { margin: 0 11px; }
a:hover { border: 1px solid blue; margin: 0; border-radius: 5px; -moz-border-radius: 5px; padding: 3px 10px 3px 10px; background-color:yellow;}
Switch the CSS definition a:hover to li:hover.
http://jsfiddle.net/nFbJY/3/
div.links
{
float: left;
padding-top:15px;
}
ul
{
list-style:none;
}
li
{
float: left;
margin: 0 .15em;
padding: 3px 10px 3px 10px;
border: 1px solid #CCC;
border-radius: 5px;
-moz-border-radius: 5px;
}
li:hover
{
border: 1px solid blue;
border-radius: 5px;
-moz-border-radius: 5px;
padding: 3px 10px 3px 10px;
background-color:yellow;
}
<div class="links">
<ul>
<li>Home</li>
<li>Pricing</li>
<li>FAQ</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>