CSS menu hover not working

Question

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;
}

sandeep · Accepted Answer · 2012-04-10 13:09:44Z

2

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/

answered Apr 10, 2012 at 13:09

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rizstien · Accepted Answer · 2012-04-10 13:22:46Z

2

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");
  });

answered Apr 10, 2012 at 13:22

Rizstien

8021 gold badge8 silver badges23 bronze badges

Comments

Joshua · Accepted Answer · 2012-04-10 13:16:47Z

0

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;
}

answered Apr 10, 2012 at 13:16

Joshua

4,17927 silver badges38 bronze badges

Collectives™ on Stack Overflow

CSS menu hover not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related