I'm trying to fill a custom bullet point whenever the list item is hovered.
I have the custom bullet:
.navUl li ul li::before {
display: inline-block;
content: "";
border-radius: 50%;
height: 1.5rem;
width: 1.5rem;
margin-right: 0.5rem;
border: 2px solid white;
}
I Have an hover effect to change the text color:
.navUl li ul li:hover {
color: red;
}
But I want to also change styling (fill background) of my custom bullet, so I've tried:
.navUl li ul li:hover > .navUl li ul li::before {
background-color: red;
}
How can I achieve this?
Reference to project in question
Try this
CSS
.navUl li ul li:hover {
color: red;
}
.navUl li ul li:hover:before {
background-color: red;
}
SCSS
.navUl li ul li:hover {
color: red;
&:before{
background-color: red;
}
}
Related
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 7 years ago.
Is it possible with pure CSS? That instead of showing a dropdown when I hover over "Test", show it when I click on "Test".
Also keep the yellow link color on "Test" when I have that dropdown open.
My current CSS
nav {
text-transform: uppercase;
text-align: center;
margin-bottom: 20px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
text-align: left;
}
nav a {
display:block;
padding:0 20px;
transition: color .2s;
color: black;
font-size: 16px;
font-weight: 600;
line-height: 40px;
text-decoration: none;
}
nav ul ul li a { color: #FFFF64; }
nav ul ul li a:hover { color: #99A7EE; }
nav a:hover { color: #FFFF64; }
nav ul ul { display: none; position: absolute; }
nav ul li:hover > ul { display: inherit; }
nav ul ul li { background: #000; display: list-item; position: relative; }
nav ul ul li:hover { background: #333; }
http://jsfiddle.net/hn93jyvc/
You can change :hover to :active like this: http://jsfiddle.net/hn93jyvc/1/
nav ul ul li a { color: #FFFF64; }
nav ul ul li a:active { color: #99A7EE; }
nav a:active { color: #FFFF64; }
nav ul ul { display: none; position: absolute; }
nav ul li:active ul { display: inherit; }
nav ul ul li { background: #000; display: list-item; position: relative; }
nav ul ul li:active { background: #333; }
However, this will not keep state and will only work on mouse down, once you release the mouse button, the menu will disappear.
As far as I know here, you would have to use a bit of javascript to attach active to this element until another click, or the desired logic.
You can see how achieve that from this answer: https://stackoverflow.com/a/20343068/5242026
Albeit, that answer uses jQuery, you could just as well make use of Javascript click event: https://developer.mozilla.org/en/docs/Web/Events/click which makes more sense if there are no other usages for jQuery.
Like i said in my comment. This can be done using the checkbox combined with css pseudo ':checked' selector.
HTML
<ul>
<li>Home</li>
<li><label for="dd">Services</label>
<input type="checkbox" id="dd" hidden>
<ul class="dropdown">
<li>clean</li>
<li>fix</li>
<li>paint</li>
</ul>
</li>
<li>contact</li>
</ul>
CSS
ul{
background: blue;
display:block;
list-style-type: none;
text-align:center;
}
ul li{
display: inline-block;
color: white;
font-family: sans-serif;
font-weight: 800;
font-size: 20px;
padding: 10px 15px;;
position:relative;
// keep users from highlighting text if they click it on/off too fast
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul li:hover{
background: #f9a1c6;
color: #000;
}
ul li .dropdown{
display:none;
width: 200px;
padding:0; margin:0;
background: green;
position: absolute;
top: 45px;
left:0;
}
ul li .dropdown li{
width:100%;
display:block;
padding:10px 0px; margin:0px;
}
#dd:checked ~ .dropdown{
display:block;
}
jsfiddle
This is my css:
.nav {
margin: 0px;
padding: 0px;
list-style: none;
display: table;
width:100%;
text-align: center;
position: relative;
}
.nav li {
display: table-cell;
}
.nav li a {
background: #FF0000;
color: #fff;
display: block;
padding: 7px 8px;
text-decoration: none;
}
.nav li a:hover {
background-color:#000;
border:1px solid #fff;
}
.nav ul {
display: none;
position: absolute;
margin-left: 0px;
list-style: none;
padding: 0px;
display: table;
width: 100%;
left: 0;
visibility: hidden;
}
.nav li:hover ul {
visibility: visible;
}
.nav ul li {
display: table-cell;
}
.nav ul a {
display: block;
height: 15px;
padding: 7px 8px;
color: #fff;
text-decoration: none;
border-bottom: 1px solid #222;
}
.nav ul li a:hover {
color: #069;
}
JSfiddle: http://jsfiddle.net/spog4sqg/3/
Here when hover over HOME display text-decoration:underline;, when hover over other remaining list, display like this: http://s7.postimg.org/br5nkl8zf/Untitled_1_copy.png
May i know, what is the exact css property to fix this.
Thanks in advance..
Basically this is what you're looking for:
.navigation > ul li:first-child a:hover {
background-color: red;
text-decoration: underline;
}
See Example
I used :first-child pseudo-class, hope that helps?
.nav li:first-child a:hover {
text-decoration: underline;
}
http://jsfiddle.net/w81swq5j/2/
I guess, that instead of the underline property, you mean that you want the hover state to stay active when you hover the child list.
In order to do so, trigger the hover effect on the list-item instead of the anchor.
Change:
.nav li a:hover {
background-color:#000;
}
To:
.nav li:hover a {
background-color:#000;
}
Updated Fiddle.
[EDIT]
Hope I understand your comment right. By 'underline' you mean that the submenu gets a background-color?
Then change it to:
.nav li:hover ul li a {
background-color:#000;
}
Updated Fiddle 2.
I'm trying to style menu on my website but I'm stuck with coloring and hover effects.
It looks now as below (/user is where cursor was when I took screenshot):
Screenshot
What I need to change is:
when I hover 2nd level item, 1st level becomes "default" (without hover effect)
My CSS for this menu is:
#nav {
text-align: center;
font-size: 1.5em;
font-weight: 700;
letter-spacing: 1px;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display: block;
}
#nav ul {
display: inline-table;
list-style: none outside none;
padding: 0 10px;
position: relative;
}
#nav ul:after {
clear: both;
content: "";
display: block;
}
#nav ul li {
float: left;
background: none repeat scroll 0 0 #F5F5F5;
margin-right: 3px;
}
#nav ul li:hover {
background: none repeat scroll 0 0 #E32D40;
}
#nav ul li a {
color: #757575;
display: block;
padding: 10px;
text-decoration: none;
}
#nav ul li a:hover {
color: #FFFFFF;
}
#nav ul ul {
border-radius: 0 0 0 0;
padding: 0;
position: absolute;
top: 100%;
}
#nav ul ul li {
margin-top: 3px;
float: none;
position: relative;
color: #757575;
}
#nav ul ul li a {
color: #757575;
display: block;
padding: 10px;
text-decoration: none;
}
#nav ul ul li a:hover {
}
#nav ul ul ul {
left: 100%;
position: absolute;
top: 0;
}
I'm not sure, if it is possible with only css. As you are displaying the 2nd level with #nav ul li:hover > ul and you are highlighting the 1st with #nav ul li:hover, which are both firing on 2nd level li hover (and there is no parent call in css).
It is quite easy though with jQuery:
$('#nav > ul > li > ul > li').hover(function () {
$(this).parents('li').first().css('background', 'none');
});
Check here: http://jsfiddle.net/balintbako/EruTP/
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
Here where my css menu is: My css menu
Notice if you hover over "about us" like below you see the "our clergy" sub menu already out. I don't want that I want it when you hover over "our clergy" for it to show.
This screenshot above is from firefox, while webkit browsers show a 1-2px difference as seen below and I can't figure out why? It sometimes effects how the menu works too.
Here is my css for the menu (I'm using wordpress so that means there is no html):
Feel free to help me out and if you want to clean up the css you can too!
#navbar {
height: 40px;
padding-left: 10px;
margin-left:-10px;
margin-top: -29px;
margin-bottom:0;
background: #F4DE9F;
width:930px;
/*backgroundborder-top: 2px solid #F4DE9F;
border-bottom: 2px solid #F4DE9F;*/
}
#navbar li {
float: left;
list-style: none;
margin-bottom: 30px;
margin-left:-20px;
}
#navbar li a {
font-family: "MuseoSans_500";
color: #3C290B;
font-weight: 500;
text-transform: uppercase;
}
#navbar li:hover {
background:rgba(255, 241, 194, 100); /*#FFF1C2;*/
color: #645548;
text-decoration: none;
}
#navbar li a:hover {
background:rgba(255, 241, 194, 100); /*#FFF1C2;*/
color: #645548;
text-decoration: none;
}
#navbar .parent > a, #navbar .parent > a:hover {
background: #F4DE9F;
background-position: right;
background-repeat: no-repeat;
}
#navbar ul, #navbar ul li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
#navbar ul li a {
display: inline-block;
padding: 11px 16.2px 8px;
text-decoration: none;
}
/*
#navbar ul li a:hover {
}
#navbar ul #first a:hover {
}*/
#navbar ul li {
position: relative;
}
#navbar li ul {
display: none;
left: 11px;
position: absolute;
top: 51px;
}
#navbar li ul a {
background: #F4DE9F;
}
#navbar ul ul ul li {
}
#navbar ul li:hover ul {
display: inline-block;
}
#navbar ul li:hover ul, #navbar ul ul li:hover ul, #navbar ul ul ul li:hover ul {
display: block;
margin: -11px 0 0 -11px;
}
/*#navbar ul li:hover ul li a, #navbar ul ul li:hover ul li a, #navbar ul ul ul li:hover ul li a {
display: block;
}*/
#navbar ul li:hover ul ul, #navbar ul ul li:hover ul ul {
margin-top: -50px;
margin-left:129px;
}
#navbar ul li:hover ul li a {
padding: 10px 14px 8px;
width: 112px;
}
#navbar ul li:hover ul ul li a {
padding: 10px 14px 8px;
width: 112px;
}
/*#navbar ul ul ul li:hover ul li a {
padding: 0 16px 0 24px;
width: 140px;
}*/
#navbar .children li a:hover {
color: #000;
}
When you end up with a stylesheet that feels very bloated with several rules and a lot of specificity, such as #navbar ul ul ul li:hover ul it is usually good to take a step back see if you can simplify the rules a bit.
Since you are using Wordpress it comes with a lot of handy classes that makes the job easier. In this case .menu-item and .sub-menu.
Replacing the menu-css with the following styles solves the problems you mentioned in your question, tried in Chrome 23, Safari 6 and Firefox 16.
Example here: http://jsfiddle.net/5qEwH/
.menu-item {
display: inline-block;
position: relative;
font-family: "MuseoSans_500";
font-weight: 500;
text-transform: uppercase;
background: #F4DE9F;
}
.menu-item:hover {
background: #FFF1C2;
}
.menu-item a {
display: inline-block;
height: 20px;
padding: 10px;
text-decoration: none;
color: #645548;
}
/* Hide submenus by default */
.sub-menu {
display: none;
position: absolute;
width: 150px;
top: 40px;
}
.sub-menu .menu-item {
width: 100%;
}
/* The second level sub-menu should be moved to the right */
.sub-menu .menu-item > .sub-menu {
top: 0;
left: 150px;
}
/* Show submenus on hover */
.menu-item:hover > .sub-menu {
display: block;
}
Its a great CSS practice to normalize your styles first so that all the browsers get the same styles for some basic HTML elements.
I add this at the start of a Stylesheet
* { margin: 0px; padding: 0px; border: 0px; text-decoration: none }
There is also a comprehensive stylesheet file for normalization that covers all the browsers and even html5 as well. try to add this before your style.css file.
Here is the link: http://necolas.github.com/normalize.css/
For the hover issue, try this css change
Replace
#navbar ul li:hover ul {
display: inline-block;
}
#navbar ul li:hover ul, #navbar ul ul li:hover ul, #navbar ul ul ul li:hover ul {
display: block;
margin: -11px 0 0 -11px;
}
With
#navbar ul li:hover > ul {
display: inline-block;
}
#navbar ul li:hover > ul, #navbar ul ul li:hover > ul, #navbar ul ul ul li:hover > ul {
display: block;
margin: -11px 0 0 -11px;
}
Hope it helps :)
So I'm trying my hands at a css menu and I have a simple bug that I cannot fix and haven't found any help searching for it. The issue is that when I hover over a drop down menu the parent link stays highlighted and the text reverts back to the original color. Hopefully that explains it. Here's the css code, I'm sure it's a matter of adding something or fixing a line of code. You can check out the issue here, everything works fine until you visit a submenu (like in BAR or Info).
#nav, #nav ul {
text-align: center;
text-size:16px;
float: left;
width: 750px;
height: 20px;
list-style: none;
line-height: 1;
background: white;
padding: 0;
border: solid #000;
border-width: 0px;
border-bottom-width: 1px;
margin: 0;
background-image: url('/images/bg.gif');
}
#nav a {
display: block;
width: 75px;
height: 20px;
color: #0000FF;
text-decoration: none;
}
#nav a:hover {
display: block;
width: 75px;
height: 20px;
color: #FFF;
}
#nav li {
float: left;
padding: 0;
width: 75px;
}
#nav li ul { /*sub menu */
position: absolute;
left: -999em;
height: auto;
width: 75px;
border: solid #000;
border-width: 0px;
border-bottom-width: 1px;
border-top-width: 1px;
background-image: url('/images/submenu_bg.png');
}
#nav li li {
width: 75px;
}
#nav li ul a {
width: 75px;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
height: 20px;
background: #0000FF;
}
You're setting the text color on #nav a:hover, but the background color on #nav li:hover. Because your submenus are contained within the li, it still counts as being hovered over even while the cursor is in the submenu. The submenus aren't contained within the link, so they don't stay highlighted and revert to their normal color. If you want the menu item to stop highlighting, move the background property to #nav a:hover instead.
Before:
#nav a:hover {
display: block;
width: 75px;
height: 20px;
color: #FFF;
}
#nav li:hover, #nav li.sfhover {
height: 20px;
background: #0000FF;
}
After:
#nav a:hover, #nav li.sfhover a {
display: block;
width: 75px;
height: 20px;
color: #FFF;
background: #0000FF;
}
Alternatively, if you want the menu to stay highlighted while hovering on the submenu (which looks better, IMO), move color to the li:hover. I know it's a little verbose, but it works. :-)
Before:
#nav a:hover {
display: block;
width: 75px;
height: 20px;
color: #FFF;
}
#nav li:hover, #nav li.sfhover {
height: 20px;
background: #0000FF;
}
After:
#nav a:hover {
display: block;
width: 75px;
height: 20px;
}
#nav li:hover a, #nav li.sfhover a {
color:white;
}
#nav li:hover li a, #nav li.sfhover li a {
color:blue;
}
#nav li:hover li a:hover, #nav li.sfhover li a:hover {
color:white;
}
#nav li:hover, #nav li.sfhover {
color: #FFF;
height: 20px;
background: #0000FF;
}
You can try setting the color of the link on the hover of the li, like so:
#nav li:hover a {
color: #fff;
}
#nav li:hover li a
{
color: #0000FF;
}