any idea what am I missing at the link: ** http://jsfiddle.net/AnUZ7/2/ **
I'm trying to make a dropdown like at Zerply
Setting
<ul>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
css here:
ul {
position: absolute;
background: orange;
width: 10em;
left: -999em;
}
a.setting:hover ul {
left: auto;
}
Thanks!
Try replacing a.setting:hover ul {...} to
a.setting:hover + ul,
ul.submenu:hover {...}
Edited fiddle:
http://jsfiddle.net/AnUZ7/4/
The .first + .second selector selects the next element after .first.
The .first ~ .after-first selector select all elements after .first.
These selectors are not working on Internet Explorer 6, but hopefully that is not a big problem in 2011.
Beware the (possible) margin/padding/other gaps between the a and its ul in your actual design! If the mouse pointer falls between them, the menu will disappear.
Related
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;
}
I currently need to do this in CSS:
This is a vertical menu so the yellow "div" count is not fixed, could be 5 like it could be 7.
For now, I have a div with this CSS applied:
#main-menu {
width: 250px;
height: 100%;
padding-top: 50px;
}
That contains the yellow div (nothing special). Then I added a "before" pseudo-element like this:
#main-menu::before {
height:624px;
width:250px;
background-image: url("../img/SSC_fondgris_96_Background.png");
content: " ";
position:absolute;
top:0;
}
The image used is just the curve with a transparent background on the left and the grey on the right. This results in the the image above. The issue is that I'd like to have an hover effect on the yellow div's but I can't get that because the "before" element is on top of them (which is wanted in order to allow the curve to hide the overflow of yellow items) and therefore, the "hover" effect is not applied for the yellow divs.
I guess that it's because the hover is done on the "before" pseudo element and that's exacly my issue. So the question is: is it possible to have an image hidding the overflow of child elements but allowing these children to have a hover effect? Bascailly, a z-index for hover effect:-D
The goal here would also be to avoid using JavaScript to do such things...
Use pointer-events:none on the pseudo-element
From MDN
The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content.
ul {
list-style: none;
width: 50%;
position: relative;
}
ul::before {
content: '';
position: absolute;
width: 25%;
height: 100%;
top: 0;
right: 0;
background: rgba(255, 0, 0, 0.5);
pointer-events: none;
}
li {
padding: 25px 0;
background: #000;
margin-bottom: 1em;
}
li:hover {
background: orange;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
You should be able to "click through" the pseudo element by negating the pointer events on the element:
#main-menu::before {
height:624px;
width:250px;
background-image: url("../img/SSC_fondgris_96_Background.png");
content: " ";
position:absolute;
top:0;
/* Add the below */
pointer-events: none;
}
... let me know how that works for you.
I need to add that browser support is a little dodge though - only IE11 ... caniuse - pointer-events
You can achieve the effect you want by introducing a third, transparent element which you position over the top of the transparent/grey image.
If your third, transparent element is exactly congruent with the yellow div (two layers below), then you can apply :hover effects to the uppermost, transparent element and it will look like the bottom-most element is responding to the hover.
first of all sorry for my english I'm going to try to be as precise as possible, here is my problem:
In my css I created a div displayed with none, and when I hover on a link in the nav I changed the display with display block it is a simple sub-nav pattern. But here is my problem, once i'm hovering my link when I leave it my sub menu disappears automatically, so how do I keep my sub menu in display block even if i'm not hovering the trigger anymore and all of that in pure css (it is an exercice for me):
here is my repo on github : https://github.com/MehdiAlouafi/Int-gration-Briefing-2
I think you made a couple of mistakes.
/* First of all it's better to have your list-item relative. */
nav ul > li {
position:relative;
}
/* Then your .on-hover can have simpler top and left coordinates. */
.on-hover {
height: 150px;
background-color: rgb(243,243,241);
width: 165px;
position: absolute;
left: 0;
top: 0;
display: none;
border-bottom: 1px solid rgba(96, 96, 96, 0.2);
z-index: -1;
}
/* You want the hovering to be over the entire li.*/
nav ul > li:hover .on-hover {
display: block;
}
You had the hover work like this. Which means it stops hovering when you leave the #test being the anchor(<a>) element
#test:hover + .on-hover {
Working jsfiddle: https://jsfiddle.net/3su9jppc/1/
I'm trying to create a drop-down menu. I had it working for a minute.
My code is as follows:
<nav id="nav">
<ul>
<li class="subNav">Some Page1
<ul>
<li>Related Page1<li>
<li>Related Page2<li>
</ul>
<li>
</ul>
</nav>
My CSS is as follows:
#nav li.subNav ul{
display: none;
}
#nav li.subNav:hover ul{
display: block;
}
I have three CSS files that relate to this page. One is basically a web-kit for font, and the other two are bowlerplate.css and my custom file customFile.css. The tag <#nav li.subNav:hover ul> show up in customFile.css, and <#nav li.subNav ul> diplays in bout custom and boilerplate when I check computed styles.
There are two things I wish to fix; the submenu lines up horizontally (I need it to go vertical) and the submenu isn't hidden. I had to nest /li tag around the ul, so that took care of one problem (they're now aligned under the parent tag).
I also noticed that the height and width have changed on my parent li. I understand it expanding to accommodate the list items, but the increased height seems a little odd.
Here's my solution to the above problem
#nav li.subNav:hover ul li {
visibility: visible;
width: 171px;
padding: 0;
cursor: pointer;
float: none !important;
display: block !important;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have this menu:
home
Pictures
Picture 1
Picture 2
Sounds
Videos
I want Picture 1 and Picture 2 to be hidden except when I move the mouse over "Pictures"
You would have to use javascript here, CSS itself doesn't have any logic.
Set display property of picture 1 and picture 2 to none, then set it to block with javascript when mouse is over Picture.
With PrototypeJS you'd do something like
$("pictures").observe("mouseover", function(){ $("Picture 1").setStyle({display: "block"}) } )
$("pictures").observe("mouseout", function(){ $("Picture 1").setStyle({display: "none"}) } )
Because there's a distinct lack of information in your question, and despite my own comment to that question, I'm going to make a guess at your HTML and assume you're using a ul element to contain your list:
<ul>
<li>home</li>
<li>Pictures
<ul>
<li>Picture 1</li>
<li>Picture 2</li>
</ul></li>
<li>Sounds</li>
<li>Videos</li>
</ul>
If that's the case, then I'd suggest the following CSS:
ul ul {
display: none;
}
ul li:hover ul {
display: block;
}
JS Fiddle demo.
Given that I suspect you're trying to make some kind of menu structure (again, a wild guess based on the lack of information), I'm updating the above CSS to demonstrate a fly-out style CSS menu:
ul {
/* adjust to taste */
width: 6em;
}
ul ul {
display: none;
/* to more easily show the connection between the parent li and child ul
adjust to taste, of course */
background-color: inherit;
}
li {
/* to position the child ul element relative to its parent */
position: relative;
}
li:hover {
/* just to identify which li element is currently hovered */
background-color: #ffa;
}
li li:hover,
li:hover li:hover {
/* so the hovered li is differentiated from its parent ul's background
and the background of its grandparent li. Adjust to taste */
background-color: #dda;
}
ul li:hover ul {
/* so that it's visible on the page */
display: block;
position: absolute;
/* to be level with its parents top-edge */
top: 0;
/* so that the li appears on the right of the parent li */
left: 100%;
}
JS Fiddle demo.