First of I am new to CSS and don't seem to understand how classes interact with id's, thats why I can not get the following menu to work.
<div id="navmenu">
<ul>
<li>Home</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div>
This is my CSS:
#navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#navmenu li {
width:114px;
text-align:center;
float:left;
}
#navmenu ul li a {
text-decoration:none;
color: white;
background: #CE140B;
}
#navmenu a {
padding-top:4px;
padding-bottom:4px;
display:block;
width:100%;
}
#navmenu ul li a:hover {
color: #CE140B;
background: white;
}
This changes background and foreground color when the mouse is hovered over a menu item.
Now i wanted to add an active class to this, so that when I am on the Home page, the Home menu item looks the same as when it is hovered. The following code does not work.
I have tried changing the menu to this:
<li><a class="active" href="#">Home</a></li>
and also
<li class="active">Home</li>
and my CSS to:
#navmenu ul li a:hover a:active {
color: #CE140B;
background: white;
}
and
#navmenu ul li a:hover li:active {
color: #CE140B;
background: white;
}
Neither works. Thanks for your help on getting this to work.
Either
li.active:hover {
}
Or
a.active:hover {
}
Should work
Related
I have a left hand navigation that I am trying to code with CSS.
At the moment the sub-categories (level 1) are showing as the 'active' color when the main one is selected (from level 0). When you click on a sub-category (level 1) it is then following the same css rules as the main category (level 0) but not until clicked.
What I want, is the subcategories (level 1) to show with a white background when the main category is selected (level 0) (opening the subcategories). Then, when an item is chosen within the subcategory (level 1) it follows a different rules (font to be in a different color for example).
Sorry, it's a little confusing to try to explain! Here is my CSS.. any help would be greatly appreciated! I just can't get my head around this one. The site is created using Magento, so I can't alter the html easily.
.vertnav-container {
margin-top:10px;
}
#vertnav li .vertnav-cat {
display:block;
width:210px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
font-size: 12px;
}
#vertnav li a {
}
#vertnav .inactive .vertnav-cat {
background-image: url(../images/inactive_bgd.jpg);
background-repeat: repeat-x;
}
#vertnav .next .vertnav-cat {
background-color:#b7de70;
}
#vertnav .prev .vertnav-cat {
background-color:#b7de70;
}
#vertnav li.parent .vertnav-cat {
background-color:#FFFFFF;
font-weight:bold;
}
#vertnav li.active .vertnav-cat {
background-color:#f59942;
background-image: url(../images/active_bgd.jpg);
font-weight:bold;
}
#vertnav li.inactive .vertnav-cat {
font-weight:normal;
}
#vertnav .level0 .vertnav-cat {
}
#vertnav .level1 .vertnav-cat {
padding-left:20px;
width:183px;
height: 5px;
border-bottom:1px dotted gray;
}
#vertnav .level2 .vertnav-cat {
padding-left:20px;
width:172px;
}
#vertnav .level3 .vertnav-cat {
padding-left:30px;
width:162px;
}
UPDATE:
I think this is the html, but am not sure how I edit it as it's through Magento, will need to look this end if you think that's what needs to be done...
<div class="col-left sidebar"><div class="vertnav-container">
<div class="">
<h4 class="no-display">Category Navigation:</h4>
<ul id="vertnav">
<li class="first prev level0-inactive has-children level0 inactive fruit">
<span class="vertnav-cat"><span>Fruit</span> </span>
</li>
<li class="level0-active level0 active vegetables">
<span class="vertnav-cat"> <span>Vegetables</span></span>
</li>
<li class="next level0-inactive level0 inactive meat">
<span class="vertnav-cat"><span>Meat</span> </span>
</li>
<li class="level0-inactive level0 inactive dairy">
<span class="vertnav-cat"><span>Dairy</span></span>
</li>
<li class="last level0-inactive level0 inactive for-the-pantry">
<span class="vertnav-cat"><span>For the Pantry</span></span>
</li>
</ul>
</div>
</div>
Well, you haven't responded. Here is the most simplistic method I could come up to easily target different elements. The best I could do without seeing your HTML, but it should provide some guidance into how to structure your layout.
Few things. I'd use lists instead of a ton of classes, as your CSS would indicate you're doing.
Also, using a:focus psuedo class is an easy way to target the actively clicked link without using a bunch of additional classes and whatnot.
JS Fiddle: http://jsfiddle.net/SinisterSystems/v4n7G/3/
HTML:
<ul id="leftNav">
<li>Head One
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li>Head Two
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
</ul>
CSS:
a, a:visited, a:hover, a:active {
color:#AAA;
}
ul#leftNav {
width:200px;
}
ul#leftNav li {
list-style:none;
color:#666;
}
ul#leftNav a:focus {
color:green;
}
ul#leftNav ul a{
color:red;
}
ul#leftNav ul a:focus {
color:blue;
}
<ul id="nav" class="sixteen columns">
<li>Home
</li>
<li>Portfolio
<ul>
<li>Asia
<ul>
<li>Korea</li>
<li>China</li>
<li>Japan</li>
</ul>
</li>
<li>Europe
<ul>
<li>France</li>
<li>Germany</li>
<li>Italy</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
#nav {
width:800px;
margin:30px 50px;
padding: 0;
float:left;
}
#nav li {
list-style: none;
float: left;
padding:0 10px;
background-color:#367FB3;
color:white;
}
#nav li a:hover {
background-color:#52baff;
color:#fff;
}
//daf adf
/*--temp--*/
#nav ul ul li {
clear:left;
}
#nav ul ul {
position:absolute;
left:14em;
top:0;
}
#nav ul ul li a {
display:block;
padding: 3px 15px;
color: #242424;
text-decoration: none;
font-size:13px;
font-family:"Lato" !important;
}
/*--end temp--*/
#nav li a {
display: block;
padding: 3px 15px;
color: #242424;
text-decoration: none;
font-size:13px;
font-family:"Lato" !important;
}
#nav a:hover {
color:#367FB3;
}
#nav a:active {
color:#367FB3;
}
#nav li ul {
display: none;
width: 14em;
/* Width to help Opera out */
background-color:transparent;
z-index:666;
}
#nav li:hover ul, #nav li.hover ul {
display: block;
position: absolute;
margin:0px -10px;
padding:0px;
}
#nav li:hover ul ul {
display:none;
}
#nav li ul li:hover ul {
display:block
}
#nav li:hover li, #nav li.hover li {
float: none;
line-height:30px;
}
#nav li:hover li a, #nav li.hover li a {
background-color:#367FB3;
color:#fff;
font-size:13px;
font-family:"Lato" !important;
}
#nav li li a:hover {
background-color:#52baff;
color:#fff;
}
Working Fiddle
hi friends i want to applay css on children element when hove on parent element like.
<html>
<head></head>
<style>
.nav_menu{
width:100%;
}
.nav_menu ul{
list-style-type:none;
list-style:none;
}
.nav_menu ul li{
display:inline-block;
padding:10px 20px;
background:#000000;
margin-left:10px;
}
.nav_menu ul li a{
text-decoration:none;
color : #FFFFFF;
}
// i alread try to write .nav_menu ul li:hover + a or
//.nav_menu ul li:hover, a
.nav_menu ul li:hover ~ a{
background : #FFFFFF;
color : #000000;
}
</style>
<body>
<div class='nav_menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
</ul>
</div>
</body>
</html>
i want hover on the li tag when change the background of li tag and with the change color of a tag.
i don't know how to change children element css to hover on parent element.
please help.
thank you
li:hover a {
color: red;
}
li:hover {
background: green;
}
also, sometimes you might need to add this to a
.nav_menu a {
display: inline-block;
}
I'm looking for some advice on this issue.
I went through a tutorial a while back to build a CSS drop down menu and can't seem to change the default color of the sub menus – it always matches the default red color for the a tag.
I've been messing around with this for a while now and can't seem to find a solution. Can someone help me out with this please?
Here is the html:
<nav>
<ul>
<li><a class="selected" href="index.html">Home</a></li>
<li>Clothing</li>
<li>Gear</li>
<li>Brand
<ul>
<li>XXXXXX</li>
<li>XXXXXX</li>
</ul>
</li>
<li>Fighters
<ul>
<li>XXXXXX</li>
<li>XXXXXX</li>
</ul>
</li>
<li>My Account</li>
</ul>
</nav>
And here is the CSS:
nav {
position:relative;
float:right;
font-size:14px;
margin-top:35px;
font-weight:bold;
padding-right:178px;
z-index:4;
}
nav ul ul {
display:none; /* hide sub menus */
}
nav ul li:hover > ul {
display:block; /* show sub menus on hover */
}
nav ul {
float:right;
font-size:14px;
margin-top:-3px;
text-transform:uppercase;
list-style:none;
position:relative; /* position sub menu according to nav */
display:inline-table; /* condense with of sub menu to fit */
}
nav ul:after {
content:"";
clear:both;
display:block; /* clear floats on other list items */
}
nav ul li {
float:left;
}
nav ul li:hover a {
color:#ee1f3b;
text-decoration:none;
-webkit-transition-property:color;
-webkit-transition-duration:0.2s, 0.2s;
-webkit-transition-timing-function:linear, ease-in;
-moz-transition-property:color;
-moz-transition-duration:0.2s, 0.2s;
-moz-transition-timing-function:linear, ease-in;
}
nav ul li a {
padding:4px 11px;
text-decoration:none;
color:#000000;
display:block;
text-decoration:none;
}
nav ul ul {
background:#cacaca;
position:absolute;
top:25px; /* sub position */
}
nav ul ul li {
float:none;
border-bottom:1px solid rgba(0, 0, 0, 0.2);
position:relative;
}
nav ul ul li:last-child {
border-bottom:1px solid rgba(0, 0, 0, 0.2);
}
.selected {
color:#ee1f3b;
}
nav ul ul li a:hover {
color:#000000;
}
Thanks for your time.
From the above code for changing the color of submenus, you have not targeted the child elements of the main menus. For that you need to target them and add new rules to specifically target that element and change the color. Here is the solution.
On hover of the items with submenus, the color change for instance here green color on display of the submenus.
nav ul li:hover ul li a{color:green;}
On hover of the submenus, change of color from green to yellow for instance.
nav ul li:hover ul li a:hover{color:yellow;}
To elaborate this,
The HTML:
<nav>
<ul>
<li><a class="selected" href="index.html">Home</a></li>
<li>Clothing</li>
<li>Gear</li>
<li>Brand
<ul>
<li>XXXXXX</li>
<li>XXXXXX</li>
</ul>
</li>
<li>Fighters
<ul>
<li>XXXXXX</li>
<li>XXXXXX</li>
</ul>
</li>
<li>My Account</li>
</ul>
</nav>
The CSS:
nav {
position:relative;
float:right;
font-size:14px;
margin-top:35px;
font-weight:bold;
padding-right:178px;
z-index:4;
}
nav ul ul {
display:none; /* hide sub menus */
}
nav ul li:hover > ul {
display:block; /* show sub menus on hover */
}
nav ul {
float:right;
font-size:14px;
margin-top:-3px;
text-transform:uppercase;
list-style:none;
position:relative; /* position sub menu according to nav */
display:inline-table; /* condense with of sub menu to fit */
}
nav ul:after {
content:"";
clear:both;
display:block; /* clear floats on other list items */
}
nav ul li {
float:left;
}
nav ul li:hover a {
color:#ee1f3b;
text-decoration:none;
-webkit-transition-property:color;
-webkit-transition-duration:0.2s, 0.2s;
-webkit-transition-timing-function:linear, ease-in;
-moz-transition-property:color;
-moz-transition-duration:0.2s, 0.2s;
-moz-transition-timing-function:linear, ease-in;
}
nav ul li a {
padding:4px 11px;
text-decoration:none;
color:#000000;
display:block;
text-decoration:none;
}
nav ul ul {
background:#cacaca;
position:absolute;
top:25px; /* sub position */
}
nav ul ul li {
float:none;
border-bottom:1px solid rgba(0, 0, 0, 0.2);
position:relative;
}
nav ul ul li:last-child {
border-bottom:1px solid rgba(0, 0, 0, 0.2);
}
.selected {
color:#ee1f3b;
}
nav ul ul li a:hover {
color:#000000;
}
nav ul li:hover ul li a{color:green;}
nav ul li:hover ul li a:hover{color:yellow;}
Hope this helps.
Another method is to give the ul a id in the submenu something like this
<li>Brand
<ul id="submenu">
<li>AAAAAA</li>
<li>BBBBBB</li>
</ul>
</li>
CSS
#submenu li a
{
color:green;
}
See the full Jsfiddle here
I am creating a center, nested navigation menu, and am trying to use pure CSS. See a working demo HERE: http://jsfiddle.net/jenstechs/MKtTN/2/
HTML:
<nav>
<ul id="primary">
<li>Link One</li>
<li>Link Two</li>
<li>Link Threee
<ul class="secondary">
<li>Services One</li>
<li>Services Two</li>
</ul>
</li>
<li>Link Four</li>
<li>Link Fiiiiive</li>
</ul>
</nav>
CSS:
nav {
margin:15px auto 10px auto;
width:100%;
}
nav ul#primary {
width: 100%;
padding: 10px 0;
margin: 0;
background-color: #FFF;
text-align: center;
}
nav ul#primary>li {
display: inline;
padding:5px 0;
margin-left:0;
}
nav ul#primary>li>a {
padding: 0px 30px;
margin-right:-6px;
color: #000;
text-decoration: none;
border-right:2px solid #999;
}
nav ul#primary>li>a:hover,
nav ul#primary>li.active>a {
background-color: #900;
color:#FFF;
padding-top:10px;
padding-bottom:25px;
}
nav ul#primary>li:first-child a {
border-left:2px solid #999;
}
ul.secondary {
padding-top:0;
position:absolute;
display:none;
}
ul.secondary li {
}
nav ul#primary li:hover ul.secondary {
display:block;
}
nav ul#primary li:hover ul.secondary li {
}
ul.secondary li a {
display:block;
width:7em;
color:#FFF;
background-color:#900;
font-size:0.8em;
text-decoration:none;
text-align:left;
line-height:1.4em;
border-bottom:1px solid #FFF;
}
ul.secondary li:last-child a {
border-bottom:0;
}
ul.secondary li a:hover {
color:#DDD;
}
I also have a minimal reset, the only styles it has on lists is a few default margins.
Since this is a centered navigation bar, the CSS I'm using is inline, not floated. So I have no idea what to put in the CSS to position the sub-menu actually underneath its parent element. Most examples I've seen have position:absolute but that seems to keep it at the left. I've tried various methods of hiding and showing (display:, left:) but can't seem to find that magic combination.
Here I only have the one sub-list, actually, but what if I had sublists for all of them?
Thanks for any tips or links to examples...
To make position: absolute elements position relative to their parent, make the parent position: relative.
In your case:
nav ul#primary>li {
display: inline;
padding:5px 0;
margin-left:0;
position: relative;
}
Demo: http://jsfiddle.net/MKtTN/3/
In firefox (this doesnt work at all in IE6) i have this code
<div class="menu">
<ul class="nav">
<li>Home</li>
<li>Software
<ul>
<li>Blah</li>
<li>Blah3</li>
<li>Blah</li>
</ul>
</li>
<li>Code Samples</li>
<li>Resume</li>
</ul>
</div>
using this css
ul.nav li:hover,
.nav a:hover
{
background-color:#606060;
color: white;
}
I have the menu text ("software") become white while the background becomes grey. However when i move my mouse down to the menu item the background continues to be grey but the next is no longer white! why? how can i fix this?
This should work:
ul.nav li:hover,
ul.nav li:hover a,
{
background-color:#606060;
color: white;
}
I'm not sure why but apparently you have to select the a element directly to change its color, otherwise it will be ignored.
Could be other rules interfering with your CSS, can't say without seeing everything. I recommend using Firebug to look at calculated CSS and CSS rules to see if it's doing what you expect.
You'd have to rework your css but if you are doing a basic menu submenu you can get it all working in IE and FF by wrapping the submenu in your 'a' tag.
<div class="menu">
<ul class="nav">
<li>Home</li>
<li><a href="software.html">Software
<ul>
<li>Blah</li>
<li>Blah3</li>
<li>Blah</li>
</ul>
</a>
</li>
<li>Code Samples</li>
<li>Resume</li>
</ul>
</div>
Some CSS which shouldn't require JS to to work in IE6. Not tested but should work. Note you also need to add styling and positioning for the subnav, but this still shows the basics.
.menu ul li a {
color: blue;
}
.menu ul li a ul {
display: none;
}
.menu ul li a:hover {
color: white;
}
.menu ul li a:hover ul {
display: block;
}
.menu ul li a:hover ul li {
}
.menu ul li a:hover ul li a {
color: black;
}
.menu ul li a:hover ul li a:hover {
color: red;
}
Then for each submenu you want after the first menu just add
.menu ul li a:hover ul li a ul {
display: none;
}
.menu ul li a:hover ul li a:hover ul {
display: block;
}