I am trying to target the header element of a drop down menu which I load in jfiddle here: http://jsfiddle.net/DZLtm/16/
I am trying to get it so when you roll over nav ul li it show black instead of red. Here are the lines that I would have thought would do it.
nav ul li {float: right; width: 172px; height: 35px; background-color: red;}
nav ul li:hover > ul {display: block; text-align: left; background-color: black;}
Here is the HTML:
<nav>
<ul>
<li>BUTTON IMAGE
<ul>
<li>Accreditation Client Login</li>
<li>Training Client Login</li>
<li>Training Registration</li>
<li>Guardian Tracking</li>
</ul>
</li>
</ul>
</nav>
Can someone please tell me why nav ul li:hover wont work and what is > ul have to do with it. When I remove it it breaks the menu. Thank you Frank!
Just add nav ul li:hover {
background-color:black;
}
http://jsfiddle.net/weissman258/DZLtm/17/
Related
I'm trying to learn to build a drop-down menu for a navigation bar. I want a main element that says Music, then 2 sub menus called Songs, and Albums, then I'd like a list of links(songs, albums) to appear on hover. When I hover over my main element however, all sub content of my elements are also displaying, and I'd like to stop this from happening, until the sub-menu(Albums, or Songs) is hovered over.
I've tried flipping some things around in CSS, tried every combo I can come up with. I'm assuming I'm missing something.
HTML
nav ul ul li li {
display: none;
background-color: yellow;
}
nav ul ul:hover li li {
display: block;
}
nav ul ul li {
display: none;
background-color: red;
}
nav ul {
position: relative;
background-color: pink;
}
nav ul :hover li {
display: block;
}
<div class="wrapper">
<nav>
<ul>
<li>Music
<ul>
<li>Songs
<ul>
<li> Blue slide park</li>
<li>Albums
<ul>
<li>KIDS</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
****EDIT*****
I fixed my HTML, please just focus on CSS.
You use child combinator > to select the immediate children of the element.
nav > ul ul{
display: none;
}
nav > ul li:hover > ul{
display: block;
}
<header>
<H2>My Web Page</H2>
</header>
<body>
<div class="wrapper">
<nav>
<ul>
<li>Music
<ul>
<li>Songs
<ul>
<li>Blue side parks</li>
<li>Albums</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
?
nav ul ul li li {
display: none;
background-color: yellow;
}
nav ul ul:hover li li {
display: block;
}
nav ul ul li {
display: none;
background-color: red;
}
nav ul {
position: relative;
background-color: pink;
}
nav ul :hover li {
display: block;
}
nav ul li ul li ul{
display:none;
}
nav ul li ul li:hover ul{
display:block;
}
nav ul li ul li ul li .x2{
display:none;
}
.x1:hover .x2{
display:block;
}
<header>
<H2>My Web Page</H2>
</header>
<body>
<div class="wrapper">
<nav>
<ul>
<li>Music
<ul>
<li>Songs
<ul>
<li><a
href="#"> Blue slide park</li>
<li class="x1">Albums
<ul class="x2">
<li><a
href="#">KIDS</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
I have tried but can not make li tag wrap completely a tag inside with its padding. I want the width of the li depends on a''s padding but how ever I try, it doesn't work, if you know whats wrong, Please help me?
<ul>
<li>TAB 1<br />
<ul class="sub-ul">
<li>TEXT1</li>
<li>TEXT1</li>
</ul>
</li>
<li>TAB 2<br />
<ul class="sub-ul">
<li>TEXT2</li>
<li>TEXT2</li>
</ul>
</li>
</ul>
//STYLE
ul >li {display: inline-block; margin-left: 0;}
ul >li > a {padding: 10px 15px;} I need li wrapping around this padding.
I think this is what you are looking for. Hope it helps.
li {
display: inline-block;
margin-left: 0;
}
li > a {
padding: 10px 15px;
}
li ul li {
display: block;
}
I can't get the hover in my menubar to work. The html and css is below. I can get the display: none to work by itself. I can get the hover to work by itself. They just won't work together. Not sure what I am doing wrong.
This is the html:
<nav>
<ul>
<li><img class="mainbar"src="images/logov6v2.png" width="175" height="150" padding="0" text-align="center" vertical-align="text-top">
<li id="menudrop" class="rightbar">Menu</li>
<ul data-toggle="">
<li>Account Settings</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</li>
</ul>
</nav>
This is the css:
#menudrop.rightbar ul li a {
color: red;
display: block;
text-decoration: none;
}
nav ul li ul {
display: none ;
background: #5f6975;
position: relative;
top:100%;
}
nav ul li ul:hover li {
display: block;
}
Besides fixing some missing closing tags the main adjustment is to change this
nav ul li ul:hover li {
display: block;
}
into that
nav ul li:hover ul {
display: block;
}
As the nav ul li ul ist set to display:none; it's not possible to set a hover on it.
Adjusted in Fiddle
And without the image:
#menudrop.rightbar ul li a {
color: red;
display: block;
text-decoration: none;
}
nav ul li ul {
display: none;
background: #5f6975;
position: relative;
top:100%;
}
nav ul li:hover ul {
display: block;
}
<nav>
<ul>
<li id="menudrop" class="rightbar">Menu
<ul data-toggle="">
<li>Account Settings
</li>
<li>About Us
</li>
<li>Contact
</li>
</ul>
</li>
</ul>
</nav>
I have a drop down menu and I'd like each main menu tab to change to a specific image while hovering over it with the mouse.
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;}
li ul {display: none;}
ul li a {display: block; text-decoration: none; color: #fff;}
ul li a:hover {}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background-image:url(rf3.gif);}
li:hover li a:hover {background: #fec96b; color:#fff;}
<ul>
<li>Support</li>
<li>Web Design
<ul>
<li>HTML</li>
</ul>
</li>
<li>Content Management
<ul>
<li>Joomla</li>
</ul>
</li>
</ul>
I'd like tabs like 'Support' and 'Web Desing' to change to each of their unique images - they are different.
I tried adding a class to ex.
<li class="hover">Support</li>
but with no success.
Give those two list items a unique class name, and then specify the appropriate CSS for them.
CSS:
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;}
li ul {display: none;}
ul li a {display: block; text-decoration: none; color: #fff;}
ul li a:hover {}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background-image:url(rf3.gif);}
li:hover li a:hover {background: #fec96b; color:#fff;}
li.support > a:hover { background-url(path_to_image_for_support.png); }
li.web-design > a:hover { background-url(path_to_image_for_web_design.png); }
HTML:
<ul>
<li class="support">Support</li>
<li class="web-design">Web Design
<ul>
<li>HTML</li>
</ul>
</li>
<li>Content Management
<ul>
<li>Joomla</li>
</ul>
</li>
</ul>
Use Javascript. Instead of class, use 'ID' and assign each one a number. Then create a Javscript function that will use:
document.getElementById('[line number]').style.backgroundColor = "[desired background color]";
Done.
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;
}