Reputation:
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;
}
Upvotes: 0
Views: 136
Reputation: 193301
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.
Upvotes: 2
Reputation: 3802
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}
Upvotes: 0
Reputation: 7794
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
Upvotes: 1
Reputation: 334
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;
}
Upvotes: 0
Reputation: 8981
try this
#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;
}
}
Upvotes: 0
Reputation: 196306
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/
Upvotes: 1