locked
hover not working RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1450801863 posted

    Not sure why my hover code is not working:

    html:

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> How to create the mega dropdown navigation bar</title>
	<link rel="stylesheet" href="styles.css">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
	<div class="container">
		<nav class="nav-bar">
			<ul>
				<li>Menu
					<div class="mega-menu">
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
						
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
						
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
						
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
					</div>
				</li>
				<li>Menu
					<div class="mega-menu">
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
						
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
						
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
						
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
					</div>
				</li>
				<li>Menu
					<div class="mega-menu">
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
						
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
						
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
						
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
					</div>
				</li>
				<li>Menu
					<div class="mega-menu">
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
						
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
						
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
						
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
					</div>
				</li>
				<li>Menu
					<div class="mega-menu">
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
						
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
						
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
						
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
					</div>
				</li>
				<li>Menu
					<div class="mega-menu">
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
						
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
						
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
						
						<div class="inner-mega-menu">
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
							<p>mega-menu</p>
						</div>
					</div>
				</li>
			</ul>
		</nav>
		
		<div class="header-banner"></div>
	</div>
</body>
</html>

    css:

    @import url('https://fonts.googleapis.com/css?family=Open+Sans');

*{
		margin:0;
		padding: 0;
}

body{
		font-family: 'Open Sans', sans-serif;
}

.nav-bar{
		width: 100%;
		background: #2c3e50;
		height: 75px;
		padding: 10px 0;
		box-sizing; border-box;
		border-bottom: 1px solid #1a252f;
}

.nav-bar ul{
		width: 780px;
		height: 100%;
		margin: 0 auto;
		list-style: none;
		text-transform: uppercase;
		font-weight: bold;
		letter-spacing: 2px;
		;
}

.nav-bar ul li{
		width: 120px;
		float: left;
		text-align: center;
		padding: 15px 0;
		color: #fff;
		margin-right: 10px;
		cursor: pointer;
		transition: all 0.4s ease;
}

.nar-bar ul li:last-child{
		margin-right: 0;
		
}

.nar-bar ul li:hover{
		color: #18bc9c;		
}

.nar-bar ul li:hover .mega-menu{
		color: #18bc9c;
}

.nar-bar ul li .mega-menu p:hover{
	color: #18bc9c;
}

.header-banner{
		background: #18bc9c;
		width: 100%;
		height: 350px;	
}

/* mega menu */
.mega-menu{
		;
		top: 65px;
		left: 0;
		width: 750px;
		height: 250px;
		background: #2c3e50;
		transition: all 0.4s ease;
		padding: 40px;
		box-sizing: border-box;
		visibility: hidden;
		opacity: 0;
}

.inner-mega-menu{
		width: 24%;
		float: left;
		margin-right: 1%;	
}

.inner-mega-menu:last-child{
		margin-right: 0%;
		
}

.inner-mega-menu p{
		padding: 10px 0;
		transition: all 0.4s ease;
}

.nav-bar ul li:hover .mega-menu{
		visibility: visible;
		opacity: 1;
}

    Its not giving any errors in chrome just not highlighting when i hover. 

    Tuesday, January 29, 2019 5:50 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User839733648 posted

    Hi mholmesAHA,

    According to your description, it seems that there is no nar-bar(but nav-bar) class in your html.

    My guess is that you've wrongly spelled.

    You just have to change 

            .nar-bar ul li:hover {
            color: #18bc9c;
        }

    to

            .nav-bar ul li:hover {
            color: #18bc9c;
        }

    And the hoverd item will highlight.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 30, 2019 9:44 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User2103319870 posted

    Its not giving any errors in chrome just not highlighting when i hover.

    If you want the main header to highlight then add the below css. Change the highlighting color as per your design

    .nav-bar ul li:hover{
		visibility: visible;
		opacity: 1;
        background: Green;
}
    Tuesday, January 29, 2019 6:36 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User839733648 posted

    Hi mholmesAHA,

    According to your description, it seems that there is no nar-bar(but nav-bar) class in your html.

    My guess is that you've wrongly spelled.

    You just have to change 

            .nar-bar ul li:hover {
            color: #18bc9c;
        }

    to

            .nav-bar ul li:hover {
            color: #18bc9c;
        }

    And the hoverd item will highlight.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 30, 2019 9:44 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-857013053 posted

    <style>

    .nav-bar ul li .mega-menu .inner-mega-menu : hover

    {

    color : blue;

    }

    </style>

    Monday, May 13, 2019 5:37 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1151440187 posted
     try this:
    .nav-bar ul li:hover {
            color: green;
        }
    Monday, July 8, 2019 5:38 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-857013053 posted
    .nar-bar ul li .mega-menu:hover {
		color: #18bc9c;
}
    Saturday, August 10, 2019 4:15 AM