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.
Related
I'm trying to make a drop down menu but the hover is not producing the desired display effect. I just want the drop down menu to display when the mouse hovers over the list element. I'm new to HTML and CSS, so I can't pinpoint my error.
The relevant HTML:
#strip{
width: 950px;
height: 28px;
background-color: #2c276d;
font-size: 10pt;
}
.strip{
margin:0;
padding: 0;
}
.strip li{
list-style-type: none;
float: left;
}
.strip li a {
color: white;
text-decoration: none;
display: block;
text-align: center;
width:140px;
height:23px;
padding-top:5px;
border-right: 1px solid #FFFFFF;
}
.strip li.shrt a{
width: 145px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropcmpy {
display: none;
position: absolute;
background-color: #2c276d;
font-size: 10pt;
width: 145px;
}
.dropcmpy a {
color: white;
display: block;
text-decoration: none;
padding: 5px;
border-top: 1px solid #FFFFFF;
}
.strip li a:hover{
background-color: #28A2D5;
}
li.shrt:hover .dropcmpy {
display: block;
}
<div id="main">
<div id="strip">
<ul class="strip">
<li class="shrt">Com</li>
</ul>
</div>
<div class="dropcmpy">
Key
Ad
Fac
Car
FAQ
</div>
</div>
No matter how I format that last piece of CSS, it doesn't produce a drop down menu, unless I do
#main:hover .dropcmpy {
display: block;
}
or give the first div a class, and then use that. Otherwise the dropdown menu will not appear. This presents the issue that the entire strip will then produce the menu, while I want only the shrt to.
As john stated, selector .class1 .class2 is targeting an element with class="class2" that is a child of an element with class="class1".
which means you need to put the dropdown menu INSIDE the element, thats supposed to show the dropdown when hovered.
Usuall way is using another list inside the button, for example
<div id="main">
<div id="strip">
<ul class="strip">
<li class="shrt">
Com
<ul class="dropcmpy">
<li>Key</li>
<li>Ad</li>
<li>Fac</li>
<li>Car</li>
<li>FAQ</li>
</ul>
</li>
</ul>
</div>
</div>
and css
.dropcmpy {display: none;}
.shrt:hover .dropcmpy {display: block;}
That should do it, hope it was helpful :).
In order to show an object on hover with css, that object must be the sibling or child of the thing being hovered (As there are no parent selectors). This is not the case in your code.
So you have a few options:
Make div.dropcmpy a child of li.shrt. (As in Teuta Koraqi's answer)
Hack. Use an empty pseudo element (.dropcmpy::before) and absolutely position it over li.shrt, then use that as the hover element.
Use javascript
I don't know what the structure of your page is so can't say which of these would be best for you. The first is certainly the cleanest if you can manage it.
The problem is with inheritance. The last block that you are trying to use is looking for a .dropcmpy element that is a child of .shrt (which obviously doesn't exist). The reason the alternative works is because .dropcmpy is a child of #main.
I don't see any issue with using #main as the hover listener, since everything related to the dropdown is contained in it anyways.
After a reminder from #JohnCH, I realized you could do a sibling selector like this to get the functionality I think you want.
#strip:hover+.dropcmpy {
display: block;
}
I'm sort of new to HTML and currently, I am creating a custom home page for myself containing links to site I often visit.
When I hover over a picture it expands to show more specific links (i.e. subreddits).
However, the problem is that the "sub-link-icons" are not properly aligned with the expanding DIV It will show in front of the bigger picture when hovering over it.
What I am trying to do is have the sub-link-icons to be in sync with the expanding div.*
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Homepage</title>
</head>
<body>
<div class="submenu" id="steam"><img src="steam.png"></div>
<div class="submenu" id="reddit">
<img src="reddit.png"/>
<ul>
<li><img src="reddit.png"/></li>
<li><img src="reddit.png"/></li>
<li><img src="reddit.png"/></li>
</ul>
</div>
<div class="submenu" id="youtube"><img src="youtube.png"/></div>
</body>
</html>
CSS:
body {
background-color: #330000;
color: white;
}
div img {
width:256px;
height:256px;
border-radius:5px;
}
li img {
width:75px;
height:75px;
border-radius:15px;
}
#youtube:hover {
border: #E6E6E6 solid 4px;
background-color: #E6E6E6;
}
#steam:hover {
border: #12151A solid 4px;
background-color: #12151A;
}
#g2a:hover {
border: #0F1F2E solid 4px;
background-color: #0F1F2E;
}
#reddit:hover {
border: #999999 solid 4px;
background-color: #999999;
}
ul{
position:absolute;
list-style-type: none;
display:none;
margin-left: 125px;
}
.submenu {
border-radius: 5px;
position:relative;
display: inline-block;
margin-left: 0px;
width:256px;
height:256px;
border:4px solid #330000;
text-align:center;
margin-left:5px;
margin-top:5px;
transition: width 1s;
z-index:0;
}
.submenu img {
float:left;
}
.submenu:hover {
width:350px;
transition: width 1s;
}
.submenu:hover img {
float:left;
z-index:2;
}
.submenu ul {
position: absolute;
}
.submenu:hover ul {
display:inline-block;
float:right;
margin-top:-10px;
margin-left:-45px;
position:absolute;
z-index: 1;
}
.submenu:hover ul li img {
float:left;
margin-left: -30px;
margin-top: 12.5px;
}
I've tried searching the web for help but couldn't quite manage it.
JSFIDDLE
Lets go through this step by step.
First issue: On hover, "sub-icon-links" are layered over your big pictures, instead of under it.
This IS fixable with z-index, but first you have to understand how z-index works.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
With z-index you can layer elements that are in the same HTML layer. Because it didn't work I assume you've tried to apply z-index on the sub-menu-links. This wouldn't work because the big picture is not on the same layer as them. If we take a look at your HTML structure you'll see:
<div class="submenu" id="reddit">
<img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/>
<ul>
<li><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></li>
<li><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></li>
<li><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></li>
</ul>
</div>
To use z-index in this case, you have to see at which points the images or their containers are on the same layer.
Your big image is contained within an anchor tag (a)
Your small images are contained within list items
These list items are contained within an unordered list
This unordered list and the anchor tag are on the same layer. Applying z-index to one of these will fix this issue.
Note: This works different when using things like "position: absolute" and "position: fixed" or any other attribute that changes the position of the element in the HTML stack.
JSFiddle: https://jsfiddle.net/eehdo8wa/5/
What I did:
Added "z-index: -1;" to ".submenu ul"
Removed "z-index: 1;" from ".submenu:hover ul"
Second issue: On hover, the "sub-icon-links" should expand at the same rate as the div expands
So, doing this should be very simple now the pictures are layered under the big picture correctly. Basically, when you think about it, all you should have to do is make the pictures stick to the right side of its parent, so when it expands, the pictures stick to the right side and slide along, taking them into the view.
JSFiddle: https://jsfiddle.net/eehdo8wa/6/
What I did:
I redid some of the CSS to make it so everything is already in the right position before sliding into the view. This is essentially what you want in these cases. In your original fiddle you had a LOT of styling on the hover portions, changing all kinds of styling and spacings, but was it really needed? In the end, no. Now it's all in position behind the big image, ready to slide right into the view.
I was able to create a drop down menu, but unable to center the text. Its
as if padding-left is set but I didn't set it. I just need help centering
the text in the drop down menu.
//drop down menu
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
background-color:grey;
padding: 5px;
}
.menu li {
list-style:none;
padding: 3px;
}
.menu a {
text-decoration: none;
color: black;
}
.menu > li {
display:inline;
}
.dropmenu {
display:none;
float:right;
position:relative;
top:18px;
left:-422px;
}
.dropdown:hover > .dropmenu {
display:block;
}
.dropmenu {
background-color:grey;
}
</style>
</head>
<body>
<ul class = "menu">
<li>HOME</li>
<li>ABOUT</li>
<li class = "dropdown">SPORTS
<ul class = "dropmenu">
<li>NBA</li>
<li>NFL</li>
<li>MLB</li>
</ul>
</li>
<li>CONTACTS</li>
<li>BLOG</li>
</ul>
</body>
</html>
First, use text-align: center; on the dropdown menus. Your dropdown menus will look off center as there is default padding and margin the ul you are using for your dropdown menus that browser add by default. You will want to remove that padding/margin from the dropdown uls.
.dropmenu {
padding: 0;
text-align: center;
}
If the dropdown menu becomes too narrow after doing this you'll likely want to set a specific width for your dropdown menus.
.dropmenu {
padding: 0;
text-align: center;
width: 100%; /* same width as containing li */
}
jsFiddle: http://jsfiddle.net/7hjqjrjj/2/
If you're looking to clean up/fix alignment of your dropdown menu read below.
You want to apply position: relative; to the li's that contain a dropdown menu. Then apply position: absolute; to that dropdown menu (ul). You'll usually add left: 0; to the drowpdown menu (ul) as well.
Applying position: relative; to the containing li causes the absolutely positioned dropdown menu to position itself relative to the containing li, rather than some place like the top of the page.
We don't want the dropdown to position itself after the anchor tag or other content within the containing li so we use absolute positioning.
Update your CSS selectors as follows:
.menu li {
list-style: none;
padding: 3px;
position: relative;
}
.dropmenu {
display: none;
position: absolute;
top: 18px;
left: 0;
}
You may need to fiddle with your top and left values.
jsFiddle: http://jsfiddle.net/7hjqjrjj/1/
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
I have a tooltip written purely in CSS.
I've got it working in FF but for some reason it falls short in chrome and my list doesnt appear in my span.
I've made a jsFiddle if anybody can see where im going wrong?
http://jsfiddle.net/WW6MY/1/
It seems the problem is that, since you can't have anchors inside anchors, when the html is "fixed" for you when being parsed your structure is broken.
If you do not have a inside a it works: http://jsfiddle.net/WW6MY/2/
So you need to improve your structure and not have nested as.
Fiddle: http://jsfiddle.net/WW6MY/3/
Add a new element (.tooltip-container). Set the position:relative CSS attribute, so that absolutely positioned child elements are positioned correctly. Move your span element inside the anchor to this container, so that the anchors don't interfere with each other.
Finally, attribute the :hover pseudo-selector to this container element, so that the tooltip is display correctly.
HTML:
<span class="tooltip-container">
Tommy Two Dogs
<span>
<ul>
<li>Name: My Name</li>
<li>Contact DDI: 0123 444 5678</li>
<li>Mobile:01234 567 890</li>
<li>Email: me#home.com</li>
<li>Click here for more details</li>
</ul>
</span>
</span>
CSS:
.tooltip-container {
position:relative;
}
.twotip + span {
font-weight: normal;
display: none;
position: absolute;
}
.twotip {
font-weight: bold;
position: relative;
}
.tooltip-container:hover > span {
background: red;
font-size: 11px;
height: 163px;
color:#fff;
left: -100px;
display: inline;
padding: 40px 30px 10px;
top: 0px;
width: 310px;
z-index: 99;
}
.twotip ul li {
color: #FFFFFF;
}