I am trying to create a simple drop-down menu which hides the sub-menu anchors until a main menu anchor is being hovered over.
html markup
<ul>
<li>1</li>
<li>2</li>
<li>
3
3.1
3.2
</li>
</ul>
css styles
<style>
ul li a:nth-child(n+2){
display:none;
}
ul li a:nth-child(n+2):hover{
display:block;
}
ul li a:hover + a:nth-child(n+2) {
display: block;
}
</style>
currently this only displays the first anchor of the sub-menu (3.1) when I need it to be able to display all other anchors of the sub-menu 3.2....3.n, how do I achieve this?
You should use this:
HTML:
<ul id="container">
<li>1</li>
<li>2</li>
<li>3
<ul>
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
</ul>
CSS:
#container>li>ul{
display:none;
}
#container>li:hover>ul{
display:block;
}
Demo: http://jsfiddle.net/Tx4z7/
You could add also a padding to the submenu:
#container>li>ul{
padding-left:20px;
}
Demo: http://jsfiddle.net/Tx4z7/1/
Related
In my <ul> list I have several <li> with <a> tags in them.
I want to change the color of the li bullet icons when hovering on the <a> tag (I mean bullets beside <li>)
I tried
a:hover {
color:red;
}
but it doesn't affect the<li> bullet icon.
I also tried
ul li:hover{
color:red;
}
But it doesn't work perfectly because when mouse move to near <a> tag and not on it <li> and the bullets starts to change color.
your code actually worked for me.
<ul>
<li>
A
</li>
<li>
B
</li>
<li>
C
</li>
</ul>
CSS:
ul li:hover{
color:red;
}
Fiddle: https://jsfiddle.net/tox9je8n/
I have tried something related to your question and it works fine. To fix the issue of li:hover not hovering link, you should set to display:block, as below, so that it takes full width.
ul li a {
color: black;
display: block
}
ul li:hover {
color: red;
}
ul li:hover a {
color: black;
}
<ul>
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
</ul>
I have the below shown css only menu, but am wondering how I can, when the browser window gets smaller and the menu items doesnt fit, how I can move them one by one! onto the last, right most item "more..." so they create a sub menu there instead. Please see the following pictures of how first item "seventh" and "eighth" are moved onto "more..." and the second picture shows what should happen when you hover over "seventh", it should reveal its original sub menu items.
My current code: (pen with same for easier resizing: https://codepen.io/anon/pen/oZoMbK)
* {box-sizing:border-box;}
.nav{
background-color:#d6336c;
font-size:20px;
}
.nav ul{
list-style: none;
}
.nav ul li{
padding:2px 20px;
float: left;
position:relative;
background: #1bc2a2;
white-space: nowrap;
}
.nav ul li ul {
display:none;
position: absolute;
background-color:orange;
left: 0;
}
.nav ul li ul, .nav li li {
min-width: 100%;
}
.nav ul li:hover > ul{
display: block;
}
.nav ul ul ul{
left:100%;
top:0;
}
.nav a{
color:#ffffff;
}
ul,li{
margin:0;
padding:0;
}
<div class="nav">
<ul>
<li>first</li>
<li>second
<ul>
<li>sub1 first</li>
<li>sub1 second
<ul>
<li>sub2 first</li>
<li>sub2 second
<ul>
<li>sub3 first</li>
<li>sub3 second</li>
<li>sub3 third</li>
</ul>
</li>
</ul>
</li>
<li>sub2 third</li>
</ul>
</li>
<li>third
<ul>
<li>.
<li>.
<li>.
</ul>
</li>
<li>fourth</li>
<li>fifth</li>
<li>sixth</li>
<li>seventh
<ul>
<li>cats</li>
<li>dogs
<ul>
<li>beagle</li>
<li>boxer</li>
</ul>
</li>
<li>birds</li>
</ul>
</li>
<li>eighth</li>
<li>more...</li>
</ul>
</div>
First image when hovering "more...":
Second image, when hovering "seventh" under "more...":
I cant figure out how its done, only with media queries but I dont want set specific values as the menu items width might change/be dynamic. The following two pens somehow moves the items one by one as they dont fit when resizing the screen:
https://codepen.io/VPenkov/pen/wMZBOg & https://codepen.io/tejasukmana/pen/bZKNrJ
I really want to keep this css only, no javascript.
thanks in advance for any help!
Frank
I'm building a css dropdown menu and have been unable to get the submenus to appear below their respective parent li elements. I've tried a bunch of the solutions suggested in response to similar questions but have been unable to get them to work.
Here's a sample of the menu I'm building:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Menu Test</title>
<link rel="stylesheet" href="menustyle.css" type="text/css">
</head>
<body>
<div id="menudiv">
<ul class="menu">
<li class="menuitem">Aluminum</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
<li class="menuitem">Copper</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
</ul>
<li class="menuitem">Steel</li>
</ul>
</div>
</body>
</html>
And here's the css:
#menudiv {
text-align:center;
}
ul.menu {
list-style-type:none;
}
li.menuitem {
position:relative;
display:inline-block;
}
ul.submenu {
display:none;
position:absolute;
}
.menuitem:hover+ul.submenu {
display:block;
}
I can move the submenus around by adding things like right:50px; to ul.submenu, but that moves all the submenus to the same location.
What am I missing here? Thanks!!
Here's a Fiddle.
First of all, the following markup structure :
<li class="menuitem">Aluminum</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
is incorrect. It should be :
<li class="menuitem">Aluminum
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
Secondly, you could use a CSS reset for ul,li elements. For the sake of simplicity I've used :
* {
margin: 0;
padding: 0;
}
Now, coming to your question. the following classes needs to be changed :
.menuitem:hover+ul.submenu {
display:block;
}
to
.menuitem:hover > ul.submenu {
display:block;
}
and
ul.submenu {
display:none;
position:absolute;
top:0px;
right:50px;
}
to
ul.submenu {
display:none;
position:absolute;
}
You can then modify the following class (so that the child ul elements "fits-in" to the parent li):
li.menuitem {
position:relative;
display:inline-block;
}
to
li.menuitem {
position:relative;
display:inline-block;
padding: 5px 10px;
margin: 0 10px;
}
In summary, I guess this is what you are looking for :
* {
margin: 0;
padding: 0;
}
#menudiv {
text-align:center;
}
ul.menu {
display: inline-block;
list-style-type:none;
}
li.menuitem {
position:relative;
display:inline-block;
padding: 5px 10px;
margin: 0 10px;
}
ul.submenu {
display:none;
position:absolute;
}
.menuitem:hover > ul.submenu {
display:block;
}
<body>
<div id="menudiv">
<ul class="menu">
<li class="menuitem">Aluminum
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
<li class="menuitem">Copper
<ul class="submenu">
<li class="subitem">Round 2</li>
<li class="subitem">Sheet 2</li>
</ul>
<li class="menuitem">Steel</li>
</ul>
</div>
</body>
Hope this helps!!!
Try placing the <ul class="submenu"> inside the <li class="menuitem">. Then set the <li> to position:relative; and set the <ul> to position:absolute;left:0;. This will position the <ul> relative to its parent element, the <li>.
Here's a codepen example: http://codepen.io/anon/pen/WQdMjX
Your markup is incorrect for nesting a sub-list.
You're doing this:
<ul>
<li>text</li><!-- incorrect, don't close li here -->
<ul>
<li>sub</li>
</ul>
</li><!-- correct, though li is already closed -->
<li>text</li><!-- incorrect, don't close li here -->
<ul>
<li>sub</li>
</ul>
<!-- needs closing li here -->
<li>text</li>
</ul>
Instead do this:
<ul>
<li>text
<ul>
<li>sub</li>
</ul>
</li>
</ul>
Then update your CSS selector from .menuitem:hover + ul.submenu to .menuitem:hover > ul.submenu as you're no longer selecting a sibling element (+) but a child element (>).
You'll need to fine tune the positioning of your sub-menus from here but this should get you where you need to be.
Remember, when you are developing menus you need to make sure the link content is inside anchor tags, including the links at the top level navigation that launch the subnav. That way these links are natively focusable. You want to be able to reach these menu elements with a keyboard only since many with arthritis, Parkinson's disease, etc. may be unable to use a mouse (and you won't want to use tabindex to mimic this behaviour since screen-readers will look for anchor tags.)
There was a similar StackOverflow question yesterday: Absolutely positioned child's top edge pinned to the bottom edge of its parent that has unknown height?
You can also Bootstrap Dropdown CSS in a normal case too.
got an html list working as a dropdown menu with CSS when you hover through a < li > element like "Products" in my example. But what I want is the same effect when hover through < h3 > like "Contact" from my example. Is it possible?
Here's the html:
<h3>Contact</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>
Products ▾
<ul>
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
And the CSS code:
ul li ul {
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
Thank you very much in advance.
On hover you can only control the CSS of the element you hover over, or the CSS of elements within the element you hover over (one of its children).
So you can not make the ul change styles when you hover over the h3 because they 1) are not the same object and 2) do not have a parent-child relationship (they are siblings).
To show the menu when hovering over the h3, you can wrap both of them inside another object (div) and use this for the hover event. To distinguish between the two hovers you can add classnames to both the uls.
See this JSfiddle, or the code below:
<div class="container">
<h3>Contact</h3>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Products ▾
<ul class="submenu">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
.container ul{
display: none;
}
.container:hover ul.menu{
display: block;
}
ul li ul.submenu {
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
In short - you should nest ul inside the h3
<h3>
Contact
<ul>
<li>Home</li>
<li>About</li>
<li>
Products ▾
<ul>
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</h3>
And in your css:
ul li ul {
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
h3 > ul {
display: none;
}
h3:hover > ul {
display: block;
}
Here's the demo: https://jsfiddle.net/mscehjLf/1/
I had problem to load the li in nested navigation. Here is the problem suppose i'm having a five elements(li) in the parent ul. If i click on any element(li), I can see 30 child elements(ul li) in list. Now the problem is how do I have assign them in three rows?
Below is the structure. I have tried like splitting the them into rows but no use.
ul(parent)
li
li
li>ul(child)
li li(1) li(11) li(21)
li li (2) li(12) li(22)
.. (3) .. ..
.. .. ..
(10th li) (20th li)(30th li)
I am not following you question 100% but it sounds like you are trying to nest more than one level deep? If you are ..
Simple just nest some more ul elements within the li tags.
<ul>
<li>1</li>
<li>2</li>
<li>
3
<ul>
<li>3.1
<ul>
<li>3.1.1</li>
<li>3.2.1</li>
</ul>
</li>
<li>3.2
<ul>
<li>3.2.1</li>
<li>3.2.2</li>
</ul>
</li>
<li>3.3
<ul>
<li>3.3.2</li>
<li></li>
</ul>
</li>
</ul>
</li>
<li>4</li>
<li>5</li>
</ul>
SEE THE DEMO. Is this what you want? Basically, you will have to define the width for the second ul and float your li. Your code should be like:
ul.primary {
position: relative;
}
ul ul {
width: 400px;
position: absolute;
top:0; left: 0;
}
ul ul li {
float: left;
}