I am creating an HTML Multi-level Dropdown menu.
I want to change the background of the second menu level when I hover over the first menu level.
I am able to change color of first level dropdown items on hover with the first code snipped below
The background colour of the second level in the dropdown I can change with the second code snippet
So I thought that what I want is achieved by just connecting those two snippets with each other.
But connecting both does not work for me. The last code snipped is not working. What am I doing wrong?
.dropdown-content > ul > li > a:hover {
background: blue !important;
}
.dropdown-content > ul > li > ul {
background: white;
}
.dropdown-content > ul > li > a:hover .dropdown-content > ul > li > ul {
background: red !important;
}
Would need to see your html code to be sure, but try something like:
.dropdown-content > ul > li > ul > li > a:hover {
background: red !important;
}
I think what you're looking for is the adjacent selectors. Below, the plus sign selector + in the third style rule waits for an anchor tag to be hovered over, and then finds the adjacent .dropdown-content element and highlights its child ul element in red:
.dropdown-content>ul>li>a:hover {
background: blue;
}
.dropdown-content>ul>li>ul {
background: white;
}
.dropdown-content>ul>li>a:hover+.dropdown-content>ul {
background: red;
}
<div class="dropdown-content">
<ul>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
<div class="dropdown-content">
<ul>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
</ul>
</div>
</li>
</ul>
</div>
Related
.myActive{
background:white;
color: red;
}
.navbar > li > a:hover,
.navbar > li > a:focus{
background: ;
color: #333;
}
<ul class="navbar">
<li> Home</li>
<li> Categories</li>
<li> About us</li>
<li class="myActive"> Contact</li>
</ul>
I want to change color of my text in <a> tag so I write a class that change background of li tag but it's not changed my color text in li.
After a little research I understand that I need to add <span> to my text.
but I don't understand why i need do this, <a> and <span> are inline elements.
.navbar > li > a:hover,
.navbar > li > a:focus{
background: white;
color: #333;
}
and why pseudo class focus do the work ?
If you want change your link color:
.navbar > li > a{
color: red;
}
not
.navbar > li{
color: red;
}
So add CSS for the link element not the li.
You don't need span.
Focus works because you write css for the link element in focus state.
Assuming your HTML is like this
<ul>
<li><a href="http://www.thesite.net>This Site</a></li>
</ul>
To change the text colour of the link the css is simple
li a{ color: red;}
I would also recommend adding a hover colour:
li a:hover{color: blue;}
Why does my CSS dropdown menu work on Android and all PC browsers, but not iOS devices?
.mainHeaderBtns ul li:hover > ul {
display:block;
}
As of my tests, for a dropdown menus, make sure the <a href="#"> element is visible and clickable on the page, I have made a simple demo and it works fine.
.nav > li > ul {
display: none;
}
.nav > li:hover > ul {
display: block;
}
<ul class="nav">
<li>
Menu item
<ul>
<li>Sub item</li>
</ul>
</li>
</ul>
For any element, Apple 1 recommends to add onclick = "void(0)" I also found onclick="return false;"or onclick="" all works.
div span {
display: none;
}
div:hover span {
display: inline;
}
<div onclick="void(0)">Howdy <span>mates!</span></div>
1https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
I was able to get this to work quite well using standards-compliant code, without Javascript hacks.
The key pieces of CSS:
/* hide submenu by default */
.nav .submenu {
display: none;
}
/* show submenu on :hover and :focus-within */
.nav li:hover .submenu, .nav li:focus-within .submenu {
display: block;
}
To get the :hover to work correctly on iPad, you need to add a tabindex to your top-level menu items:
<ul class="nav">
<li tabindex="0">
Menu Item
<ul class="submenu">
<li>...</li>
</ul>
</li>
</ul>
And then to be able to close the menu, you need to add a tabindex to the <body> tag also:
<body tabindex="0">
The good thing about this approach is that it also allows keyboard navigation, which is good for accessibility.
I got a css menu with 3 levels. You can see my actual code right here http://jsfiddle.net/7rMgu/
As you can see, my secondary level don't keep the light blue background when navigating in the 3rd level. I've looked over the website for similar thread but I just found similar problems with only 2 levels. Also, can someone explain when I should use the '>' in css as I'm a bit confused.
CSS
html{height:100%;background-color:#0d497d;}
body{width:100%;height:100%;margin:0px;padding:0px;color:#575757;font:0.75em "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;}
div.menuAdmin ul{margin:0;padding:0;float:right;height:100%;}
div.menuAdmin ul li{display:block;float:left;height:23px;margin-bottom:0;}
div.menuAdmin ul li a{color:#fff;padding:0.1em 0.3em 0.2em 0.3em;text-decoration:none;font-size:12px;display:block;margin:0.85em 0em 0em 0em;width:130px;background-color: #0d497d;border:1px solid #78B9EF;border-radius:5px;}
div.menuAdmin ul li:hover a{color:#000;border-radius:5px;background-color:#78B9EF;}
div.menuAdmin ul li ul{display:none;}
div.menuAdmin ul li:hover > ul {display:block;height:20px;width:139px;position:absolute;margin:0;}
div.menuAdmin ul li:hover > ul li a {line-height: 20px;color:#fff;text-decoration: none;margin: 0;padding-bottom: 0.1em;background-color: #0d497d;border:1px solid #78B9EF;border-radius:5px;}
div.menuAdmin ul li:hover > ul li a:hover {color:#000;text-decoration:none;text-shadow:none;background-color: #78B9EF;}
div.menuAdmin ul ul li:hover > ul {display:block;position:absolute;left:100%;top:0;width:139px;}
div.menuAdmin ul > ul > ul li:hover > a {color:#444;background-color:#78B9EF;}
HTML
<div class='menuAdmin'>
<ul>
<li>
<a href=''>A</a>
<ul>
<li>
<a href=''>1</a>
<ul>
<li>
<a href=''>A1</a>
</li>
<li>
<a href=''>A2</a>
</li>
<li>
<a href=''>A3</a>
</li>
<li>
<a href=''>A4</a>
</li>
</ul>
</li>
<li>
<a href=''>2</a>
</li>
<li>
<a href=''>3</a>
</li>
<li>
<a href=''>4</a>
</li>
</ul>
</li>
<li>
<a href=''>B</a>
</li>
<li>
<a href=''>C</a>
</li>
<li>
<a href=''>D</a>
</li>
</ul>
</div>
Thanks
To keep the :hover effect you need to make the change on hover the li element not just the a tag, so you have this:
div.menuAdmin ul li:hover > ul li a:hover
Must be:
div.menuAdmin ul li:hover > ul li:hover > a
With the hover on the li element keeps the effect since the ul wich is the submenu is part of the li.
Check the Demo http://jsfiddle.net/7rMgu/1/.
Now your second question when use this >; when you only want to affect the direct children, it let you avoid the same style on nested elements. An example with the same selector I have fix, if you remove the last > check what happen:
http://jsfiddle.net/7rMgu/3/
It changes all a inside the li even if are inside some nested elements.
Here is an updated fiddle:
http://jsfiddle.net/ryanwheale/7rMgu/2/
Essentially, you always want the :hover selector to be on the LI. You had it on the A.
Also, the > selector in CSS means "direct children"... best explained by example:
<div class="my-div">
<p>This should be blue</p>
<div>
<p>This should be green</p>
</div>
</div>
and this css:
.my-div p { color: green }
.my-div > p { color: blue }
You have a few redundant rules, I've tried to boil it down for you:
.menuAdmin ul{ /* all lists */
margin:0;
padding:0;
list-style: none;
}
.menuAdmin li { /* all list items */
margin:0;
padding:0;
}
.menuAdmin > ul { /* first level list*/
float: right;
}
.menuAdmin > ul > li { /* first level list items*/
float: left;
}
.menuAdmin ul ul { /* second and third level list */
position: absolute; /* remove from flow */
display: none; /* hide by default */
}
.menuAdmin ul ul ul { /* third level list */
top: 0;
left: 100%;
}
.menuAdmin li:hover > ul { /* first level list inside of a hovered item */
display: block;
}
.menuAdmin a { /* all links */
color:#fff;
padding:0.1em 0.3em 0.2em 0.3em;
text-decoration:none;
font-size:12px;
display:block;
width:130px;
background-color: #0d497d;
border:1px solid #78B9EF;
border-radius:5px;
}
.menuAdmin li:hover > a { /* links inside hovered list item */
color:#000;
background-color:#78B9EF;
}
As already answered, > means "child" (a.k.a. direct descendant)
See demo at http://jsfiddle.net/7rMgu/5/
my Menu is something like this:
<section class="top-bar-section">
<ul class="left">
<li class="menu-item menu-item-main-menu menu-item-cine-suntem has-dropdown not-click" id="menu-item-60">TopLevel Menu
<ul class="dropdown">
<li class="menu-item menu-item-main-menu menu-item-misiuneviziune" id="menu-item-66">SubLevel Menu</li>
</ul>
</ul>
And the CSS that ads a black arrow when I hover over the TopLevel Menu
.top-bar-section .has-dropdown > a:hover:after{
content: "";
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: #000 transparent transparent transparent;
border-top-style: solid;
margin-top: 22px;
z-index:999;
}
How do I get that arrow to stay visible, when I hover the child element of that menu item, because now as soon as I start hovering the child, the arrow from the parent item disappears.
Use the hover for list-item i.e li:hover to achieve what you are looking for, as that will select the parent to have the hover that is visible on hover only for the child elements.
PS: Your above markup as provided is jagged and not correct. You need to correct it for the code to work properly.
Change
.top-bar-section .has-dropdown > a:hover:after{...}
.top-bar-section li a:hover, .top-bar-section .dropdown li a:hover{background:#c1212e;}
to
.top-bar-section .has-dropdown:hover > a:after {...}
.top-bar-section li:hover a, .top-bar-section .dropdown li:hover a{background:#c1212e;}
Note:
Closing tags are missing in your HTML markup. Which is a bad practice.
DEMO here.
I am modifying the CSS of an existing web page. The navigation menu is in the form of a list in which the items have a certain background color under normal circumstances and another color when active or hovered-over. The CSS code for this is as follows:
#navigation li a:hover,
#navigation li#active a {
background: #104E91;
}
Some of the menu items (list items, in this case) have drop-down menus with links to sub-pages. I'm trying to make the navigation menu items have the "active" background color not only if they are themselves active, but also if one of their sub-pages is open. Is there any way to implement this? The code for the drop-down menus looks as follows:
#wsite-menus .wsite-menu li:first-child {
border-top: 1px solid #000;
}
#wsite-menus .wsite-menu li a {
padding: 8px;
color: #fff;
background: #2f2f2f;
border: 1px solid #4b4b4b;
border-top: none;
}
#wsite-menus .wsite-menu li a:hover {
background: #4b4b4b;
}
I suspect that the way to bring this about would be to modify the first of the two above blocks of code to read as follows:
#navigation li a:hover,
**#navigation li#active child,**
#navigation li#active a {
background: #104E91;
}
or something similar, but I can't figure out the exact syntax. Is there a way an open child page can make the parent page look active in the navigation menu?
The HTML is as follows:
<div id = "navigation">
<ul class = "wsite-menu-default">
<span id = "Span1" class = "wsite-nav-handle"> style="display: inline;">
<li class="w-menu-item wsite-nav-0" style="position: relative;">
... and so on, there are a number of list items. I guess I should create a separate span that imparts an active background color to a list item, and, on each child page, put that span around the list item that is responsible for the page's parent's menu item.
You didn't show any HTML, so I made up some of my own. I didn't use your tags of the same reason.
HTML:
<nav>
<li>Home</li>
<a href="#">
<li>Dropdown
<div class="dropdown">
<div class="dropdown-inner">
<a>Menu</a>
<a>Number</a>
<a>3</a>
</div>
</li>
</a>
<li>About</li>
</nav>
CSS:
nav li {
list-style:none;
display:inline-block;
text-align:center;
background:#222;
color:#FFF;
width:100px;
padding:10px 20px
}
nav a {
text-decoration: none;
color:#FFF;
}
nav li div.dropdown {
display:block;
position:absolute
}
nav li div.dropdown .dropdown-inner {
right:20px; /* Equal to li padding Y */
width:100px; /* Equal to li width */
padding:10px 20px; /* Equal to li padding X */
background:#333;
top:10px;
position:relative
}
nav li span.dropdown a {
display:block;
}
Codepen: http://codepen.io/anon/pen/bzIGl
The problem you're having is because you're assigning the background color to the <a> tag instead of <li> tag. When you exit a parent <li> item and move down to a child <li> element, you've technically left the <a> and so the background color reverts correctly. If however you apply the background color to the <li> tag, rolling over any child list items will keep the active state on the parent <li> item.