CSS Menu with Hover

Question

I am trying to make my menu links #666666 and then on hover make it #FFFFFF

i want these colours to change on the text colour and the top border

#topbar {
    width:100%;
    height:80px;
    background-color:#000000;
}
#topbar-inner {
    width:1000px;
    margin:0 auto 0 auto;
}
#logo {
    display:inline;
    float:left;
    margin-top:20px;
}

#menu {
    display:inline;
    float:right;
}
#menu > ul > li {
    display:inline-block;
    border-top:4px solid #666666;
    margin-right:20px;
    padding-top:20px;
    min-width:120px;
}
#menu > li {
    display:inline-block;
    list-style:none;
    margin-top:25px;
    margin-left:auto;
    margin-right:auto;
}
#menu > li:hover {
    color:#FFFFFF;
}

My mother always told me that "want" is dead, even inside the king's garden (i guess that this does not translate well in english, but still..) — STT LCU
– STT LCU, Commented Jun 27, 2013 at 10:29
possible duplicate of How to change the link color in a specific class for a div CSS — Aurelio
– Aurelio, Commented Jun 27, 2013 at 10:31
From the look of your CSS, you should probably read this article. It will explain why you have this problem: link — Andrew
– Andrew, Commented Jun 27, 2013 at 11:06

dfsq · Accepted Answer · 2013-06-27 11:37:04Z

2

Selectors should be

#menu li a {
    color: #666;
    display: block;
}
#menu li:hover {
    border-top-color: #FFF;
}
#menu li:hover a {
    color:#FFFFFF;
}

#menu has no direct li descendants so #menu > li:hover does not match anything.

http://jsfiddle.net/4Xdkn/8/

edited Jun 27, 2013 at 11:37

answered Jun 27, 2013 at 10:30

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

3 Comments

Mr Lister Over a year ago

Wow, so many answers. But you were the first. Congrats! (I can delete my updated fiddle now.)

Nick R Over a year ago

This solution has an issue, when you hover on the li it changes the colour and background, but you're not able to click on it, as the a tag is not set to display:block, personally I don't think this is the best solution.

user2431709 Over a year ago

excellent - thank you. how can i make the text colour #666666 when its not hovered over?

Gabriele Petrioli · Accepted Answer · 2013-06-27 10:31:42Z

1

You have an error in your CSS

#menu > li does not target anything, since #menu is applied to a div and it has no direct children of type li.

Use these rules

#menu li {
    display:inline-block;
    border-top:4px solid #666666;
    margin-right:20px;
    padding-top:20px;
    min-width:120px;
}
#menu li:hover, 
#menu li:hover a {
    color:#FFFFFF;
}
#menu li a {
    color:#666666;
}
#menu li:hover {
    border-color:#FFFFFF;
}

Demo at http://jsfiddle.net/gaby/4Xdkn/4/

answered Jun 27, 2013 at 10:31

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Comments

Falguni Panchal · Accepted Answer · 2013-06-27 10:37:49Z

1

Updated Fiddle

You need to add:

#menu li a {
     display:block; 
     padding-top:25px;   
     border-top:4px solid #666666;
 }
#menu 
     li a:hover { 
      border-color:red; 
      color:#fff
 }

On #menu > ul > li remove the border-top and padding, because this has been added to the a tag now.

On #menu > li remove the margin-top property

edited Jun 27, 2013 at 10:37

Falguni Panchal

8,9893 gold badges29 silver badges33 bronze badges

answered Jun 27, 2013 at 10:32

Nick R

7,8142 gold badges24 silver badges33 bronze badges

Comments

Falguni Panchal · Accepted Answer · 2013-06-27 10:32:53Z

try this

http://jsfiddle.net/4Xdkn/7/

#topbar {
    width:100%;
    height:80px;
    background-color:#000000;
}
#topbar-inner {
    width:1000px;
    margin:0 auto 0 auto;
}
#logo {
    display:inline;
    float:left;
    margin-top:20px;
}

#menu {
    display:inline;
    float:right;
}
#menu > ul > li {
    display:inline-block;
    border-top:4px solid #666666;
    margin-right:20px;
    padding-top:20px;
color:#ffffff;
    min-width:120px;
}
#menu > li > a {
    display:inline-block;
    list-style:none;
    margin-top:25px;
    margin-left:auto;
    margin-right:auto;
     text-decoration:none;
    color:#ffffff;
    text-decoration:none;
}

#menu li:hover {
    color:#FFFFFF !important;
    text-decoration:none;
    border-top:4px solid #ffffff;
    display:inline-block;
}
#menu li a:hover{
    color:#ffffff;
    text-decoration:none;
}
}

5im · Accepted Answer · 2013-06-27 10:34:25Z

0

Colorize the a-element instead of the li and make the a element as big as the li.

#menu li a:hover {
    color:white;
    border-style:solid;
    border-width: 1px 0px 0px 0px;
    border-color:white;
}

answered Jun 27, 2013 at 10:34

5im

3342 silver badges13 bronze badges

Comments

Pbk1303 · Accepted Answer · 2013-06-27 10:56:25Z

Try the below css

       #topbar {
     width:100%;
     height:80px;
     background-color:#000000;
        }
       #topbar-inner {
     width:1000px;
     margin:0 auto 0 auto;
        }
       #logo {
     display:inline;
     float:left;
     margin-top:20px;
        }

      #menu {
     display:inline;
     float:right;
            }
       #menu > ul > li {
       display:inline-block;    
       margin-right:20px;   
       min-width:120px;
            }
       #menu > li { 
       list-style:none;
       padding:25px 0 0 0;
       margin-left:auto;
       margin-right:auto;
           border-top:1px solid #fff;
           }
        #menu ul li a:hover {
        color:#FFFFFF;
           }
       #menu li a {display:block; padding:20px 0 0 0;border-top:4px solid #666666;}
       #menu li a:hover { border-top:4px solid #fff; color:#fff}

Collectives™ on Stack Overflow

CSS Menu with Hover

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related