Explore our sites

Stack Exchange
tour help careers 2.0
Take the tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite

I want to build a menu where every single <li> hovers out. But weirdly the whole menu always hovers out. Here is the fiddle 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;
}​
share|improve this question
add comment

3 Answers

up vote 2 down vote accepted

Reason is that when you give margin to it then it's push whole ul. It's better give bottom instead of margin. write like this:

.tabs li:hover {
    bottom: 20px;
}

Check this http://jsfiddle.net/X96KE/17/

share|improve this answer
add comment
up vote 2 down vote

using jQuery will solve your problem if you are familiar with it try this

  jQuery("li").mouseover(function() {
    jQuery(this).css("margin-bottom","20px");
  }).mouseout(function(){
   jQuery(this).css("margin-bottom","0px");
  });
share|improve this answer
add comment
up vote 0 down vote

It's because you haven't 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;
}
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.