I've got an id #navigation with position: relative; and inside of it a class .submenu with position:absolute;. The sub-menu contains texts (<a> tag links more specifically), which have lost their cursor: pointer; property and ability to be selected on the account of them now being behind other elements on the page.
I'm not sure what I can do, short of declaring #navigation and all it's children at the bottom of the page in order to bring .submenu "to the front".
I've already tried setting z-index: 1; on .submenu, and that didn't work.
Any more suggestions/answers would be greatly appreciated ;)!
Replace #navigation .submenu with this:
#navigation .submenu {
z-index: 1;
background-color: #fff;
position: absolute;
top: 50px;
left: 445px;
padding: 0px 20px;
text-align: center;
border: 1px solid #ddd;
}
Tested and working. Add the z-index and create a background color so that the other elements arent bleeding through—Nick B
I added this code using inline-styling to the div of class submenu
style="z-index: 999"
and it worked
Related
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.
My problem is that I've got a div at the top of my site that has a dropdown menu with a float to the left, the thing is that under that div where I want to have a header whenever I hover over the menu the header floats to the left as well.
I tried to do a clear div after the top div then on css use clear:both; but it didn't really help
Here's the JSfiddle:
http://jsfiddle.net/Safushi/XRNP5/
ul {
font-size: 16px;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #464646;
white-space: nowrap;
}
ul li a:hover {
background: #565656;
}
is some of the code for the menu (had to paste some code to be able to paste JSfiddle link).
It will be fixed by adding a
position: absolute;
to the ul that contains the submenu.
The child ul element needs to be absolutely positioned if you don't want it to effect the other elements.
Example Here
#top li > ul {
position:absolute;
width:100%;
}
And as Adrift mentions, you may also want to give the ul a width of 100%.
You got the layer of HTML file right,but the property "position" wrong.
Demo
Once a tag's settled position:absolute; ,it will only be positioned referring to its containing block.So you need to set #menu{postion:relative;} to let its parent-tag be the containing block.In fact,now the submenu is totally deleted from the normal flow,so it won't affect the styles of other tags.
Moreover,I highly recommend you to resist to use descendant selectors,which not only let your browser slower,and your code maintenance much more complex as well.
I want to do this with CSS only. I have an unordered list and some hyperlinked list items and I want to limit the width and height of the links (list items) to width:300px and height:1.5em. So, no matter what the length of the links are, only up to 300px of the links will be showing and the rest will be hidden because of height limit and overflow:hidden. I want to show the rest of the link on mouse hover.
I can partially do this and hover over links shows the rest of the content BUT it also pushes down the content below it.
Is it possible, to show the rest of the content on mouseover WITHOUT pushing down the content below it?
Please see this fiddle 'http://jsfiddle.net/3VyaC/'
Looks a little clunky, but it's close to the effect you're shooting for. Only changed your CSS:
body {font-family: arial; font-size: 0.8em;}
.news-entry ul {
list-style-type: none;
padding: 0;
margin: 0 0 0 8px;
width: 300px;
}
.news-entry li {
border-top: 1px solid #dcdcdc;
width:300px;
height:1.5em;
overflow:hidden;
position:relative;
}
.news-entry li a.itemtitle {
display: block;
width: 100%;
padding: 4px 0 3px 0;
line-height: 1.5em;
text-decoration: none;
}
.news-entry li:hover {
color: #333;
background-color: #fafafa;
overflow:visible;
z-index:10;
}
.news-entry li:hover a{
position:absolute;
width:100%;
background-color:#fafafa;
border:1px solid #555;
}
Fiddle: http://jsfiddle.net/y3Vkt/
Might need to tweak the margins when the link changes to absolute position, there's a 1-2px glitch.
Hope this helps!
There would not be a way to do this. The only way you could actually do that is by setting position: absolute; but that would make the link sit on top of the next one. So to basically answer your question, there is not a way to do this with the width set as you have it.
why does chrome display an extra 10 pixels, on the child menus? do they render the position differently, in regards to the parent menu? here is the css:
#nav ul li ul{
display: none;
width: 250px;
opacity: .7;
z-index: 999;
}
#nav ul li:hover ul{
display: block;
background-color: #444444;
padding: 0;
margin: 0;
position: absolute;
top: 20px;
border-top: 19px solid black;
}
see it in action:
http://guardianweb.edulence.com/model3/
Based on what I can see, it looks like Chrome and IE9 are rendering the page appropriately, but Firefox 11 is not. Is this the extra 10 pixels you are referring to?
Personally, I'd drop the top: 20px to have Firefox 11 render the sub-menus the same as Chrome and IE9.
You have a 19px border on top of your li:hover ul which is not measured into the height of the box adding, essentially, another 19px gap above your subnav. Also around line 80 of your styles.css you'll see that #nav ul gets padding:10px 0; it's being applied to the subnav too. giving it 10px padding above the first li
I have a sort of an image map, where I've used li's to create the elements, and on hovering the information pops up. The html code is:
<li id="b906" style="z-index: 1000;">
<a href="#">
<span> </span>
<span class="para">Some text and maybe an image goes here.</span>
</a>
</li>
And the CSS code for the corresponding HTML is:
#map ul li {
position: absolute;
list-style: none;
top: 0;
left: 0;
width: 100px;
height: 100px;
text-align: center;
display: block;
}
#map ul li a {
color: #000;
text-decoration: none;
color: #fff;
display: none;
position: absolute;
top: 0;
left: 0;
}
#map ul li:hover a {
display: block;
}
#map ul li a span {
display: block;
width: 100%;
height: 120px;
border: 2px solid #777;
}
#map ul li a span.para {
display: block;
background: #777;
padding: 2px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100px;
}
This works splendidly in all the browsers, but IE8 does not show the spans on hover. However, if I put a border: 1px solid red; on the li, the spans do show up, but only if my mouse is exactly on that 1px thin border. Doesn't show up still if the cursor is inside the li.
What am I doing wrong here? :(
Thanks for the help.
Internet Explorer has some problems with dealing with :hover events, especially for li elements. You need to use this: http://www.xs4all.nl/~peterned/csshover.html
Should work for you then.
If all else fails, and in my case, I use jQuery's hoverIntent to show menus reliably.
From http://msdn.microsoft.com/en-us/library/ms530766.aspx
Windows Internet Explorer 7 and later, in standards-compliant mode (strict !DOCTYPE), can apply the :hover pseudo-class to any element, not only links. If the pseudo-class is not applied specifically to an element in the selector, such as the A tag, the Universal (*) Selector is assumed. Indiscriminate use of the :hover pseudo-class can negatively impact page performance.
See Defining Document Compatibility