I used this for styling navigation bar of my webpage but the color is not changing on hover
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav li a:hover,.nav li a:active {
background-color:#7A991A;
}
.nav li a:link,.nav li a:visited {
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
HTML code:
<ul class = "nav">
<li>Home</li>
<li>Our Products</li>
<li>Contact us</li>
</ul>
can someone suggest what I did wrong?
Either add !important here:
.nav li a:hover,.nav li a:active {
background-color:#7A991A !important;
}
Or move the properties for :hover (and :active) after those for :link.
Replace .nav a:link with .nav li a
demo
.nav li a, .nav li a:visited {
/*here^^^*/
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
This is working fine now in the fiddle.
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav li a:link,.nav li a:visited {
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.nav li a:hover,.nav li a:active {
background-color:#7A991A;
}
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav li a:visited{
background-color:#98bf21;
}
.nav li a:hover,.nav li a:active {
background-color:#7A991A;
}
.nav li a{
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
Your a:hover is covered by a:link or so on.
I guess, Since a:hover is of the same level with a:link, Css class at the lower position of the file has higher priority.
You can refer to this:
resolve css conflict
Here is the demo.
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav-link {
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.nav-link:hover,.nav-link:active {
background-color:#7A991A;
}
it's not a good practice to nest too many tags, give it a class.
use :link :visited :hover :active only when you want to rewrite the default styles.
css is cascading style sheet, order matters, put .nav-link first to normalize default styles and then overwritten default with :hover and :active.
!important is not a good practice here, just rearrange the order.
Related
I have CSS made by me. I used it to make my nav link in green color. So I used a:visited. Then mouse over visited link won't make work hover properties. Please help me to make it green and red when hover. [sorry for my bad English]
CSS
#nav {
font-family:arial;
font-size:20px;
}
#nav a:link {
color:green;
text-decoration:none;
}
#nav a:hover {
color:red;
text-decoration:none;
}
#nav a:visited {
color:green;
}
#nav li:hover {
font-family:arial;
font-size:21px;
}
#nav li {
float:right;
margin: 5px;
}
#nav li#active {
font-family:arial;
font-color:red;
font-size:20px;
font-weight:bold;
}
#nav li#active:active {
font-color:red;
}
Learn about the cascade.
#nav a:hover and #nav a:visited are equally specific so the last one will override the first one.
Put the :hover rule after the :visited rule if you want it to overwrite the other way around.
i have made a simple navbar with css but some how it is showing margin at the botton of my <li> tags.Here the picture.And when i remove the float property the margin under the <li> disappears.
And here is the css.
nav{
background:#333;
}
nav ul{
display:inline-block;
}
nav ul li{
display:inline;
float:left;
list-style:none;
}
nav ul li a{
color:#fff;
padding:15px;
display:block;
text-decoration:none;
font-weight:600;
font-size:16px;
}
You should remove display:inline-block; from the nav ul and use display:inline-block; for the nav ul li with no float i.e.
nav{
background:#333;
}
nav ul li{
display:inline-block;
list-style:none;
}
nav ul li a{
color:#fff;
padding:15px;
display:block;
text-decoration:none;
font-weight:600;
font-size:16px;
}
Add inline-block to li
DEMO
CSS
nav ul li{
display:inline-block;
list-style:none;
}
I'm trying to get this simple horizontal navigation menu to work but when I go and add an "active" class to the active li, nothing is changing. the .active just doesn't show up? What did I do wrong guys?
<div id="nav">
<ul>
<li class="active">All</li>
<li>Services</li>
<li>Technology</li>
<li>Referral</li>
<li>Reseller</li>
</ul>
</div>
Here's the CSS:
#nav ul{
list-style-type:none;
margin:40px auto;
padding:0;
width:625px;
height:50px;
}
#nav li{
display:inline;
}
#nav li a,
#nav li a:visited,
#nav li a:link {
width:120px;
height:20px;
display:inline;
float:left;
text-align: center;
padding-top:5px;
padding-bottom: 5px;
margin-top:auto;
margin-bottom:auto;
font-family: arial;
text-decoration: none;
color:#929292;
font-weight: bold;
background-color: #e5e5e5;
margin-left:5px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#nav li a{
}
#nav li a:hover{
color: #ffffff;
cursor: pointer;
background-color: #2F5290;
}
#nav li a:active{
color: #FAAF31;
}
.active{
background-color: #2F5290;
color: #FAAF31;
}
Specificity is your problem. In quick terms: ids are worth 100, classes worth 10 and elements worth 1, so #nav li a is worth 102 points of specificity, but .active is only worth 10 points. If you update it to #nav li a.active you will get 112 points, thus having enough specificity to override your original styles. You can read more about specificity on W3C
Thanks #setek for the good answer, I thought that it should really be the answer and added a bit as well.
I made a drop down menu, which works fine for top level items.
But I dunno what CSS to add for second level menu items, to be move them to the right side of the hovered item.
Here is my HTML content:
<ul class="menu">
<li><a href="#" >item1</a></li>
<li>item2</li>
<li>item3
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3
<ul>
<li>subsubitem1</li>
<li>subsubitem2</li>
</ul>
</li>
<li>subitem4</li>
<li>subitem5</li>
</ul>
</li>
<li>item4</li>
<li>item5</li>
</ul>
and my actual CSS:
.menu {
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul {
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li {
float:left;
padding:0px;
}
.menu li a {
background:#333333 url("seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #2580a2 url("hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul {
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul {
display:block;
}
.menu li li {
background:url('sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a {
background:none;
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background:#2580a2 url('hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
jsfiddle
I'm trying to do a submenu of a submenu of a list menu and told that this may work but i dont know how to add it to css. and weather or not the styles would apply to it if its put into css.
[SOLVED]
Okay, so i managed to solve this ( and now I just have to style widths and hovers ). What I Did was chuck in the css from the answer below, added in this css aswell
.tabs .widget ul, .tabs .widget ul {
margin: 0;
padding: 0;
overflow: visible;
list-style: none;
}
For some reason it was set to { overflow:hidden ; } (wtf!) so i changed that and it seemed to overflow correctly now.
In the menu html, I changed
<ul>
<li><a href="#" >item1</a></li>
....
</ul>
to
<ul class="menu_top">
<li><a href="#" >item1</a></li>
....
</ul>
on line one of the given html.
Now all that I need to do is style {width:225px; } and change the :hover element, thanks for everyones help!
You can use the following CSS:
ul.menu_top {
float:left;
width:70%;
margin: 8px 100px 0 0;
border-radius:4px;
background-color: #c4092a;
list-style-type: none;
z-index:+1;
}
ul.menu_top li {
float: left;
position: relative;
margin: 4px 2em 4px 4px;
padding: 0;
}
ul.menu_top li ul {
visibility: hidden;
position: absolute;
top:100%;
left:0px;
padding:0.5em;
list-style-type: none;
white-space:nowrap;
background-color: #c4092a;
border: 1px solid white;
border-radius:4px;
z-index:+1;
}
ul.menu_top li:hover > ul {
visibility: visible;
z-index: +2;
}
ul.menu_top li ul li {
padding: 0;
margin: 12px 4px;
float:none;
border:0;
min-width:3em;
}
ul.menu_top li ul li ul {
top:0;
left:99%;
}
ul.menu_top a {
background-color:#c4092a;
color:white;
text-decoration:none;
padding:4px;
font-size:18px
}
ul.menu_top a:hover, ul.menu_top a.haschildren.childselected, ul.menu_top a.selected {
background-color:white;
color:blue;
text-decoration:none;
}
ul.menu_top li a.haschildren:after {
content:"\00A0\00A0\25BC";
}
a {
color:#0000aa;
background-color:inherit;
}
body, ul, li { /* normalize for old browsers*/
margin:0;
padding:0;
}
It's taken from my old question. The .menu_top class is used only for distinguishing between the navigation menu and another unordered lists.
JSFiddle code & result page
hello
what i am trying to is to create a sub menu from a sub menu. for example if a user hovers over Actions this then drops to show say billing - mail etc. i would like to create another sub if a user hovers over billing. i have attached the code i am using which is stu nicholls pro dropdown. thanks
menu css
.nav {
height:35px;
background: url(images/pro_line_0.gif) repeat-x;
margin-top:100px;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:500;
}
.nav .table {
display:table;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.nav .select a {
display:block;
height:35px;
float:left;
padding:0 5px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#fff;
}
.nav .current a {
display:block;
height:35px;
float:left;
background: url(images/pro_line_2.gif);
padding:0 0 0 10px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#fff;
}
.nav .current a b {
display:block;
padding:0 30px 0 15px;
background:url(images/pro_line_2.gif) right top;
}
.nav .select a:hover,
.nav .select li:hover a {
padding:0 0 0 15px;
cursor:pointer;
color:#088;
}
.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 5px 0 15px;
cursor:pointer;
}
.nav .select_sub {
display:none;
}
/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.nav .sub {
display:table;
padding:0;
list-style:none;
}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#f00;
}
.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(images/back_0.gif);*/
padding:0;
z-index:100;
left:0px;
text-align:left;
}
.nav .current .show {
z-index:10;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 5px 0 30px;
margin:0;
white-space:nowrap;
border:0;
color:#444;
}
.nav .current .sub li.sub_show a {
color:#088;
cursor:default;
/*background:url(images/back_1.gif);*/
}
.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
font-weight:bold;
/*background:url(images/back_1.gif);*/
}
sample html
<ul class="select"><li><a href="#nogo"><b>Control Panel</b>
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub show">
<ul class="sub">
<li>Tickets</li>
<li>Messages</li>
<li>Actions</li>
<li>History</li>
<li>Settings</li>
<li>Destruction</li>
<li>Contacts</li>
<li>Users</li>
<li>Companies</li>
</ul>
</div>
Try using nested <ul>s in your HTML. That is, build your menu like so:
<ul class="menu">
<li>
<a>My Link</a>
<ul class="submenu">
<li><a>My Nested Link</a></li>
</li>
</ul>
Then use a simple Javascript solution like Superfish (or one of your chosing)
http://users.tpg.com.au/j_birch/plugins/superfish/