I've managed to create a drop-down menu using CSS and HTML. The drop-down menu will appear when mouse-hovered.
I want the drop-down menu to disappear 1 second after the mouse is hovered out. For this, I've tried adding
transition: display 1s;
into .dropdown:hover .dropdown_list, .dropdown_list:hover but it doesn't do anything.
My Code:
* {
margin: 0;
padding: 0;
}
header {
position: fixed;
height: 35px;
width: 100%;
background: black;
}
.top-container {
margin-top: 7px;
}
/* Code for drop-down list */
.dropdown {
margin-left: 100px;
display: inline-block;
color: #FFF;
}
.dropdown:hover {
text-shadow:0px 4px 7px white;
}
.dropdown:hover .dropdown_list,
.dropdown_list:hover {
display: block;
top:100%;
transition: display 1s; /* Doesn't work */
}
.dropdown_list {
list-style: none;
display: none;
position: absolute;
color: red;
width: 100px;
}
.dropdown_list li {
background: yellow;
}
li {
border: 1px solid black;
}
<body>
<header>
<div class="top-container">
<div class="dropdown">Dropdown ❱
<ul class="dropdown_list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
</header>
</body>
How do I make a one second delay for the drop-down menu to disappear after hovering out? Is this possible without any jQuery or Javascript?
Transition only applies to properties with numerical values. Display uses discrete values, so it cannot receive any transition effects.
With just CSS you can use top or similar properties to 'hide' the drop-down menu (jsfiddle).
.dropdown:hover .dropdown_list,
.dropdown_list:hover {
top: 100%;
transition: none;
}
.dropdown_list {
top: -10000%;
display: block;
transition: top 1s step-end;
}
Related
I am working on a project and I have created one navbar. In this dropdown menu also present. In this dropdown, the hover effect is there.
Now I am trying to click event and open and close dropdown's submenu. But not working. I am using only HTML and CSS.
Now on hover dropdown is open. But I am trying to do:
open and close drop-down when I click.
My code is:
/* define a fixed width for the entire menu */
.navigation {
width: 300px;
}
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
max-height: 200px;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #ddd;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #993;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<nav class="navigation">
<ul class="mainmenu">
<li>Home</li>
<li>About</li>
<li>Products
<ul class="submenu">
<li>Tops</li>
<li>Bottoms</li>
<li>Footwear</li>
</ul>
</li>
<li>Contact us</li>
</ul>
</nav>
You can use a checkbox (<input type="checkbox">) with the adjacent sibling combinator (+) to toggle the sub menu. Convert the link (a) to a label. Set the label's for attribute to the input's id, and hide the input using display: none.
/* define a fixed width for the entire menu */
.navigation {
width: 300px;
}
/* reset our lists to remove bullet points and padding */
.mainmenu,
.submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a,
.mainmenu label {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
.mainmenu input {
display: none;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu :checked+.submenu {
display: block;
max-height: 200px;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #ddd;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #993;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<nav class="navigation">
<ul class="mainmenu">
<li>Home</li>
<li>About</li>
<li><label for="products">Products</label><input type="checkbox" id="products">
<ul class="submenu">
<li>Tops</li>
<li>Bottoms</li>
<li>Footwear</li>
</ul>
</li>
<li>Contact us</li>
</ul>
</nav>
This is your solution
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.navigation{
width: 300px;
}
.mainmenu,
.submenu {
list-style: none;
padding: 0;
margin: 0;
}
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
.mainmenu a:hover {
background-color: #C5C5C5;
}
/**/
.dropbtn {
background-color: #ccc;
color: #000;
border: none;
cursor: pointer;
padding: 10px;
display: block;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #ccc;
}
.dropbtn:hover{
background-color: #C5C5C5;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ddd;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 300px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #993;}
.show {display: block;}
<nav class="navigation">
<ul class="mainmenu">
<li><a>Home</a></li>
<li><a>About</a></li>
<div class="dropdown">
<li onclick="myFunction()" class="dropbtn">Products</li>
<div id="myDropdown" class="dropdown-content">
<a>Tops</a>
<a>Bottoms</a>
<a>Footwear</a>
</div>
</div>
<li>Contact us</li>
</ul>
</nav>
u can achieve with javascript and this is right solution
Its been a while - but I found myself a new exiting hobby in web development, and I am hoping that you can help me overcome the following issue:
I am working on a personal website. Content etc. is all preliminary. My main focus is the vertical menu on the left hand side. While I am pretty happy with the appearance so far, there are still some questions:
1) I had to set the transition as ease out to >0s, so that I have enough time between the main-menu hover and the hover over the sub-menu. Because of this, if I hover between main-menu items, they will briefly overlap due to the phase out. Is there a way to work around this?
(the focus selector might be an option, but that requires to click the menu item, and I prefer the hover)
2) The sub-menu is aligned to the top of the li of the main-menu. Because of that, the last item's sub (Testing) exceeds the boundaries of the page, giving whitespace below the page. Is there a way to make the sub-menu shift up if it presses against the edge of the overall body?
I probably could give it a different tag and design it differently, am I am hoping there is a more general solution.
3) Minor issue: When switching from main-menu hover to sub-menu hover, the main-icon "blinks" very briefly. Is that normal behavior? Certainly isn't pretty.
4) Last but not least: As this is my first time doing a website, I would be more than grateful to get your general feedback on inefficiencies in the code, so I can be more lean in the future.
(see updated fiddle below - full code removed to save space.)
Thanks for your help!
EDIT
THanks for your answers - issue #1 has been solved using the approaches you outlined!
However, the last submenu still gives me a bit a headache.
If I use the "last-child" selector, and the code added below, it will not change anything. However, if I give the last "bubble" a different tag, using the exact same code, the bubble will align to the bottom of the last main-menu item, but the containing UL remains defiant.
As you can see from the original CSS, the last "relative" is the main-menu IL, so shouldn't the submenu and the containing UL both align to the bottom of their respective parent/grandparent?
using a dedicated, different tag for the last-child "bubble_last
Using the last-child selector
and the accompanying new code (updated fiddle with full code: Heres the Fiddle ...use large screen for the result to see the alignment issue):
.navigation ul li:last-child {
border: solid orange;
}
.navigation .bubble_last{
position: absolute;
margin-top: 0%;
padding: 0px;
left: 60px;
bottom: 0px;
width: 400px;
height: 200px;
border: solid red;
}
.navigation .bubble_last ul{
position: absolute;
left: 0;
bottom: : 0px;
margin-top: 0px;
padding: 0px;
width: 20vw;
height: 100px;
font-size: 15px;
font-size: 1.2vw;
font-weight: 400;
border: solid blue;
margin-left: 28%;
display: block;
}
.navigation .bubble_last ul li {
list-style: none;
background-color: none;
border-radius: 3px;
height: 2vw;
line-height: 1.2vw;
width: 20vw;
position: relative;
padding-top: 0px;
margin: 0;
padding: 0;
}
Instead of adding a transition delay on .bubble, you just need to make the .bubble class wide enough (and start behind the main li trigger with a left: 60px) so that the hover will be continuous:
.navigation .bubble {
position: absolute;
margin-top: 0%;
padding: 0px;
left: 60px;
top: 0px;
width: 200px;
height: 100%;
background-color: none;
}
Then just add a margin-left to the submenu:
.navigation ul li ul {
margin-left: 20px;
}
To fix your second issue, simply add the following CSS to make the last submenu positioned relative to the bottom of the nav item:
ul li ul.subm:last-child {
top: auto;
bottom:0px;
}
Updated Demo: JSFiddle
How about this? Adjust your navigation to use the nav element, set it to use flex box, adjust that so it fits the height of your page, and then adjust the transition effects so they transition in and out properly.
I hope this helps.
#import url("http://fonts.googleapis.com/css?family=Roboto");
* {
border: none;
margin: 0;
padding: 0;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: Roboto Condensed;
box-sizing: border-box;
}
.landing {
display: table;
margin: auto;
width: 100%;
height: 100%;
background: url("https://imageshack.com/i/poXkyeIYj") 50% 50% no-repeat;
background-size: cover;
top: 0;
position: relative;
z-index: 1;
}
.landing .welcome {
margin: 10px;
width: 89%;
color: #FFF;
text-align: center;
display: table-cell;
vertical-align: middle;
position: absolute;
left: 10%;
top: 30%;
}
#mug {
background: url("https://imageshack.com/i/pmJaAuFkj") 50% 50% no-repeat;
background-size: cover;
border: solid 3px #FFF;
/*max-width: 20%;
max-height: 20%; */
width: 150px;
height: 150px;
margin: auto;
border-radius: 100%;
}
nav {
width: 50px;
height: 100%;
flex: 1;
display: flex;
justify-content: center;
flex-direction: column;
}
nav img {
max-width: 50px;
max-height: 50px;
}
.nav ul {
*zoom: 1;
list-style: none;
margin: 0;
padding: 0;
-ms-flex: 0 100px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
justify-content: space-between;
margin-top: 0px;
padding: 0px;
width: 11vw;
height: auto;
font-size: 15px;
font-size: 1.2vw;
font-weight: 400;
border-color: none;
}
nav ul li {
background-color: rgba(222, 225, 229, 0.8);
border-radius: 3px;
width: 100%;
font-size: 15px;
font-size: 1.2vw;
font-weight: 900;
}
.nav ul:before,
.nav ul:after {
content: "";
display: block;
}
.nav ul:after {
clear: both;
}
.nav ul>li {
position: relative;
}
.nav a {
display: block;
padding: 10px 20px;
line-height: 1.2em;
color: #fff;
border-left: 1px solid #595959;
text-decoration: none;
color: #FFF;
}
.nav a:hover {
text-decoration: none;
background-color: rgba(242, 93, 38, 0.8);
}
.nav li ul {
background: #273754;
}
.nav li ul li {
width: 200px;
}
.nav li ul a {
border: none;
}
.nav li ul a:hover {
background: rgba(0, 0, 0, 0.2);
}
.nav li ul {
position: absolute;
left: 11vw;
top: 0;
z-index: 1;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: 200ms ease;
-moz-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.nav ul>li:hover ul {
visibility: visible;
opacity: 1;
filter: alpha(opacity=100);
}
span.caption {
display: none;
}
<body>
<div class="landing">
<div class="welcome">
<div id="mug">
</div>
<h1>Welcome to my personal Website!</h1>
<h2>On this site you will find a information about the person, the profession and other stuff about me. Enjoy!</h2>
</div>
<!-- cleaned up the navigation, nested it within the rest of the page, and adjusted the css -->
<nav class="nav">
<ul>
<li>
<img src="https://imageshack.com/i/potj2pVwp"> <span class="caption">Home</span>
</li>
<li>
<img src="https://imageshack.com/i/pntQ9nVMp"><span class="caption">About Me</span>
<ul>
<li>What I do</li>
<li>Motorcycling</li>
<li>Music</li>
</ul>
</li>
<li>
<img src="https://imageshack.com/i/po4WFq6Yp"><span class="caption">Professional</span>
<ul>
<li>Current Employment</li>
<li>Working Experience</li>
<li>Education</li>
</ul>
</li>
<li>
<img src="https://imageshack.com/i/pmcfm7Kbp"> <span class="caption">Projects</span>
<ul>
<li>Subnav Item</li>
<li>Subnav Item</li>
<li>Subnav Item</li>
</ul>
</li>
<li>
<img src="https://imageshack.com/i/pnM0Fmgrp"> <span class="caption">Misc</span>
<ul>
<li>Subnav Item</li>
<li>Subnav Item</li>
<li>Subnav Item</li>
</ul>
</li>
<li>
<img src="https://imageshack.com/i/poqRnk6ap"> <span class="caption">Testing</span>
<ul>
<li>Subnav Item</li>
<li>Subnav Item</li>
<li>Subnav Item</li>
</ul>
</li>
<li>
<img src="https://imageshack.com/i/pmc8tts9p"> <span class="caption">Contact</span>
</li>
</ul>
</nav>
</div>
I have created a CSS dropdown menu based on four images. When I hover over the first one the three others appear using :hover on the first <li> which sets opacity of the three others to 1. However, I cannot accomplish that the three others remain present when I scroll down to them.
Here is the live site and this is the CSS and HTML:
ul {
list-style: none;
width: 200px;
padding-left: 30px;
margin: 0px;
border: none;
float: left;
margin-right: 5px;
z-index: 1;
position: relative;
}
li#dropdown {
height: 510px;
padding: 0px;
margin: 0px;
opacity: 0;
transition: all 0.5s;
}
li:hover + li#dropdown {
opacity: 1;
/* display the dropdown */
}
li#dropdown:hover li#dropdown {
opacity: 1;
/* display the dropdown */
}
<ul>
<li id="noten">
<img id="noten" src="http://www.placehold.it/100">
</li>
<li id="dropdown">
<img id="pitten" src="http://www.placehold.it/100" naptha_cursor="region">
<img id="muesli" src="http://www.placehold.it/100" naptha_cursor="text">
<img id="fruit" src="http://www.placehold.it/100" naptha_cursor="text">
</li>
</ul>
You need to place the hover state on the dropdown element using: li:hover + li#dropdown, li#dropdown:hover.
Also, here are two examples that prevent the menu being displayed unwanted when the mouse is hovered underneath your dropdown.
Working Examples
#1 - using pointer-events
Best thing - transition fade-in and fade-out
Limitation - supported in all major browsers and IE 11 - If you must have IE10 and below support, this is possible. Depending on your requirements, this may not be a limitation. Here are two questions that discuss various alternatives for IE 10 and below - Question One and Question two.
pointer-events: none on the ul prevents the dropdown activating when it is not visible. It is cancelled on hover with pointer-events: auto
Hover over the image and the images that appear underneath on hover
ul {
list-style: none;
width: 200px;
padding-left: 30px;
margin: 0px;
border: none;
float: left;
margin-right: 5px;
z-index: 1;
position: relative;
pointer-events: none;
}
li#dropdown {
height: 510px;
padding: 0px;
margin: 0px;
opacity: 0;
transition: all 0.5s;
position: absolute;
}
li#noten {
pointer-events: auto;
}
li:hover + li#dropdown, li#dropdown:hover {
opacity: 1;
pointer-events: auto;
/* display the dropdown */
}
<ul>
<li id="noten">
<img id="noten" src="http://www.placehold.it/100">
</li>
<li id="dropdown">
<img id="pitten" src="http://www.placehold.it/100" naptha_cursor="region">
<img id="muesli" src="http://www.placehold.it/100" naptha_cursor="text">
<img id="fruit" src="http://www.placehold.it/100" naptha_cursor="text">
</li>
</ul>
#2 Using translate to slide drop down up and then down on hover
Limitation - opacity does not fade out, only in
ul {
list-style: none;
width: 200px;
padding-left: 30px;
margin: 0px;
border: none;
float: left;
margin-right: 5px;
z-index: 1;
position: relative;
}
li#dropdown {
height: 510px;
padding: 0px;
margin: 0px;
opacity: 0;
transition: opacity 0.5s;
position: absolute;
transform: translateY(-100%);
}
li:hover + li#dropdown, li#dropdown:hover {
opacity: 1;
transform: translateY(0);
/* display the dropdown */
}
<ul>
<li id="noten">
<img id="noten" src="http://www.placehold.it/100">
</li>
<li id="dropdown">
<img id="pitten" src="http://www.placehold.it/100" naptha_cursor="region">
<img id="muesli" src="http://www.placehold.it/100" naptha_cursor="text">
<img id="fruit" src="http://www.placehold.it/100" naptha_cursor="text">
</li>
</ul>
Approximately so:
<div class="menu_img_container">
<img src="pic.jpg">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<style>
.menu_img_container
{
display: inline;
position: relative;
}
.menu_img_container ul
{
display: none;
position: absolute;
top: 50px;
left: 0;
}
.menu_img_container:hover ul
{
display: block;
}
</style>
You can prolong the hover effect using transitions http://jsfiddle.net/zn6j5xvv/
HTML
<div id="a">a
<div id="b">
<img src="http://placekitten.com/300/301"/>
</div>
CSS
#a{
width:50px;
height:50px;
background-color:green;
transition:0s 100s;
}
#b{
width:200px;
height:200px;
opacity:0;
transition:0s 100s;
}
#a:hover #b{
opacity:1;
transition:0s;
}
this should do the trick, just update these three parts of your css
li#dropdown {
height: 510px;
padding: 0px;
margin:0px;
display:none;
transition: all 0.5s;
}
li:hover + li#dropdown {
display: block; /* display the dropdown */
}
li#dropdown:hover{
display:block;
}
It's a little tricky, because you want to have a nice opacity transition. It would be much simpler with just display: none. But we can still make it work with transition if you use combination of position: absolute for hiding items and opacity for transition.
Move :hover selector from li to entire ul
ul:hover > li#dropdown {
opacity: 1;
top: auto;
}
li#dropdown {
height: 510px;
padding: 0px;
margin: 0px;
opacity: 0;
transition: all 0.5s;
position: absolute; /* move items far off the screen */
top: -1000px;
}
And it should work. So the idea is that #dropdown menu is moved outside the screen with position absolute, which make it impossible to hover over "invisible" items, so they don't appear on white area hover. However on the first item hover you bring dropdown back with top: auto which allows hovering it again. Transition will also work.
I'm using top: 100% to push the sub-menu dropdown below the main navigation bar on hover but in Firefox the menu is pushed below the border of the menu causing a 1px gap. In webkit browsers it works the way I'm wanting it to, where it shows the sub-menu with no gap in between. I'm using 100% to avoid hard coding in a value.
I created a codepen for testing. I set the border around the menu to red to make it easier to see the issue. The second nav is just showing the hover state.
update
Without display: table; on the .nav-main element, the 1px gap goes away, but I'm using it so I can add display: table-cell; to the nav list items to spread them out and fill the entire nav. Any ideas on how to get around that?
html
<nav role="navigation">
<ul class="nav-main">
<li>Link One</li>
<li>
Link Two
<ul class="sub-menu">
<li>Dropdown Link One</li>
<li>Dropdown Link Two</li>
<li>Dropdown Link Three</li>
</ul>
</li>
<li>Link Three</li>
<li>Link Four</li>
</ul>
</nav>
scss
$pink: #ed2490;
a {
text-decoration: none;
}
.nav-main {
position: relative;
display: table;
margin: 0;
padding: 0;
width: 100%;
border: 1px solid lighten(black, 22%);
border-radius: 4px;
background: lighten(black, 8%);
#include background(linear-gradient(bottom, lighten(black, 8%), lighten(black, 36%)));
font-weight: 500;
line-height: 1;
> li {
display: table-cell;
text-align: center;
position: relative;
&:hover {
.sub-menu {
top: 100%;
}
a {
background: lighten(black, 18%);
background: rgba(black, 0.25);
}
}
}
a {
display: block;
color: white;
padding: 15px 10px;
&:hover,
&:focus {
background: lighten(black, 18%);
background: rgba(black, 0.25);
}
}
.sub-menu { // dropdown
position: absolute;
top: -999px;
z-index: 10;
margin: 0;
padding: 0;
width: 200px;
background: lighten(black, 4%);
li {
border-top: 1px solid lighten(black, 18%);
&:first-child {
border-top: 0;
}
}
a:hover {
background: $pink;
}
}
}
// For example only
.styleguide-dropdown {
padding: 40px 20px 130px;
}
.nav-main {
border-color: red;
.psuedo-hover {
a {
background: lighten(black, 18%);
background: rgba(black, 0.25);
}
.sub-menu {
top: 100%;
.psuedo-hover {
background: $pink;
}
}
}
}
shudder, anything with display: table-* is inherently going to be very hard to style consistently across browsers.
But, that said, its really not your issue. The following fixes both work:
.submenu { display:none;}
:hover > .submenu { display: block;}
or
.submenu { height: 0; overflow:hidden }
:hover > .submenu { height: auto; }
And either of those should be better for reflow/repaint/re-render than crazy shifts in top. Also they will be more robust in case you ever wanted to re-use that nav lower on a page, without just "hiding" things by sending them up with a negative top.
Cheers.
Removing the 1px border around ul solves the problem; then you can add top and bottom borders to each li. Though the border-radius won't be calculated the same way.
I believe the reason is that the height of ul is more than the height of li with this 2px of border and so 100% of the height of li isn't enough... but I'm really not sure of this one.
Here's a working demo: http://codepen.io/anon/pen/jsBEt
Is it possible to achieve the same effect found here: www.lutmedia.com simply using CSS3 and HTML5...and not jquery..? Where the body background color changes on hover over the list item links..?
Yes, you could get an effect like that with pure CSS, but it won't be the body changing background, but a last list item in that menu which has position: fixed and covers the entire page.
QUICK DEMO
Relevant HTML:
<ul class='menu'>
<li><a href='#'>contact</a></li>
<li><a href='#'>blog</a></li>
<!-- and so on, menu items -->
<li class='bg'></li>
</ul>
Relevant CSS:
.menu li { display: inline-block; }
.menu li:first-child a { color: orange; }
.menu li:nth-child(2) a { color: lime; }
/* and so on for the other menu items */
.menu:hover li a { color: black; }
.menu li a:hover { color: white; }
.bg {
position: fixed;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: dimgrey;
transition: .5s;
pointer-events: none;
}
.menu li:first-child:hover ~ .bg { background: orange; }
.menu li:nth-child(2):hover ~ .bg { background: lime; }
/* and so on for the other menu items */