I'm currently learning SASS, so if this seems obvious, don't laugh!
I have a unordered list, which on li > a hover the ul background changes.
Changing the a link background is simple enough, but how do I target the ul element? I've tried using &, ~ and < which has been advised on several online tutorials, but I've had no luck. Any and all help would be appreciated, Thank you.
ul {
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0;
list-style: none;
a {
margin: 0;
padding: 0;
display: block;
font-size: 60px;
font-size: 3.75rem;
color: rgb(255,255,255);
font-family: 'Cera PRO Medium';
text-decoration: none;
&:hover & li & ul {
background-color: red;
}
}
}
}
If I understand your question, just add hover property to ul element:
ul {
margin: 0;
padding: 0;
&:hover {
background-color: red;
}
...
https://fiddle.jshell.net/fo214wkd/
This can't be achieved with normal CSS, even with SASS. You'll need to use a jQuery or other JavaScript alternative to achieve this.
In the CSS Level 4 draft there is a :has pseudo selector which could achieve this, however that's only a dream at the moment.
I know this isn't a jQuery question, however a very basic jQuery example would be:
$j("a").on("mouseover", function() {
$j(this).parent("ul").addClass("hovering");
}), (function() {
$j(this).parent("ul").removeClass("hovering");
});
Related
I copied this code as an example of a nested ul and li inside a nav, but my vs code is showing me there is an error, can anyone point it out to me?
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
It is not valid CSS syntax, since CSS does not support nesting blocks like that. Your code is written in a CSS preprocessor syntax like SASS or LESS.
It is equivalent to this vanilla CSS code:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Your editor is probably complaining because you included this inside a file with the .css extension. It needs to be saved as .scss or .less depending on flavor and then you need a compiler to turn it into vanilla CSS.
I am having some problems with my CSS external style sheet. I am trying to make a unordered list into navigation bar. I am attempting to do this by adding multiple styles to my navbar div but none of the changes are having any effect on the page when they are inside the navbar div.
#navbar{
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
}
Thanks in advance
You can't nest them like that, try this:
The space between tags/identifiers means the right option is inside the left.
#navbar ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#navbar ul li {
display: inline;
}
The syntax you're currently using is only valid if you're using the Sass/SCSS preprocessor. While Sass is super-awesome, you'd probably be better off using vanilla CSS for now to build a solid CSS foundation. But whenever you want to get some exposure to Sass, check out their docs here: http://sass-lang.com/guide.
In the meantime, this should work for you:
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#navbar li {
display: inline;
}
Ah ha, I've discovered the problem. Html code further down was overlapping my menu. Z-index and few tweaks solved it. See changes below. No doubt a css wizard can make further improvements, but this has put me on the road.
Many thanks to all for input.
As intended, drop down selections appears on the right of my vertical menu upon mouse hover. But they disappear as soon as I move the mouse to the right to select. Can some kind soul point out what changes I need to make in the code below to have a fully functional vertical drop down menu?
Many thanks,
LRP
My css code:
div.tools {
padding: 0 0 0 0;
}
div.tools ul {
margin: 0;
padding: 0;
width: 9em;
background: #00ab6f;
color: white;
border-radius: .3em;
}
.tools li {
position: relative;
list-style: none;
margin: 0;
}
.tools ul ul {
position: absolute;
top: 0;
left: 9em;
display: none;
}
.tools ul li a {
display: block;
text-decoration: none;
color: white;
padding: .6em;
border-radius: .3em;
}
.tools ul li:hover ul {
display: block;
z-index: 3;
}
.tools ul li ul li:hover {
display: block;
z-index: 3;
}
Note that I've found solution. See edits above.
Thanks to all.
LRP
This question already has answers here:
Nested CSS styles?
(4 answers)
Closed 8 years ago.
So I was on Sass webpage learning a bit of its Syntax and saw a strange CSS Syntax that I don't know if it's posible.
Before asking I've already searched on W3School and other sites if that's posible.
Here is the code I found strange:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
My question is if this Syntax is posible, I tried it and it doesn't work.
I also thought it can be a different language and searched but found nothing.
The normal Syntax I would do to make the code above work would be like this:
nav > ul {
margin: 0;
padding: 0;
list-style: none;
}
nav > ul > li {
display: inline-block;
}
nav > a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
SASS is a CSS preprocessor.
What is a preprocessor?
A preprocessor is a program that takes one type of data and converts it to another type of data.
It means that the code you've seen in SASS webpage isn't CSS syntax, it's SASS syntax, that is transformed in the latter after its preprocessor translates it.
The code you provided above would be transformed in something like this:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
TL;DR
Before that style is added to a webpage, it's transformed into CSS. There's no stylesheet.sass references in an HTML page.
I have built a navigation list for a client and they opted to use the [Oswald]() font-face.
Now when the user scrolls over the link a navigation arrow will pop up to the side indicating which link is currently click, it is NOT supposed to turn orange upon hovering. I have removed any javascript and the fontface entirely and still can not remove the problem.
Here is a screenshot of the issue http://cl.ly/043a0q0o0Q392q2m1k20
My CSS (SASS) is as follows:
#leftnav {
width: 205px;
float: left;
ul {
li {
border: 1px solid #fff;
border-top: 0px;
background: #cc5816;
padding: 3px 10px;
#include gradient($top_color: #d86c07, $bottom_color: #bb5e06);
a {
position: relative;
font-family: $main_bold_font;
font-size: 16pt;
color: #fff;
text-decoration: none;
text-shadow: $text_shadow;
}
a:hover { #extend a; }
a:visited { #extend a; }
}
}
}
Any Ideas?
I dont know for sure if this solves the problem. But, as stated here, I would recommend to change the order of :hover and :visited to be :visited and :hover. Maybe it helps to analyse the compiled css.