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.
Related
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>
I'm trying to make a dropdown menu bar and if I hover on an Item tooltip will show some text.
I am getting result A and I was hoping for a result like B where the tooltip is NOT half covered up by the dropdown menu.
I am assuming that since I have my span element is inside the anchor element,it is not possible for it to pop out of the dropdown menu or maybe
it's due to the overflow attribute but I'm not really sure how to fix or alter my code in order to achieve B, also I would not want to increase the width of the dropdown menu to achieve this,that is to say I don't want the tooltip text is restricted by the dropdown menu.
Is there a direction I can head to achieve what I am asking??
code is below :
HTML
<ul id='menu'>
<li>choose
<ul>
<li><a class="tooltip" href="">a<span class="tooltiptext">this is a</span></a></li>
<li><a class="tooltip" href="">b<span class="tooltiptext">this is b</span></a></li>
<li><a class="tooltip" href="">c<span class="tooltiptext">this is c</span></a></li>
<li><a class="tooltip" href="">d<span class="tooltiptext">this is d</span></a></li>
</ul>
</li>
CSS
#menu > li {
display:inline-block;
border:1px solid grey;
position:relative;
}
#menu li ul {
position:absolute;
border:1px solid grey;
list-style-type: none;
max-height:0;
overflow:hidden;
}
#menu li:hover ul {
overflow-y:scroll;
overflow-x:hidden;
max-height:150px;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
Best results will be observed if you use Javascript. I've written up a brief example in CodeSandbox (https://codesandbox.io/s/nn96zl4jl).
Set the containing <ul> element to position: absolute, have tooltip <div> elements outside of this element and initially display: none, write element ids that can be connected by a pattern (e.g. element id 'number1', tooltip id 'number1tooltip', 2...3...4 etc.), connect event listeners that can get the hovered target ('mouseenter', 'mouseleave') events, find the tooltip from the hovered target (concatenate 'tooltip' with id), set display: inline and use the getBoundingClientRect() to find out how to position it absolutely (see CodeSandbox methods).
GL.
just make a small change in CSS
#menu li:hover ul{
overflow: visible;
max-height:150px;
}
Your problem was caused because of overflow value as you see above. Here is my jsfiddle. Here are little docs about overflow value w3school, MDN.
I'm trying to add a drop-down menu for one of the options in my nav menu for a simple html page. However, when I hover over the nav menu option, the menu doesn't actually drop down. It just replaces the nav menu option with the first option in the drop-down whenever I hover over it. I'm not exactly sure why it isn't "dropping down".
Any help would be really appreciated... Here's the HTML for the nav and attempted drop-down.
<nav>
<ul>
<li>Eiffel Tower</li>
<li>Fashion</li>
<li>Food</li>
<li>Museums</li>
<div class="dropDiv">
<li class="dropdown">History</li>
<div class="dropdownContent">
<a href=leaders.shtml>Leaders of Paris</a>
<a href=future.shtml>Future of Paris</a>
</div>
</div>
<li>Language</li>
<li>Works Cited</li>
</ul>
</nav>
and here is the CSS snippet for the Dropdown menu:
.dropdown {
float: left;
background-color: #FFF0F5;
width: 100%;
}
.dropDiv {
position: relative;
display: inline-block;
width: 100%;
}
.dropdownContent {
display: none;
position: absolute;
background-color: #FFF0F5;
height: 200px;
width: 100%;
z-index: 1;
}
.dropdownContent a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdownContent a:hover {background-color: #fff8dc;}
.dropDiv:hover .dropdownContent {
display: block;
z-index: 1;
height: 200px;
}
.dropDiv:hover .dropdown {
background-color: #fff8dc;
}
I'm not really sure why the drop-down part isn't displaying, i'm sure it's some stupid mistake but it's eluded me for an hour and a half...
I see you have mentioned position: absolute in dropdownContent class. This is causing to overlap. Just remove it and try. By default it sets to static, which mean Elements render in order, as they appear in the document flow. Where as absolute means element is positioned relative to its first positioned ancestor element.
The problem is in your HTML.
For the dropdown within an item of the 1st level you'll need a code block that looks like your 1st level. That is, another <ul> with a group of <li>s one for each 2nd level option.
You have a lot of unwanted css and markup. Just fix it. I have created a basic one for you. May be you can try,
.dropdownContent {
display: none;
background-color: #FFF0F5;
}
.dropdownContent a:hover {
background-color: #fff8dc;
}
.dropdownContent a{
display: block;
}
.dropdown:hover .dropdownContent {
display: block;
z-index: 1;
}
<nav>
<ul>
<li>Eiffel Tower</li>
<li>Fashion</li>
<li>Food</li>
<li>Museums</li>
<li class="dropdown">
History
<div class="dropdownContent">
<a href=leaders.shtml>Leaders of Paris</a>
<a href=future.shtml>Future of Paris</a>
</div>
</li>
<li>Language</li>
<li>Works Cited</li>
</ul>
</nav>
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.