CSS menu hover not working
I want to create a menu in which everyone <li>
is visible. But strangely the whole menu always fluctuates. Here is the script code.
I have the following css code:
body {
background-color: #eee;
margin: 0;
padding: 0;
overflow: hidden;
}
.tabs {
width: 80%;
position: fixed;
bottom: -20px;
left: 100px;
}
.tabs ul {
display:block;
}
.tabs li {
width: 60px;
height: 80px;
margin-bottom: -20px;
padding: 10px;
float: left;
list-style: none;
display: inline;
background-color: #ccc;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
font-family: verdana;
text-align: center;
}
.tabs li:hover {
margin-bottom: 20px;
}
+3
source to share
3 answers
The reason is that when you give a margin , then it hits an integer ul
. Better to give bottom
instead margin
. write like this:
.tabs li:hover {
bottom: 20px;
}
Check it out http://jsfiddle.net/X96KE/17/
+2
source to share
This is because you have not specified what to do with the margin-top. Here's an updated example: http://jsfiddle.net/X96KE/18/
.tabs li:hover {
margin-bottom: -40px;
margin-top: -40px;
}
0
source to share