How can I make the entire teal box (class name nav-about) click-able when I hover my mouse over the box while having nested a hrefs? Is this possible?
JSFIDDLE LINK http://jsfiddle.net/K8w4g/1/
HTML
<a href="about.html">
<div class="nav-about">about
<div class="sub-nav-about">
<ul>
<li>1. one </li>
<li>2. two</li>
<li>3. three</li>
</ul>
</div>
</div>
CSS
.nav-about {
float: left;
width: 254px;
height: 150px;
color: blue;
background-color: teal;
}
.sub-nav-about {
width: 150px;
}
.sub-nav-about ul {
list-style:none;
background-color:red;
}
Unfortunately, it is not possible. However, you can achieve this through javascript, using onclick:
<div onclick="window.location.href='about.html'" class="nav-about">about
<div class="sub-nav-about">
<ul>
<li>1. one </li>
<li>2. two</li>
<li>3. three</li>
</ul>
</div>
</div>
And you can still click the links inside the div.
Another solution would be to replace div with span, because it is only valid to wrap an a tag around some elements like span, so your new code would look like this:
<a href="about.html"> <span onclick="window.location.href='about.html'" class="nav-about">about
<div class="sub-nav-about">
<ul>
<li>1. one </li>
<li>2. two</li>
<li>3. three</li>
</ul>
</div>
</div>
</a>
Related
I Want to select last Element of div.container <ul> inside last <li> with css.
The ul of nested will goes n level so please suggest to me if it possible with jquery also.
ul {
list-style: none;
margin: 0;
padding: 0;
}
<div class="container">
<ul>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>Want to select list with css</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
view the image that i want to select with css
You can use some tricks to make it.
If you are looking for last element then you can use of :nth-last-child(n) selector, this matches on every element in the nth child and it doesn't look for type or its parent.
This is achieved as it counts from the last child.
.container ul li:nth-last-child(1)
{
color: red;
font-size:22px;
}
.container li li {
color: green;
font-size:12px;
}
Look at here:
MyFiddel
I have this list in HTML
<div id="sideMenu">
<li class="current_page_parent">
Category 1
<ul class="children">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
<li></li>
<li></li>
</div>
I want to put a background-color to my first link : 'Category 1' without affecting others links
Here's my CSS
.current_page_parent li:not(.children) a {
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
You can use first-of-type combined with a > combinator selector
The :first-of-type CSS pseudo-class represents the first sibling of
its type in the list of children of its parent element.
The > combinator separates two selectors and matches only those
elements matched by the second selector that are direct children of
elements matched by the first.
li.current_page_parent:first-of-type > a{
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
li.current_page_parent:first-of-type > a {
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
<div id="sideMenu">
<li class="current_page_parent">
Category 1
<ul class="children">
<li>Sub
</li>
<li>Sub
</li>
<li>Sub
</li>
<li>Sub
</li>
</ul>
</li>
<li></li>
<li></li>
</div>
You can add class propery to the particular <a> and directly select the particular attribute by their class name
Here's example:
HTML:
<div id="sideMenu">
<li class="current_page_parent">
<a class="notInULChildren" href="#">Category 1</a>
<ul class="children">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
<li></li>
<li></li>
</div>
CSS:
.notInULChildren{
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
FIDDLE
I have a nested list:
li:hover {
background-color: lightgray;
}
ul li ul li:hover {
font-weight: bold;
}
<ul>
<li>fnord
<ul>
<li>baz</li>
<li>foo
<ul>
<li>baz</li>
<li>foo</li>
</ul>
</li>
</ul>
</li>
<li>gnarf
<ul>
<li>baz</li>
<li>foo
<ul>
<li>baz</li>
<li>yolo</li>
</ul>
</li>
</ul>
</li>
</ul>
Problem is, hovering "foo" will also hover "fnord" and all of its li elements. How do I hover only the li my mouse is actually hovering over?
The nesting is variable and can, in theory, be endless.
I have setup a JSFiddle.
A solution for subitems and also for parents is possible without JavaScript, when you will add some inline element, which will trigger hover state.
li>span:hover {
background-color: lightgray;
font-weight: bold;
}
<ul>
<li><span>fnord</span>
<ul>
<li><span>baz</span></li>
<li><span>foo</span>
<ul>
<li><span>baz</span></li>
<li><span>foo</span></li>
</ul>
</li>
</ul>
</li>
</ul>
JSFiddle here.
I believe the closest you can get with just CSS is to remove the hover styling from the children of the hovered elements... which doesn't help the parents.
li:hover {
background-color: lightgray;
}
li:hover {
font-weight: bold;
}
li:hover ul {
background-color: white;
font-weight: normal;
}
<ul>
<li>fnord
<ul>
<li>baz</li>
<li>foo
<ul>
<li>baz</li>
<li>foo</li>
</ul>
</li>
</ul>
</li>
<li>gnarf
<ul>
<li>baz</li>
<li>foo
<ul>
<li>baz</li>
<li>foo</li>
</ul>
</li>
</ul>
</li>
</ul>
JSFiddle
The accepted answer on the duplicate you found is the best way I've seen to do this with JavaScript, using e.stopPropagation: Cascading <li>-hover effect using CSS. You'll want to be more specific than 'all lis' in that selector though:
$('li').mouseover(function(e)
{
e.stopPropagation();
$(this).addClass('currentHover');
});
$('li').mouseout(function()
{
$(this).removeClass('currentHover');
});
.currentHover {
background-color: red;
}
li.currentHover ul {
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="container">
<li>fnord
<ul>
<li>baz</li>
<li>foo
<ul>
<li>baz</li>
<li>foo</li>
</ul>
</li>
</ul>
</li>
<li>gnarf
<ul>
<li>baz</li>
<li>foo
<ul>
<li>baz</li>
<li>foo</li>
</ul>
</li>
</ul>
</li>
</ul>
JSFiddle of the answer from there.
So you just want to directly target an li? Try this:
ul li ul li:hover{
background-color: red;
}
Demo here
Edit
I also added another EXAMPLE of where the menu could indeed keep on expanding.
Use this selector to hover
ul ul li:hover {}
it can style only element with foo
In 2023 it is now possible with plain CSS and no modification to HTML by using :has() and :not() pseudo-selectors for Chromium-based browsers, but unfortunately :has is not fully supported in Firefox as of January 2023 (users need to opt-in via layout.css.has-selector.enabled flag, and there are relevant features not yet implemented). For up-to-date status see https://caniuse.com/css-has
li:not(:has(li:hover)):hover {
background-color: lightgray;
}
<ul>
<li>fnord
<ul>
<li>baz</li>
<li>foo
<ul>
<li>baz</li>
<li>foo</li>
</ul>
</li>
</ul>
</li>
<li>gnarf
<ul>
<li>baz</li>
<li>foo
<ul>
<li>baz</li>
<li>yolo</li>
</ul>
</li>
</ul>
</li>
</ul>
I have a question about my sitemap if you look at the code you see ul and li. But every UL is below the other and i want it to be side by side. Every new UL side by side. How doe i do this? Working with first-child? ( the sitemap is inside my )
Sitemap
<ul>
<li>Opleiding</li>
<ul>
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
<li>Onderwijsprogramma</li>
<ul>
<li>Mededelingen</li>
<li>Uitagenda</li>
<li>Propedeuse</li>
<li>Verdieping 1</li>
<li>Verdieping 2</li>
<li>Afstuderen</li>
</ul>
<li>Organisatie</li>
<ul>
<li>Contact</li>
<li>Blog</li>
<li>Docenten</li>
<li>Onderwijsbureau</li>
<li>Stagebureau</li>
<li>Buitenlandbureau</li>
<li>Examencommissie</li>
<li>Decaan</li>
</ul>
<li>Stages en Projecten</li>
<ul>
<li>Stages</li>
<li>Projecten</li>
</ul>
</ul>
This is my CSS
footer{
width: 100%;
position: absolute;
top: 317%;
left: -10%;
background: lightgrey;
margin:10%;
padding: 2%;
}
Try display inline-block or float left on the ul's you want side by side. I recommend adding classes to make the styling easier
HTML:
<ul>
<li>Opleiding</li>
<ul class="sitemap">
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
<li>Onderwijsprogramma</li>
<ul class="sitemap">
<li>Mededelingen</li>
<li>Uitagenda</li>
<li>Propedeuse</li>
<li>Verdieping 1</li>
<li>Verdieping 2</li>
<li>Afstuderen</li>
</ul>
<li>Organisatie</li>
<ul class="sitemap">
<li>Contact</li>
<li>Blog</li>
<li>Docenten</li>
<li>Onderwijsbureau</li>
<li>Stagebureau</li>
<li>Buitenlandbureau</li>
<li>Examencommissie</li>
<li>Decaan</li>
</ul>
<li>Stages en Projecten</li>
<ul class="sitemap">
<li>Stages</li>
<li>Projecten</li>
</ul>
</ul>
CSS:
footer .sitemap {
display: inline-block;
OR
float: left;
}
Well, for starters your markup is invald. If you want to nest ULs inside of another UL, it needs to be inside of an LI
<ul>
<li>Title
<ul>
<li>Sub-Title</li>
</ul>
</li>
</ul>
From there, you probably just need something like this:
footer > ul > li {
float:left;
width:50%;
}
http://jsfiddle.net/fTCY5/
I am making a list with a heading and subheadings. My main list, Home1, is followed by a subheading. How can I exactly position the subheading content without affecting another list?
<div id="wrapper">
<ul id="testnav">
<li>
Home
<ul id="subnav">
<div style=" float : left; width :70%;" >
<li>Sub Heading</li>
<li>Sub Heading</li>
<li>Sub Heading</li>
</div>
<div STYLE="float : left; width :30%; height:900px;">
Sub Heading Content
</div>
</ul>
</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
<li>Home5</li>
</ul>
</div>
#testnav {
list-style: none;
padding: 0;
marigin: 10px 10px 10px 0;
width: 900px;
}
#subnav {
list-style: none;
padding: 0;
marigin: 10px 10px 10px 0;
width: 300px;
}
I'm having a hard time understanding the question, but looking at your markup I see that you have a DIV as a direct descendant of a UL. Only LI elements can be children of UL.
<ul id="subnav">
<div style=" float : left; width :70%;" > <!-- THIS DIV CANNOT BE HERE -->
<li>Sub Heading</li>
<li>Sub Heading</li>
<li>Sub Heading</li>
</div> <!-- THIS DIV CANNOT BE HERE -->
<div STYLE="float : left; width :30%; height:900px;"> <!-- THIS DIV CANNOT BE HERE -->
Sub Heading Content
</div> <!-- THIS DIV CANNOT BE HERE -->
</ul>
Also, ul > div is not valid HTML.
The first step to solving your problem is making sure your markup is correct as Andy Ford suggested. Secondly, making sure your spelling of the CSS in the code is correct may help.
From what I can decipher from your question, you're trying to make sure that #subnav is absolutely positioned relative to #testnav.
<ul id="testnav">
<li>
Home
<ul id="subnav">
<li>Sub Heading</li>
<li>Sub Heading</li>
<li>Sub Heading</li>
</ul>
</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
<li>Home5</li>
</ul>
#testnav, #subnav { list-style:none; padding:0; }
#subnav {
position: absolute;
width: 300px;
}
I am not sure if that's what you want, but generally the first step to figuring out what's going wrong with CSS is to remove every extraneous addition you can.