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.
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 am a newbie to CSS,HTML and trying to understand lists.however something confuses me .As you can see below my HTML i am trying to create a drop down navigation bar.what i don't understand is why would display property won't work on a single li element.
.block1{background-color:#736570;margin:0px;}
ul a {color:white;}
ul li{list-style-type: none; padding:5px;}
.hidden {display:none;}
.home:hover .hidden{display:block;}
.hidden a:hover{background-color: #f1f1f1;}
<body>
<ul class="block1">
<li class="home">Home
<li class="hidden">
contact us
</li>
<li>about<li>
<li>Investor</li>
<li> what we do</li>
</li>
</ul>
</body>
Here is the new css you should use:
.block1{background-color:#736570;margin:0px;}
ul a {color:white;}
ul li{list-style-type: none; padding:5px;}
.hidden{display:none;}
.home:hover + .hidden{display:block;}
li:hover{background-color: #f1f1f1;}
Then your html should look like this:
<body>
<ul class="block1">
<li class="home">Home</li>
<li class="hidden" >
contact us
</li>
<li>about</li>
<li>Investor</li>
<li> what we do</li>
</ul>
</body>
Nothing too wrong with your html, just a mismatch <li>, and the css you want to look at this post: Using only CSS, show div on hover over <a>
Here is the JSFiddle: Example of OP Code
i don't understand is why would display property won't work on a
single li element.
The div with class .home is not the parent of li tag with class hidden. Hence it will never trigger a hover over that. Whenever you trigger a hover over a parent container it trickles down and find its children and does some sort of styling.
In your case, you are trying to use display:none to hide a li and make it display by means of hover.
Consider the snippet below, whenever you hover over the parent container, the li tag is being displayed. (This approach below does not make a drop down menu for you but it is give you some insight how to make that display property change on hover)
.block1 {
background-color: #736570;
margin: 0px;
}
ul a {
color: white;
}
ul li {
list-style-type: none;
padding: 5px;
}
.hidden {
display: none;
}
.block1:hover .hidden {
display: block;
}
.hidden a:hover {
background-color: #f1f1f1;
}
.home
<html>
<body>
<ul class="block1">
<li class="home">Home
<li class="hidden">
contact us
</li>
<li>about
<li>
<li>Investor</li>
<li> what we do</li>
</li>
</ul>
</body>
</html>
I am trying to display the list on button hover, but what happens is, whenever I hover near the button area, text gets displayed.
.header_nav {
width: 800px;
height: 400px;
}
.header_nav ul {
list-style: none;
}
.header_nav ul ul {
display: none;
}
.header_nav ul ul #nav_button:hover>ul {
display: block;
}
.header_nav ul ul li >ul {
display: none;
}
.header_nav ul li:hover >ul {
display: block;
}
<nav class="header_nav">
<ul>
<li>
<input type="button" value="Button 1" name="nav_button" id="nav_button">
<ul>
<li>Locations</li>
<li>
Mumbai
<ul>
<li>Txt 1</li>
<li>Txt 2s</li>
<li>Txt 3</li>
</ul>
</li>
<li>Delhi</li>
<li>Banglore</li>
<li>Nagpur</li>
</ul>
</li>
</ul>
</nav>
JS FIDDLE : https://jsfiddle.net/fhv7drst/
It is because your li element was block element.
I changed it to inline and it started working as per your requirements
HTML:
<li class="parentElement">
<input type="button" value="Button 1" name="nav_button" id="nav_button">
CSS:
li.parentElement{
display: inline;
}
here is the working fiddle
https://jsfiddle.net/m73p8pea/
The reason is that your li element is a block element, which means that it will automatically try to span the entire width available. In your case, this is the 800px provided by the topmost element.
You have two solutions readily available - one is to make the list element an inline-block element (or simply an inline element, though I'd prefer inline-block here, as block is how it started) to prevent it spaning the whole width:
.header_nav ul li {
display: inline-block;
}
You could also trigger the display change on the unordered list when hovering over the button directly, not when hovering over it's parent list item:
.header_nav #nav_button:hover + ul {
display: block;
}
This is likely the better solution, as it doesn't mess with the display types more than you need to, and you more accurately describing what you want to happen - show the list when the button is hovered.
As pointed by #Rahul Arora indeed it is because of li as block element.
But if for some reason you still want to keep it as block element, you can keep it by making it as inline-block. I also recommend removing margin (see your given example by inspect element, it is to the write of ul) and padding which is assigned by browser as default.
Here is the code:
.header_nav
{
width:800px;
height:400px;
}
.header_nav ul
{
list-style:none;
//displaying ul & all its child as inline block until overriden by other rules
display:inline-block;
//removing default margin and padding
margin:0;
padding:0;
}
.header_nav ul ul
{
display:none;
}
.header_nav ul ul #nav_button:hover>ul
{
display:block;
}
.header_nav ul ul li >ul
{
display:none;
}
.header_nav ul li:hover >ul
{
display:block;
}
<nav class="header_nav">
<ul>
<li>
<input type="button" value="Button 1" name="nav_button" id="nav_button">
<ul>
<li>Locations</li>
<li>
Mumbai
<ul>
<li>Txt 1</li>
<li>Txt 2s</li>
<li>Txt 3</li>
</ul>
</li>
<li>Delhi</li>
<li>Banglore</li>
<li>Nagpur</li>
</ul>
</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.
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.