a:hover or #menubar:hover not working for header

Question

I'm having trouble getting the a:hover element to work. I am an amateur, so please be easy... I've tried using the #menubar:hover as well but that doesn't seem to work either.

This code is going into the header of another program. The only reason I got into this was to make the header of this program look identical to the website. Below is my code for the header.

*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}

#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow;
}

<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li><a href="http://www.losmariachisga.com">Home</a></li>
<li><a href="http://www.losmariachisga.com/meet-the-team">About Us</a></li>
<li><a href="http://www.losmariachisga.com/photo-galleries">Photos</a></li>
<li><a href="http://www.losmariachisga.com/calendar">Events</a></li>
<li><a href="http://www.losmariachisga.com/214-2">Specials</a></li>
</ul>

Please Help!

You need to look into how CSS selectors work. http://stackoverflow.com/questions/25105736/what-is-the-order-of-precedence-for-css. Also use your dev tools to see what CSS is being applied. In Chrome, if you force hover on the a element you will see what is overriding the style. — user1378730, May 02 '15 at 02:56
Do you mean that the color of a tag is not changing to yellow on hover? Is that the problem? — Sailesh Babu Doppalapudi, May 02 '15 at 03:00

score 1 · Answer 1 · answered May 02 '15 at 08:38

check this

#menubar li a:hover {
        color: yellow;
        }

full code :

*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}

#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
#menubar li a:hover{
color: yellow;
}

<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li><a href="http://www.losmariachisga.com">Home</a></li>
<li><a href="http://www.losmariachisga.com/meet-the-team">About Us</a></li>
<li><a href="http://www.losmariachisga.com/photo-galleries">Photos</a></li>
<li><a href="http://www.losmariachisga.com/calendar">Events</a></li>
<li><a href="http://www.losmariachisga.com/214-2">Specials</a></li>
</ul>

score 0 · Answer 2 · answered May 02 '15 at 03:02

*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}

#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow !important;
}

<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li><a href="http://www.losmariachisga.com">Home</a></li>
<li><a href="http://www.losmariachisga.com/meet-the-team">About Us</a></li>
<li><a href="http://www.losmariachisga.com/photo-galleries">Photos</a></li>
<li><a href="http://www.losmariachisga.com/calendar">Events</a></li>
<li><a href="http://www.losmariachisga.com/214-2">Specials</a></li>
</ul>

Here the style of a tag is overriding the hover. So if you place it as !important, that style will be given priority than other styles and it will override all other styles. Just place !important at color:yellow and it works.

E LaRoche · Answer 3 · 2015-05-02T04:01:35.813

0

I wanted to see if I could get this working without an !importance. The issue is that the CSS selector which sets the text to white is using a greater specificity than the hover style. The best way to do this is to set a better level of specificity to the hover which will allow it to work. Use this in the hover.

#menubar li a:hover {
        color: yellow;
}

edited May 02 '15 at 04:01

answered May 02 '15 at 03:18

E LaRoche

1,106
1
7
8

score 0 · Answer 4 · answered May 02 '15 at 04:25

It is because #menubar>li>a{background-color: #303432;} will overlap your css. a:hover{color:yellow;} So, make it important on hover like in answer.

a:hover {color: yellow !important;}

Or

#menubar>li>a:hover{color: yellow;}

Will solve your issue.

*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}

#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow !important;
}

<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li><a href="http://www.losmariachisga.com">Home</a></li>
<li><a href="http://www.losmariachisga.com/meet-the-team">About Us</a></li>
<li><a href="http://www.losmariachisga.com/photo-galleries">Photos</a></li>
<li><a href="http://www.losmariachisga.com/calendar">Events</a></li>
<li><a href="http://www.losmariachisga.com/214-2">Specials</a></li>
</ul>

Hope it helps.

a:hover or #menubar:hover not working for header

4 Answers4