if I set visibility:hidden on a nested li element, how do I set it back on hover?
eg.
#menu li ul li {
visibility: hidden;
}
I tried:
#menu li ul li:hover {
visibility: visible;
}
But it doesn't work - so clearly I haven't got the syntax right!
cheers
visibility: hidden hides the element and leaves no hoverable surface, so there will never be a hover event triggered.
Try opacity: 0 (or even opacity: 0.00001, not sure right now whether the surface remains with 0) to get the desired effect. Note that IE < 8 needs special treatment (filter: alpha(opacity=0))
Other browsers need other opacity settings as well, check out #Nick Craver's link for a full list.
Why not add a child wrapper in each <li> like this (could be a p or a div):
<li><p>dadada</p></li>
Then, for styling:
#menu ul li p {
visibility: hidden;
}
#menu ul li:hover p {
visibility: visible;
}
Related
I'm not sure why, but my dropdown menus refuse to stay on the screen when hovering over them. They work fine when I make them clickable with :focus in the CSS with this:
.dropdown > .link:focus + .dropdown-menu
But, I want them to work on hover. But when I set it to the following, the dropdown disappears as soon as you take the mouse off the menu header:
.dropdown > .link:hover + .dropdown-menu
Here is the code on JSFiddle ---> https://jsfiddle.net/L8u96pbr/
What can I change to make it work?
Your dropdown disappears because as you move your cursor from the class link to the next sibling with class dropdown-menu, it un-hovers the link, causing the dropdown to disappear. To fix this, you can add padding to link, and if you would like it to take up the same amount of space you can add a negative margin of equal value to the padding (e.g. add .link { padding: 10px; margin: -10px; }).
Moreover, your selector .dropdown > .link:hover + .dropdown-menu only affects the class dropdown-menu when class link is hovered. You want this same effect to persist as class dropdown-menu is hovered, so add .dropdown-menu:hover as well.
.dropdown > .link:hover + .dropdown-menu,
.dropdown-menu:hover {
opacity: 1;
transform: translateY(0px);
pointer-events: auto;
}
The dropdown disappears because your CSS tells it to show only when you hover on .link which is your about/product link
Instead of this:
.dropdown > .link:hover + .dropdown-menu {
opacity: 1;
transform: translateY(0px);
pointer-events: auto;
}
Do this:
.dropdown:hover .dropdown-menu {
opacity: 1;
transform: translateY(0px);
pointer-events: auto;
}
Thank you would fix it
I used a tutorial to build a responsive navigation menu which was working great here:
http://nova.umuc.edu/~ct386b09/giotto/index.html
I added a logo and some other elements and have lost the hover when the media size changes as seen here:
http://nova.umuc.edu/~ct386b09/giotto2/index.html
I have have a feeling it's somewhere here but cant tell what it might be:
HTML:
<ul class="nav hidden">
CSS:
ul.nav
{ list-style-type:none;
margin:0;
padding:0;
position: absolute;}
ul.nav li a:hover + .hidden, .hidden:hover {
display: block;
z-index: 999;}`
I can post the entire HTML/CSS if needed.
The problem is that your #header and #navbar have hardcoded height values and the .nav elements, while the #menu is float:left due to the nav class it has.
You need to set height:auto for the #header and #navbar in the mobile version and also either add overflow:hidden on the #navbar or remove the float:left from the .nav.
So the actual problem was that the .full-width element was overlaid on the open menu and it was intercepting the mouse events.
There is this rule in line 81 of your CSS for width below 759px :
ul.nav {
position: static;
display: none;
}
And there is no hover rule which changes that diplay: none. So you should add this rule directly under the one above:
#navbar:hover ul.nav {
display: block;
}
Is it possible to show only the last x items in a list using pure CSS?
The following code snippet shows every item, except for the first 2. How do I only show the last two items in a list?
ul li {
display: none !important;
}
ul li:nth-of-type(2) ~ li {
display: inherit !important;
}
https://jsfiddle.net/mechskt2/
use :nth-last-of-type(-n+x) or :nth-of-type(n+x)
Simply use nth-last-of-type.
ul li:nth-last-of-type(2),
ul li:nth-last-of-type(2) ~ li {
display: inherit !important;
}
I want to set list z-index.
when mouse over list show.
and this list show above <p> text
here is simple html and css
<style>
ul li{
display:none;
}
ul:hover li{
display:block;
z-index:-1;
}
</style>
<ul><h3>This is LIST</h3>
<li>back</li>
<li>forword</li>
<li>click</li>
</ul>
<p>list show above this text.</p>
with this CSS when mouse over the this is list then its wrapped.
but I want when mouse over at This is LIST then show there list over the <p> text.
here is jsfiddle
how its possible.
Z-index applies only to elements that have position 'relative', 'fixed' or 'absolute', not 'static' (which is the default).
Sounds like what you want is to "preserve" the place for list items even when they are hidden.
For this purpose, use visibility CSS attribute instead of display:
ul li {
visibility: hidden;
}
ul:hover li {
visibility: visible;
}
Updated fiddle.
See http://jsfiddle.net/PdZrt/
Basically I have applied the yui reset and base and am the trying to seperately style a ul for a menu. The li's pick up the style but the ul doesn't appear too.
Any ideas?
In the fiddle there should:
list-style: none;
padding: 0;
margin: 0;
background-color:Red
There are a couple issues here.
One, that jsfiddle is all on one line and wrapping.
Two, your CSS for the ul reads: .nav-menu ul -- nav-menu IS the ul, thus it should read:
.nav_menu { list-style: none; ... }
The reason the background: red isn't showing up is because the elements inside of the <ul>, the <li>s have float: left set. This removes from from the flow of the <ul> and effectively makes your <ul> have a height of 0. While there is more than one way to solve this problem, the quickest would be to add a overflow: hidden to the <ul>.
Define your .nav-menu li list-style:none; and define your .nav-menu overflow:hidden;
Add this css
.nav-menu{
overflow:hidden;
}
.nav-menu li{
list-style:none;
}
Demo