How can I lose parent's hover state if child is in focus (has been clicked on)? I have a menu arrow (replaced it with OPEN to reduce code) which opens my menu on hover and menu items that focus when I click on them.
After a menu item click I want to be able to lose focus on my parent so the menu could disappear.
I try to avoid any javascript if that's possible and this is my best try...
.submenu:not(.submenu ul li a:focus):hover {
display: block;
}
This is my html
.open-submenu:hover .submenu {
display: block;
}
.submenu {
display: none;
}
.submenu ul li a:focus {
background-color: yellow;
}
.submenu:not(.submenu ul li a:focus):hover {
display: block;
}
<html>
<head>
</head>
<body>
<div class="open-submenu">OPEN
<div class="submenu">
<ul>
<li>Home</li>
<li>About</li>
<li>Help</li>
</ul>
</div>
</div>
</body>
</html>
Edit
I'm using AngularJS framework on a single page app and clicking on the anchors doesn't reload the page in my case like standard html does.
.submenu:hover ul li:active,
.submenu:hover ul li:active ~ li {
display: none;
}
You can try with this but not sure if you can provide any links in href since it is using display none.
If it doesn't work then you may need to use jQuery/javascript to achieve the expected behavior.
The solution wold be :not(:focus-within), IF the click event would precede the click event of the anchors. The click event is thus never dispatched and you menu is not working. I'm afraid, you cannot go without JS in that case.
.open-submenu:hover .submenu:not(:focus-within) {
display: block;
}
.submenu {
display: none;
}
.submenu ul li a:focus {
background-color: yellow;
}
<html>
<head>
</head>
<body>
<div class="open-submenu">OPEN
<div class="submenu">
<ul>
<li>Home</li>
<li>About</li>
<li>Help</li>
</ul>
</div>
</div>
</body>
</html>
Related
I want to perform an action that when I hover on the image, the drop-down menu will be shown.
The below code works fine.
HTML, CSS:
.menu {
position: relative;
display: inline-block;
}
.menu .dropdown-menu {
position: absolute;
top: 100%;
left: 0;
margin: 0;
display: none;
}
.menu:hover .dropdown-menu {
display: block;
}
<div class="menu">
<img src="http://sharpinsurance.ca/images/menu-collapse.png" id="menu-icon" alt="menu-icon" />
<ul class="dropdown-menu">
<li>Account
</li>
</ul>
</div>
My question is why I can't use #menu-icon:hover to perform the action?
#menu-icon:hover .dropdown-menu {
display:block;
}
Based on this structure:
<div class="menu">
<img src="icon.jpg" id="menu-icon" alt="menu-icon"></img>
<ul class="dropdown-menu">
<li>Account</li>
</ul>
</div>
The selector / combinator you are using is incorrect and should be:
#menu-icon:hover + .dropdown-menu {
display:block;
}
The space between .menu-icon and .dropdown-menu you are using assumes that the menu is a child of the image which it isn't.
The menu is the next sibling and is selected with the + combinator.
The 30 CSS Selectors You Must Memorize
Just like to add that using hover as the only way to show a menu is not very user-friendly. If you are not using a mouse it's not possible to interact with the menu. Also even if you are using a mouse it can be hard to interact since the menu will close as soon as the mouse is not actually hovering.
I would suggest trying something else or maybe add some JavaScript to improve the accessibility.
Why does my CSS dropdown menu work on Android and all PC browsers, but not iOS devices?
.mainHeaderBtns ul li:hover > ul {
display:block;
}
As of my tests, for a dropdown menus, make sure the <a href="#"> element is visible and clickable on the page, I have made a simple demo and it works fine.
.nav > li > ul {
display: none;
}
.nav > li:hover > ul {
display: block;
}
<ul class="nav">
<li>
Menu item
<ul>
<li>Sub item</li>
</ul>
</li>
</ul>
For any element, Apple 1 recommends to add onclick = "void(0)" I also found onclick="return false;"or onclick="" all works.
div span {
display: none;
}
div:hover span {
display: inline;
}
<div onclick="void(0)">Howdy <span>mates!</span></div>
1https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
I was able to get this to work quite well using standards-compliant code, without Javascript hacks.
The key pieces of CSS:
/* hide submenu by default */
.nav .submenu {
display: none;
}
/* show submenu on :hover and :focus-within */
.nav li:hover .submenu, .nav li:focus-within .submenu {
display: block;
}
To get the :hover to work correctly on iPad, you need to add a tabindex to your top-level menu items:
<ul class="nav">
<li tabindex="0">
Menu Item
<ul class="submenu">
<li>...</li>
</ul>
</li>
</ul>
And then to be able to close the menu, you need to add a tabindex to the <body> tag also:
<body tabindex="0">
The good thing about this approach is that it also allows keyboard navigation, which is good for accessibility.
Why does my CSS dropdown menu work on Android and all PC browsers, but not iOS devices?
.mainHeaderBtns ul li:hover > ul {
display:block;
}
As of my tests, for a dropdown menus, make sure the <a href="#"> element is visible and clickable on the page, I have made a simple demo and it works fine.
.nav > li > ul {
display: none;
}
.nav > li:hover > ul {
display: block;
}
<ul class="nav">
<li>
Menu item
<ul>
<li>Sub item</li>
</ul>
</li>
</ul>
For any element, Apple 1 recommends to add onclick = "void(0)" I also found onclick="return false;"or onclick="" all works.
div span {
display: none;
}
div:hover span {
display: inline;
}
<div onclick="void(0)">Howdy <span>mates!</span></div>
1https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
I was able to get this to work quite well using standards-compliant code, without Javascript hacks.
The key pieces of CSS:
/* hide submenu by default */
.nav .submenu {
display: none;
}
/* show submenu on :hover and :focus-within */
.nav li:hover .submenu, .nav li:focus-within .submenu {
display: block;
}
To get the :hover to work correctly on iPad, you need to add a tabindex to your top-level menu items:
<ul class="nav">
<li tabindex="0">
Menu Item
<ul class="submenu">
<li>...</li>
</ul>
</li>
</ul>
And then to be able to close the menu, you need to add a tabindex to the <body> tag also:
<body tabindex="0">
The good thing about this approach is that it also allows keyboard navigation, which is good for accessibility.
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 have a vertical navigation menu and I want to show different levels of the menu upon hovering of certain elements. The problem is that the method I used is not working and I do not understand why. When I hover over "Product", I expect to see a sub-menu expand, but nothing happens. Why?
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Product</li>
<ul>
<li>Blueberries</li>
<li>Rasberries</li>
<li>Strawberries</li>
</ul>
<li>Contact</li>
</ul>
</nav>
CSS:
nav {
border:1px solid red;
}
nav ul ul {
display:none;
}
nav ul li:hover > ul {
display:block;
}
Your code:
nav ul li:hover > ul {
display:block;
}
Means "Make any ul within a hovered li display:block". Your submenu is not within the LI, it's after it. Here's a working version of what you were trying to do.
Working HTML:
<li>Product
<ul>
<li>Blueberries</li>
<li>Rasberries</li>
<li>Strawberries</li>
</ul>
</li>
Working CSS:
nav ul li ul {
display:none;
}
nav ul li:hover ul {
display:block;
}
Also
nav ul ul {
display:none;
}
should be
nav ul li ul {
display:none;
}
Try this for your html:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Product
<ul>
<li>Blueberries</li>
<li>Rasberries</li>
<li>Strawberries</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
You have two ways of changing this; you can either update the HTML or you can update the CSS.
There are pros and cons to changing code and in a vacuum I can't recommend one approach over the other.
Without changing your HTML you can make the CSS work like this:
nav ul li:hover + ul {
display: block;
}
Note that rather than using the descendant selector this uses the adjacent selector and applies the style to the element that immediately follows the hovered LI.
Alternatively, the HTML change mentioned above does work equally well.
This link http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ provides a fantastic resource.