I got a problem with the CSS hover-event.
I created a page with a navigation bar at the top. For compatibility reasons I had to move away from nav and changed it to a simple div. (nav is not known in IE8, but it still has to be working there.)
<div class="nav">
<ul>
<li> <a> Something </a>
<ul>
....
</ul>
</li>
....
</ul>
</div>
That resulted in making the hover on my navigation bar not working anymore. But it's not, that nothing is working, only the first one of the following lines does not do it's job anymore. The background simply does not change.
.nav ul li:hover { background: #BFBFBF; } - not working
.nav ul li:hover > a { color:#FFFFFF; } - working perfectly fine
.nav ul li:hover > ul { display:block; } - working perfect as well
.nav ul {
background: #404040;
list-style:none;
padding:0 20px;
margin: 0;
height: 30px;
text-align:left;
display:block;
}
I double checked basically everything I know, suspected or found, that could be the source of my issue, but I was yet unable to get it back working.
I tried using background-color instead of background, without success.
I want to do it without having to use anything besides HTML and CSS, which should be possible, since it worked, when I still was using the nav-element.
I am noob to css, maybe I'm missing some really simple detail.
Thanks in advance.
Rather than modifying the nav bar content, just try to change the animation for the thing which you are pointing at, I mean that rather than hovering the <li> component just make the text in it hovering
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .2s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
Try defining the <a> element and hovering it as the whole <li> won't hover with multiple overlapping CSS formats
See I created something in html. And your code is working.
Its good if you can paste your html
<head runat="server">
<title></title>
<style type="text/css">
.nav ul li:hover {
background: #BFBFBF;
}
.nav ul li:hover > a {
color: #FFFFFF;
}
.nav ul li:hover > ul {
display: block;
}
</style>
<nav class="nav">
<ul>
<li>
<a>Li 1</a>
</li>
<li>
<ul>
<li>Li 2
</li>
</ul>
</li>
<li>Li 3
</li>
</ul>
</nav>
I'm new with CSS and testing some stuff. I created a dropdown menu but this doesn't work correctly.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link href = "üben_css.css" rel = "stylesheet" type="text/css">
<title> xx</title>
</head>
<body>
<div id="nav">
<ul>
<li> Home </li>
<li> xx
<ul>
<li> Hc </li>
<li> Scc </li>
</ul>
<li>Zubehör </li>
<li> Service </li>
<li> Forum </li>
</ul>
</div>
</body>
</html>
CSS code:
body{
margin:0;
padding:0;
}
#nav{
background-color:silver;
position:relative;
}
#nav ul li{
display:inline;
}
#nav ul ul{
display:none;
}
#nav ul li:hover ul{
display:block;
}
#nav ul ul li{
display:block;
}
The problem is that the nav bar is displayed inline but when I hover over my "xx" element the rest of my nav bar appear under my dropdown list. How can I fix this?
http://www.fotos-hochladen.net/uploads/20140921004u0kxad3i2r.png
Remove these lines from your css:
#nav ul li:hover ul{
display:block;
}
Using
#nav ul li{
display:inline-block;
}
Compared to just inline. If it was just inline the absolute positioning below would cause multiple dropdowns to all appear in the same place according to the #nav div.
#nav ul li:hover ul{
position: absolute;
display:block;
}
This still doesn't look very good but it's functional. Checkout at tutsplus for some good tutorials.
At the same time, I'm sure you could solve this much more efficiently with jQuery.
I have these nested ul and li . When i fill background color, nested li leaves indented portion white. I have a number of li like this that gets filled from database so i cannot give margin left to individual text in li . How can i do this so that background fills whole line along with the indentation?
Right now it looks like this
I want it like this
Any suggestions how can do this? Thanks in advance. I cannot change the html markup as i'll have to change a lot of code. Is there a way to do this using this markup. these li are coming from db query so i dont have exact number of li in this case.
Demo http://jsbin.com/uReBEVe/1/
By default, <ul> has padding-left to accomodate the bullet point.
If you add this to your CSS:
ul {padding-left:0}
ul>li {padding-left:40px}
You should get the effect you want.
EDIT: Also you need to correct your HTML :p <ul> can ONLY have <li> as children.
Best thing to do is to use a structure which makes it easy for database management , html and styling(CSS) .
HTML:
<body>
<ul class="main">
<li>1.</li>
<li><ul>2</ul></li>
<li><ul><li><ul>3.</ul></li></ul></li>
</ul>
</body>
CSS:
.main{
position:relative;
right:40px;
}
li{
list-style:none;
background:red;
margin-top:1px;
}
Fiddle 1.
I dont know if ul not containing li is valid or invalid.If its invalid then you can use:
<body>
<ul class="main">
<li>1.</li>
<li><ul><li>2</li></ul></li>
<li><ul><li><ul><li>3.</li></ul></li></ul></li>
</ul>
</body>
Fiddle 2
Flexible, Multi-Level Nesting Solution
This is very similar to another question I answered here, and I've composed a similar solution for you below. You will want valid html by having all nested li elements inside their own ul (as others have noted here), and it would be best to control all this by some class on the outermost ul (though that is not required, but makes targeting this list a whole lot easier).
The key here is supplying the background through the :before pseudo-element, which is made to span the whole width of the outermost ul.
Here is my demo jsbin.
HTML
<ul class="full-width-list">
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>B</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.full-width-list {
position: relative;
padding: 0 0 0 4px;
}
.full-width-list ul {
margin: 0;
padding: 0
}
.full-width-list li {
list-style:none;
padding: 0;
margin: 0;
height: 1.2em;
line-height: 1.2em;
}
.full-width-list ul > li {
margin-top: 4px;
padding: 0 0 0 36px;
}
.full-width-list li:first-child:before {
content: '';
height: 1.2em;
position: absolute;
left: 0;
right: 0;
z-index: -1;
background:red;
}
.full-width-list li:first-child:hover:before {
background:green
}
Limitations
This solution has two main limitations:
None of the ul or li elements can have a position other than the default static set on them, as the :before pseudo-element of the li elements needs to have its only positioned parent be the .full-width-list element.
There has to be a set height on the li items. In my example I use 1.2em, but whatever height you set, it means that the li elements cannot go to two or more lines of text (so this solution only works with a single line of text).
You can do this with :before hack as you have no access to the code
Working jsBin Demo
CSS
li{list-style:none;background:red;margin-top:4px; }
li:hover{background:green}
li:hover:before {background:green}
li:before {background:red; width:100%; content:'.'; position:absolute; left:0; z-index: -1;}
This works at arbitrary depths without hacks or nonsense.
The people saying "can't" and "impossible" in this thread really need to learn what those words mean with respect to CSS (generally, "haven't figured out how yet.") :)
The idea is simple: set a :before selector which fits the left and right edges by absolute positioning and paints a background color. You need to set a z-index: to put it behind its content, a content: '\0020' to force it to paint (that's a non-breaking space,) and you're good.
You can bound this by setting it inside a position: relative container.
<!doctype html>
<html>
<head>
<style>
li {
list-style-type : none;
margin-bottom : 0.25em;
}
li:before {
position : absolute;
left : 0;
right : 0;
background-color : #eef;
content : "\00a0";
z-index : -1;
}
</style>
</head>
<body>
<ul>
<li>Test</li>
<li><ul>
<li>Test</li>
<li><ul>
<li>Test</li>
</ul></li>
</ul></li>
</ul>
</body>
</html>
Your markup is broken, you should nest li in a single ul like this:
<ul>
<li>Text</li>
<li>Text 1</li>
</ul>
This was your markup
<ul>
<li>A</li>
<ul>
<li>B</li>
<ul>
<li>B</li>
</ul>
</ul>
<ul>
I assume you see why this is wrong.
I've fixed the JSBin for you and it has the correct effect.
EDIT: You could of course add the padding-left by looping over all lis using javascript.
You could not be sure enough about browser consistency until markup cleanup and consistency, sad but true. All the suggestions from above looks good, there is bit of alternative from my practical view.
The markup:
<ul>
<li>A</li>
<li><p>B</li>
<li><p><p>B</li>
<li><p><p><p>B</li>
....
</ul>
And CSS:
li p {
padding-left: 1em;
display: inline;
}
JSbin
p tag is optional to close in HTML subset, and generally should works in every browser anyway no matter of doctype. In case you are on xHTML and worry about validation an option could be using closing tags like:
<ul>
<li>A</li>
<li><p></p>B</li>
<li><p></p><p></p>B</li>
....
</ul>
Try this:
<ul class="lvl1">
<li>A</li>
<ul class="lvl2"><li>B</li>
<ul class="lvl3"><li>B</li></ul>
</ul>
</ul>
li {
background: none repeat scroll 0 0 #FF0000;
list-style: none outside none;
margin-top: 4px;
}
ul { padding:0px;}
ul.lvl1>li {padding-left:30px;}
ul.lvl2>li {padding-left:60px;}
ul.lvl3>li {padding-left:90px;}
See here: http://jsfiddle.net/x5K4a/
1) Your HTML is invalid (missing <li> around <ul>)
2) The only way to make indentation work as you expected is a CSS rule for each level.
ul ul li.line { padding-left: 20px !important }
ul ul ul li.line { padding-left: 40px !important; }
...
http://jsbin.com/uReBEVe/12/edit
if it is just a matter of background-color, you can use a shadow of same color.
http://codepen.io/gc-nomade/pen/fxBAl (html structure fixed)
<ul class="ulparent">
<li>
<p>A</p>
<ul>
<li>
<p>B</p>
<ul>
<li>
<p>B</p></li>
</ul>
</li>
</ul>
</li>
</ul>
.ulparent {overflow:hidden;}
li p {background:green;box-shadow:-200px 0 0 green;/* -200px for instance or whatever suits your need */margin:4px 0;}
li p:hover {background:red;box-shadow:-200px 0 0 red;}
Else, if it is a background-image, i would use pseudo-element and background-attachment:fixed;(demo included in codepen , using a linear-gradient as image )
I am going to give you the proper idea how to apply css rules over the HTML contents.Below the css rules I have created just copy it and see the answer.It is the child combinator which I used!I inspect whole the answers provided by the different users which is not followed the css rules at all. Just let me know! Hope the answer!
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
li{
list-style:none;
background:red;
margin-top:4px;
}
body>ul>ul>li{
margin: 4px 0 0 -40px;
}
body>ul>ul>ul>li{
margin: 4px 0 0 -80px;
}
body>ul>ul>li {
padding:0px 0px 0px 40px;
}
body>ul>ul>ul>li{
padding:0px 0px 0px 80px;
}
li:hover{
background:green;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>C</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Save the image at first to your local drive or drag and drop this image into the new tab browser to see more visible.
Here is the proper HTML structure that you should follow, with each UL element having two LI elements. One for the value of each line and one as the parent for the next indented value.
<ul>
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>C</li>
</ul>
</li>
</ul>
<li>
</ul>
For the CSS, this solution requires you to have a max number of 'levels' in your list hierarchy (see code comment)
li {
list-style:none;
padding-left:0px;
box-sizing:border-box;
}
ul {
padding-left:0
}
ul > li:nth-of-type(1):hover {
background:green
}
ul li:nth-of-type(1) {
padding-left:50px;
background:red;
margin-top:4px
}
ul li li:nth-of-type(1) {
padding-left:100px;
}
ul li li li:nth-of-type(1) {
padding-left:150px;
}
/*
Continue incrementing the padding for the li
children for however many levels you want
*/
Make note, the nth-of-type selector is supported by all browsers EXCEPT for IE8 and below.
See JSBin for working example: http://jsbin.com/uReBEVe/51
Good luck!
Both UL and OL inherit margins. Your fix would be to zero out the margin:
ul, ol
{
margin:0;
}
You can add this CSS in your code to get your desired results:
li {
list-style: none;
background: red;
margin-top: 4px;
}
ul {
padding: initial !important;
}
ul ul li {
padding-left: 40px;
}
ul ul ul li {
padding-left: 80px;
}
li:hover {
background: green;
}
Result on jsbin is here: http://jsbin.com/uReBEVe/33/edit
#AsrafulHaque has the correct idea about using padding to extend the background width without changing nesting indents.
However, because you don't know how many < li> there will be, you can't expect this to be a pure CSS solution.
You're attempting to do a pretty awkward thing but it would be possible to loop over them and inject dynamic padding using javascript/jquery or something:
i = 40;
$('img.yourImageClass').each(function() {
$(this).css('padding-left', i+'px');
i = i + 40;
});
You could also do this type of injection with pre-processing on the server side I am sure, but definitely not with CSS alone. You need a dynamic solution (i.e. the ability to use variables) to support your dynamic output.
A very very fiddly jsfiddle but it works with a little nudge in the right direction from jQuery. Not a great resolve but a resolve none the less.
HTML
<ul>
<li>A</li>
<ul>
<li>B</li>
<ul>
<li>B</li>
</ul>
</ul>
</ul>
CSS
ul {
list-style-type:none;
margin-top:5px;
padding-left:40px;
float:left;
width:400px;
overflow:hidden;
background:#ff0000;
}
li {
padding-top:5px;
}
ul div {
position:absolute;
left:0;
width:100%;
border-top:3px solid #fff;
}
jQuery
$(document).ready(function(){
$('ul').prepend('<div></div>');
});
jsFiddle here. Hopefully this works for you!
You can do like this
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul class="mainUL">
<li>A</li>
<ul><li>B</li>
<ul><li>C</li></ul>
</ul>
</ul>
</body>
</html>
CSS Code
li{list-style:none;background:red;margin-top:4px; }
li:hover{background:green}
li:hover:before {background:green}
li:before {background:red; width:100%; content:'.'; position:absolute;left:0; z-index: -1;color:red;}
.mainUL {padding-left: 0px;}
You can see the working demo : http://jsbin.com/uReBEVe/71/edit
from your demo:
if you apply
ul{
padding:0;
margin:0;
}
everything sits flush to the wall like you want.
if you want text indents
ul ul li{
text-ident:20px;
}
which is nesting. will only targets li's that are in ul's that are nested in ul's. then what you want works and you don't need to change your code
you can also keep nesting that code
add more ul's and li's depending on the depth of your structure, but this should give you a very good base
I wonder if you can help me. I'm trying to create a drop down menu using just HTML and CSS. However, my hover function isn't working in IE10 as before it was. It works with other browsers like firefox and chrome but not with IE10.
My HTML code
<html>
<head>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class = "centeredmenu">
<ul>
<li>Home</li>
<li>Client
<ul>
<li>Create Client</li>
<li>View Clients</li>
</ul>
</li>
<li>Invoices
<ul>
<li>Search</li>
<li>View All</li>
</ul>
</li>
<li>Suppliers
<ul>
<li>Add Supplier</li>
<li>View All</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
My CSS Code
.centeredmenu ul li ul { display:none; }
.centeredmenu ul li:hover > ul { display:block; }
.centeredmenu ul li ul li ul { display:none; }
.centeredmenu ul li ul li:hover > ul { display:block; }
.centeredmenu ul {
background:#9bbe3c;
width:99.8%;
margin-top:0.5%;
z-index:1;
list-style:none;
position:relative;
display:inline-table;
font-family:'Calibri' !important;
font-size:1em;
border:1px solid #596f1b;
}
.centeredmenu ul:after { content: ""; clear:both; display:block; }
.centeredmenu ul li { float:left; }
.centeredmenu ul li a {
display:block;
color:#fff;
text-decoration:none;
padding:14px 22px 14px 23px !important;
}
.centeredmenu ul li a:hover{ background:#586f1b; }
.centeredmenu ul li ul { background:#9bbe3c; position:absolute; top:94.5%; width:200px; }
.centeredmenu ul li ul li { float:none; position:relative; }
.centeredmenu ul li ul li ul { background:#9bbe3c; position:absolute; left:101%; top:-1%; }
Today I ran into a similar problem. The drop down menu was working fine on Firefox, but not at all in IE.
1- I changed the file from html to asp.
This allowed me to see that I had some orphan fragment of code.
-> My code
-> </div>
<td class="whatever">
-> <div>
I removed it, and everything was working fine.
I just added the following code in "head" and its works for me.
meta http-equiv="X-UA-Compatible" content="IE=edge" in matatag
When I place your HTML and CSS on JSFiddle, it works as expected.
May be something else wrong while you are accessing on your machine.
<div class = "centeredmenu">
<ul>
<li>Home</li>
<li>Client
<ul>
<li>Create Client</li>
<li>View Clients</li>
</ul>
</li>
<li>Invoices
<ul>
<li>Search</li>
<li>View All</li>
</ul>
</li>
<li>Suppliers
<ul>
<li>Add Supplier</li>
<li>View All</li>
</ul>
</li>
</ul>
</div>
Refer LIVE DEMO
I ran into the exact same issue. It turned out I was missing .
Entering the following at the top of my HTML page solved my problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The problem is that IE10 renders in "quirks" mode. So if you changed it to "standards" mode it should work fine.
Add the following in the head of your website to force IE 10 to use standards mode
if you are using php... credit for the answer goes to:
IE10 renders in IE7 mode. How to force Standards mode?
Weird stuff happening here. See this tinkerbin page, if you may: http://tinkerbin.com/UZy6H6q4
Here's the html and css in case you can't see the tinkerbin.
<head>
<style>
ul{
overflow: hidden;
padding:0;
margin:0;
list-style-type:none;
background-color: pink;
}
ul a{
text-decoration: none;
color: white;
}
li{
float: left;
height: 30px;
line-height: 30px;
width: 90px;
margin-right: 5px;
background-color:red;
text-align:center;
-webkit-transition: all .6s linear;
}
#case2 li{
background: none;
}
#case2 li:hover, li:hover{
background-color: lightblue;
}
</style>
</head>
<body>
<!-- CASE #1 -->
<ul id="case1">
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- CASE #2 -->
<ul id="case2">
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
So , the problem:
-the transition doesn't work on CASE #1.
-removing the "background-color" from the li element (as I did on CASE #2) makes it work, but in a weird way - when you take back the cursor from over the li element, before the background color fades back to transparent, it first becomes black.
I've tested doing the usual of having the "a" tag nested inside the li, and not the other way around - works fine, as I, for some reason expected. But since, according to the specs, I can have the "li" wrapped in an "a" tag, then why does it not work. Am I missing something?
Oh, and I'm using Chrome - possibly relevant.
putting li inside a is invalid. If you try validating your html then it won't be validated as it doesn't follow the right markup.
Anchor tags() are stand-alone tags whereas li's are list tags and they are immediate child elements of ul or ol. Hope this helps. :)
Refer w3schools.com for more info.
Put a tag inside li
check this:
http://tinkerbin.com/5kMLVVKk