I'm trying to create a custom drop-down menu with html and css only.
I'm wondering if is possible to work with focus instead of hover? now is on hover and works but I want to expand that select onclick.
Here I have a fiddle example: http://jsfiddle.net/RwtHn/1084/
Don't use hover on the li, use hover on the a:
a:hover + ul, a:focus + ul, a:active + ul {}
DEMO
EDIT: Here's a demo: http://jsfiddle.net/RwtHn/1087/
Wow. I'm surprised this is even possible with just HTML/CSS.
Related
Sometimes (not always) when I click a menu element on my webpage's header an annoying selection box appears (see the picture). Can I hide it somehow? Why is it there at all?
https://i.imgur.com/HRrTpyV.png
Use outline:none to anchor tag class
you can try doing --
a:visited, a:hover, a:focus {outline: none}
I'm learning CSS and busy with an example that I cannot figure out.
I want to have the background of my element 'active' in the color green.
The element is a link in a navigation menu.
This is the HTML content of the element
And here is the CSS
Could you please let me know, what i did wrong so i can learn from it?
Thanks a lot!
The problem is that you are setting background of li element but the a tag is over it. so use this instead:
li.active a{
background-color:#00CC33;
color:blue;
border-color:#00CC33;
}
If you are using a class like you are you need to use .active instead of #active. Using # indicates an id not a class.
I'm trying to make a default hover effect for all my inline menus but the hover effect are not covering the entirely "li a" element.
I've put the code below to ilustrate the problem.
http://jsfiddle.net/yWqK4/
You are modifying the <a> tag to a block disaply and doing all other kind of unnecessary things.
The only thing you need to do, is to change the background color of your element.
Replace your CSS that is used for the hover effect with:
.Menu li a:hover {
background-color: rgba(0,0,0,0.3);
}
and it is working as expected. See http://jsfiddle.net/muNFY/
you don't need use :before to get desirable result. Fixed tour styles here http://jsfiddle.net/yWqK4/2/
Referencing this fiddle
I want to color the background of the LI being hovered over. However it seems to set the class on the entire set of LI elements (not just the hovered one).
Can someone see what the issue is here?
just do this:
.parentSelectorBox li:hover
{
background-color:red;
}
you don't need js to achieve hover effect. CSS will be fine.
This is because you anchor your JS to the whole list.
See that.
I don't remove all JQuery stuff, but only what set to hover your li class.
I suggest to remove JS that know is useless
JS Fiddle Link
The code does not work too well on fiddle but works fine everywhere else, so ignore the drop down being out of position.
My question is: How would I select the links with css in the div with the class "dropdownCats" to style them?
You can use the id of the containing ul followed by the usual class selector:
#navTest .dropdownCats a { }
You need the id selector to make it more specific than the next most specific selector:
#navTest li a { }
Here's an updated fiddle (hover over "Categories" and the appearing links are now red).