All geek questions in one place

Creating style drop-down menus when they don't hover over them

I found guidance on creating drop-down menus, and he said that when you stop hanging over the main menu item, the drop-down menus will remain fixed. However, my menu just disappears, which makes it impossible to click on objects!

As you can see, this is a bit of the Music menu, which has a drop-down menu (or in this case "drop-right").

Try it here: http://jsfiddle.net/Gb2aS/

The code is here:

HTML:

<!DOCTYPE HTML> <html> <head> <link href="stylesheet.css" rel="stylesheet" type="text/css"> <title>Home</title> </head> <body> <div ID="menubox"> <ul> <li><a href="http://folk.ntnu.no/arnstekl/" class="link">Home</a></li> <li><a href="#" class="link">Music</a> <ul> <li><a href="https://soundcloud.com/arnsteinkleven/" class="link">My music</a></li> <li><a href="http://folk.ntnu.no/arnstekl/gilberto.html" class="link">The Joao Gilberto project</a></li> </ul></li> <li><a href="https://www.github.com/arnstein" class="link">Github</a></li> <li><a href="http://www.flickr.com/photos/ 92472314@N03 /" class="link">Pictures</a></li> </ul> </div> <div ID="circle"> <p ID="title"> A <br> r <br> n <br> s <br> t <br> e <br> i <br> n </p> </div> </body> </HTML>

CSS

 #menubox { width: 8%; height: 30%; border: 10% solid #C7D93D; border-radius: 5%; position: fixed; margin-top: 12%; margin-left: 18%; font-family: Ubuntu, Lucida console, Futura; list-style: none; float: left; } #menubox ul li a { text-align: left; font-size: 200%; color: #FFF0A5; } #menubox ul li { color: #468966; font-family: Ubuntu, Lucida console, Futura; float: left; margin-right: 10px; position: relative; } #menubox ul { color: #468966; font-family: Ubuntu, Lucida console, Futura; } #menubox ul ul { position: absolute; left: -9999px; list-style: none; } #menubox ul ul li { float: left; margin-left: 40%; position: relative; font-size: 60%; text-align: left; } #menubox ul ul a { white-space: nowrap; } #menubox ul li:hover a { text-decoration: none; color: #FFB03B; } #menubox ul li:hover ul { left: 0; } #menubox ul li:hover ul a { text-decoration: none; color: #FFB03B; } #menubox ul li:hover ul li a:hover { color: #FFB03B; } div p { color: #FFF0A5; text-align: center; position: relative; vertical-align: middle; display: inline-block; margin-top: 300px; line-height: 60px; } #circle { border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; background-color: #B64926; width: 500px; height: 500px; display: block; position: fixed; margin-top: 9%; margin-left: 52%; text-align: center; } #title { text-color: #FFF0A5; font-size: 350%; display: inline; text-align: center; } body { height: 100%; width: 100%; background-color: #468966; font-family: Ubuntu, Lucida console, Futura; } .link { text-color: #FFF0A5; text-decoration: none; text-align: left; }
+4
source share
3 answers

The problem is that your helper list is biased, so there is dead space that the cursor must go through the main menu item and the submenu. This will fix your problem:

 #menubox ul li:hover ul { left: 0; top: 0; z-index:100; }

As Daniel Gimenez explained, the reason the submenu remains visible is because it is a child of the main ul element, and therefore, if you hold the cursor over the submenu, the browser considers that by holding the cursor over the original the menu item as well : hover css is saved.

This works well for a dropdown menu because even if the child is physically displayed outside its parent, it is still “inside” the parent from a code point of view. But if there is any physical gap between the two and the mice crossing this gap, the rule is: hover deactivates and the submenu disappears.

+2
source

Your css had a lot to pour. So I just threw him to the basics. I believe that your problem is related to the gap between your main link and the submenu.

CSS Explanation * Anchors are block line block types and have the exact width of the parent li and ul. * Submenus are inside li. Therefore, when they hang, they are visible. The submenu is visible because it is a child of li. * Since the anchors are 100% stretch li, they are adjacent to the submenu, so there is no gap when moving the mouse, so the submenu remains visible.

jsFiddle

 #menubox { position: absolute; left: 100px; top: 100px; } #menubox ul { display:inline-block; padding-left:0; } #menubox > ul { width: 100px; } #menubox > ul ul { position:absolute; display: none; width: 200px; } #menubox li { list-style-type:none; display:block; } #menubox li:hover { background:red; } #menubox a { display:inline-block; width:100%; } #menubox ul li:hover ul { display: inline-block; background: orange; }
+1
source

I added some additions to the list that appears, essentially creating a block around it. As long as your mouse is on this block, it will not disappear.

http://jsfiddle.net/Gb2aS/5/

 #menubox ul ul { position: absolute; left: -9999px; padding: 100px; list-style: none; }

however, the question is that the drawn circle is placed above the top of the list, but I will leave it to you.

I do, however, as Daniel's decision is better. Providing links in your own class is a much better way to handle this. You better take a look at his solution and adapt it to what you want.

+1
source

Source: https://habr.com/ru/post/1488710/

More articles:


All Articles