Im have a problem with submenu which has position:absolute; and top:5em;. The submenu is hidden until you hover over parent (li element). Everything is working but when you hover over parent (li element) the submenu (li > ul element) is shown but you cant mouse-over (access) it because it's disappearing when mouse leaves parent (li element) area.
I found out that the top: 5em; is doing a "break" between LI and UL. When i try to reduce the top: 5em; to for instance top: 1em; (size where UL is just on border of parent (li element) or for instance goes a bit into parent (li element), then the menu is working!!
But i need it to have the top of my choice and still working.
How to achieve this with position:absolute and top properties?
Live demo: http://codepen.io/riogrande/pen/bEGzXm
I find it strange you found the exact root cause of the problem, but has yet to figure out the fix.
Anyway the fix is to add a transparent child to the <li>, so that it fill the gap between the <li> and its <ul> child. In this case I use li:before:
&:before{
content: '';
display: none;
width: 100%;
height: 5em;
position: absolute;
left: 0;
top: 0;
}
&:hover:before{
display:block;
}
Demo: http://codepen.io/anon/pen/mVdgdo
Edited: Answer edited to cover issue with insights from the OP himself.
Solution based on Av Avt's answer
Anyway the fix is to add a transparent child to the <li>, so that it fill the gap between the <li> and its <ul> child. In this case I use li:before:
&:before {
content: '';
display: none;
width: 100%;
height: 5em;
position: absolute;
top: 100%;
left:0;
}
And then when you hover over parent <li> display it as block so it fills the gap ONLY when parent <li> is hovered (active)
&:hover {
&:before {
display:block;
}
> ul {
display: block;
}
}
Anyway thanks to #av-avt !! Without you i would not figure it out!
Related
I'm trying to make a box which expands into four boxes (which are also links) when you hover over it. To do this I have 5 boxes. One which acts as the parent box and contains all others, one which expands on hover, and the other three which are in the second one positioned to opposite corners. My problem is that the second box has to be over the others for the hover to work but then the user can't click the buttons below it.
Here's an abbreviated version (CSS then HTML):
#sidebar {
height: 100px;
width: 100px;
position: relative
}
#sidebar #container {
height: 100px;
width: 100px;
transition: all 2s;
}
#sidebar #container:hover {
height: 200px;
width: 200px;
}
#sidebar #container #button1 {
height: 100px;
width: 100px;
position: absolute;
right: 0;
z-index: -1;
}
/* Repeat with two buttons positioned to bottom corners */
<div id="sidebar">
<div id="container">
<div id="button1"></div>
<!-- Repeat buttons again -->
</div>
</div>
I'd rather not use anything but CSS and HTML, but if it's the only way I'll be open to it. Jsfiddle here.
EDIT: I fixed the jsfiddle with idrumgood's solution.
It's your negative z-index that's causing the issue. That places it behind everything else.
You need to add this style to your links:
a{
display:inline-block;
}
And adjust the size of the second link. Try it and tell me! :)
You can add the hover effect to your sidebar instead and changing the visibility of your buttons,as well as removing z-indexes http://jsfiddle.net/4zLjas39/12/
#container a div{visibility:hidden;}
#sidebar:hover #container a div{visibility:visible;}
You can allow clicks to pass through an element by setting it's css pointer-events to none
#the_invisible_object{
pointer-events: none;
}
This is my first question here on Stackoverflow so be kind :3 i'm having a problem with a website in which i cannot manage to make a div get the outer li height. I cannot link directly the website because u would need a private VPN access but i will try to give more information possible. This is the code i'm dealing with:
#boxdocenti ul.elencodocenti li div {
margin: 15px auto;
border-radius: 50%;;
max-width:90%;
height: auto;
/*background-color: #ff6319;*/
transition: all 0.5s ease 0s;
}
#boxdocenti ul.elencodocenti li div img {
max-width: 85%;
}
#boxdocenti ul.elencodocenti li div:hover {
background-color: #ff6319;
}
The circle div has an img inside it and i don't know why but the circle div becomes an OVAL! when i go in hover it gives to the image a strange oval border instead of a perfect circle. any suggestions? sorry for the lack of links but it's in a VPN network.
I can't see more relevant CSS and HTML so there are some options.
Option 1. Show <li> as a block element, expand <div> height and add more border-radius. Try adding this properties:
#boxdocenti ul.elencodocenti li {
display: block;
}
#boxdocenti ul.elencodocenti li div {
height: 100%;
border-radius: 100%;
}
Option 2. Absolute positioning. This will stretch the <div> to the <li> border.
#boxdocenti ul.elencodocenti li {
display: block;
position: relative;
height: 200px; //fixed height
}
#boxdocenti ul.elencodocenti li div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
With your css, what will determine whether #boxdocenti ul.elencodocenti li div is a circle or an oval is the height of your image. If your image is a square, it will produce a circle. If your image is a rectangle, it will produce an oval. Your containing div will take on the height of your image.
This is the closest that I could come to the behavior your talking about:
Link to demo
Your code is somewhat lacking since its only the CSS.
Yet what you describe seems like an display: issue.
What I think is happening: your element is by default an inline or inline-block element but when you hover the display property changes.
So I think adding (or removing) the display property should help.
Summary
Add a display:inline-block; on the hover so that it keeps its size and not extends to the full length possible of its parent.
I have a parent <div> and a child <a>. The parent has a background image set to 60% opacity, but I'd like the child link to have 100% opacity. My reason for implementing it this way is so I can fade the parent's opacity to 100% on hover, thereby eliminating the need for a hover image.
I understand that children inherit their parent's opacity. I tried the :after {} technique described here, but even with appropriate z-index values set, the child link still sits beneath the parent element and is not clickable.
My issue is that the child link cannot be clicked because the parent's :after pseudo-element sits above the child.
My code is as follows:
<div>
Load more
</div>
div {
position: relative;
height: 300px;
}
div:after {
position: absolute;
top: 0;
left: 0;
content: '';
background: url('../img/bg-load-more.png') repeat-x;
width: 100%;
height: 300px;
z-index: 10;
opacity: 0.4;
}
div a {
display: block;
z-index: 100;
}
Does anyone know of a solution to this issue, or must I create an image sprite and switch swap background images on hover?
The problem is that you aren't applying a position to the <a> itself (z-index only applies to positioned elements) only the containing div and the pseudo-element, so the pseudo-element is sitting on top of the link preventing it from being clicked.
All you need to do is give the link a stacking context, e.g. include relative positioning:
div a {
display: block;
position: relative;
z-index: 100;
}
Example
I'm currently really busy working on a simple jQuery slideshow, but I've got the following problem, when I make my slides a fixed width like:
#slider ul {
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
position: relative;
}
#slider ul li {
float:left;
height: 100%;
width:200px;
}
It all works fine; but when I want to make my slider full-screen. So Instead of width 200
width:100%;
All the li's get displayed beneath each other instead of next to each other. I hope I provided enough information.
If the width is 100% the li element occupies the full width of its parent container, meaning there's no room for another li element to occupy the same line; the width explicitly forces the next sibling to the next line.
To work around this, one option, given the following mark-up:
<ul>
<li>
<img src="http://lorempixel.com/500/500/nightlife/Some%20sample%20text" />
</li>
<li>
<img src="http://lorempixel.com/500/500/sports/Some%20sample%20text" />
</li>
</ul>
Is to use:
ul {
white-space: nowrap;
}
li,
img {
width: 100%;
}
li {
display: inline-block;
}
JS Fiddle demo.
Which forces the ul to keep elements in a single 'line', assigns a 100% width to the li and img elements, and displays the li elements as in-line.
I am trying to build a CSS dropdown menu. The problem is that all child nodes in the ul li tree appear on the same row, instead of below the parent. How do I make the subcategories appear BELOW the parent ?
Add display:block; float: left;position: relative; on the li to establish a containing block and then position:absolute; top:100%; left:0; on the sub-menu ul to position it with respect to its containing block.
You can use css to position the submenu.
ul li {
position: relative;
}
ul li ul.sub {
position: absolute;
left: 0;
top: 100%;
}
Your main menu items need to have a positioning context, probably relative. Then, for the child menu, set the positioning to absolute, set left to 0 and top to 100%. That should do the trick.