CODEWITHSUNDEEP
htmlcss
DjKillerMemeStar
DjKillerMemeStar

Reputation: 425

HTML/CSS Menu on hover and menu active won't display

I'm building a menu for my site but for some reason the "event" when i hover over a item does not trigger the class to be activated. Also the active class won't display either

Summary: 1.On_Hover wont work 2.Active wont either

The relevant code is here

@font-face {font-family: Futura; src: url('FuturaOriginal.ttf');}
@font-face {font-family: FuturaLight; src: url('FuturaLight.ttf');}
@font-face {font-family: FuturaBold; src: url('FuturaBold.ttf');}
BODY {
    font-family: FuturaLight;
    background: white; color: #333;
    align-content: top;
    margin: 0;
    padding: 0;
    }
.margin {
    margin-left: 300px;
    margin-right: 300px;
}

#primary_nav_wrap
{
	margin-top:100px;
    text-align: center;
    position: fixed;
    width: 100%;
    color: white;
    border-bottom: 5px solid darkgreen;
    background-color: #FFDE46;
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	display: inline-block;
	margin:0;
	padding:0;
    color: darkgreen;
}

#primary_nav_wrap ul a
{
	display:block;
	color: white;
	text-decoration:none;
	font-weight:700;
	font-size:20px;
	line-height:32px;
	padding:0 15px;
	font-family: FuturaBold;
    color: white;
    background-color: darkgreen;

}


#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0;
    color: white;
}

#primary_nav_wrap ul li.current-menu-item
{
	background-color: lawngreen;
    color: white;
}

#primary_nav_wrap ul li:hover
{
	background-color: black;
    color: white;
}

#primary_nav_wrap ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background-color: white;
    color: darkgreen;
	padding:0;
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:200px;
    border: 1px solid #FFDE46;
    color: White;
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px;
    color: White;

}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%;
    color: white;
}

#primary_nav_wrap ul li:hover > ul
{
	display:block;
}

.spacer
{
    width: 100%;
    height: 110px;
}

.side
{
    position: fixed;
    width: 250px;
    border-right-style: solid;
    border-width: 5px;
    height: 100%;
    align-self: left;
    float: left;
}

.main
{
    width: 100%;
    float: left;
}


H1 {
    font-size: 60px;
    margin-top: 0;
    padding-bottom: 50px;
    padding-top: 1px;
    text-align: center;
    list-style-type: none;
    position: fixed;
    width: 100%;
    top: 0;    
    font-family: FuturaBold;
    color: green;
    background-color: #FFDE46;
}

/*Opmaak van je header2*/
H2 {
    font-family: Futura;
    font-size: 40px;
    /*Kleur toevoegen*/
    color: darkgreen;
    /*Tekst centreren*/
     text-align:center;
    }

/*Opmaak header3*/
H3 {
    font-family: Futura;
    /*Kleur toevoegen*/
    font-size:30px;
    color: darkgreen
    }
p.futura20{
    font-family: Futura;
    font-size: 16px
}

p.futura25{
    font-family: Futura;
    font-size: 20px
}

.spacer2
{
    height: 10px;
}

#footer {
    margin-bottom: 0px;
    align-self: bottom;
    height: 200px;
    background-color: #FFDE46;
    position: relative;
}

.scoutsgidsen {
    height: 150px;
    position: absolute;
    left: 300px;
    bottom: 20px;
}

.logo {
    height: 150px;
    position: absolute;
    right: 300px;
    bottom: 20px;
}

.avondlied {
    font-family: Futura;
    font-size: 18px;
    text-align: center;
    font-weight: 800;
}
<!DOCTYPE HTML>
<HTML>
    <HEAD>
        <TITLE>Scouts Permeke</TITLE>
        <link rel="stylesheet" type="text/css" href="siteStyle.css">
    </HEAD>
	<BODY>
		<H1>Scouts Permeke</H1>
        
        <nav id="primary_nav_wrap">
            <ul>
               <li class="current-menu-item"><a href="scouts_permeke_site.html">Home</a></li>
               <li><a href="scouts_news.html">Nieuws</a></li>
              <li><a href="scouts_takken.html">Takken &#x25BC;</a>
                  <ul>
                      <li><a href="scouts_kapoenen.html">Kapoenen (6-8 jaar)</a></li>
                    <li><a href="scouts_kawellen.html">Kawellen (8-11 jaar)</a></li>
                       <li><a href="scouts_jonggivers.html">Jonggivers (11-14 jaar)</a></li>
                       <li><a href="scouts_givers.html">Givers (14-17 jaar)</a></li>
                       <li><a href="scouts_leiding.html">Jin, leiding en VT (+17 jaar)</a></li>
                   </ul>
               </li>
                <li><a href="scouts_activiteiten.html">Activiteiten &#x25BC;</a>
                    <ul>
                        <li><a href="scouts_kapoenena.html">Kapoenen</a></li>
                        <li><a href="scouts_kawellena.html">Kawellen</a></li>
                        <li><a href="scouts_jonggiversa.html">Jonggivers</a></li>
                        <li><a href="scouts_giversa.html">Givers</a></li>
                    </ul>
                </li>
                <li><a href="#">Praktisch &#x25BC;</a>
                    <ul>
                        <li><a href="scouts_taf&toetje.html">Taf & Toetje</a></li>
                        <li><a href="scouts_papierwerk.html">Papierwerk</a></li>
                        <li><a href="scouts_uniform.html">Uniform</a></li>
                        <li><a href="scouts_technieken.html">Technieken</a></li>
                        <li><a href="scouts_jaarthema.html">Jaarthema</a></li>
                        <li><a href="scouts_rituelen.html">Rituelen</a></li>
                        </ul>
                </li>
                <li><a href="scouts_afspraken.html">Algemeen</a></li>
                <li><a href="scouts_over.html">Over</a></li>
                <li><a href="scouts_fotos.html">Foto's</a></li>
                <li><a href="scouts_inschrijven.html">Inschrijven</a></li>
                <li><a href="scouts_verhuur.html">Verhuur</a></li>
                <li><a href="scouts_contact.htmlv">Contact</a></li>
            </ul>
        </nav>

        <div class="spacer">
            &nbsp;
        </div>

        <img src="groepsfoto.jpg" width="100%"" >

        <div style="font-family: Futura">
		    <H2>Welkom op onze vernieuwde site!</H2>
            <H2>Kijk gerust even rond.</H2>
        </div>
            <div class="spacer2"></div>
    </div>
    <div id="footer">
        <img src="logo_Scouts_en_Gidsen_Vlaanderen.png" class="scoutsgidsen"/>
        <img src="logo.png" class="logo"/>
    </div>
    </BODY>
</HTML>

Upvotes: 0

Views: 125

Answers (1)

Johannes
Johannes

Reputation: 67738

You are applying the hover rule to the li, but that's covered by the a elements, therefore the background color change won't be visible. So it's better to applly the hover rule to the a elements:

#primary_nav_wrap ul li a:hover instead of #primary_nav_wrap ul li:hover

Similarly with .current-menu-item(I suppose that's what you mean by "active class":

#primary_nav_wrap ul li.current-menu-item a
{
    background-color: lawngreen;
    color: white;
}


@font-face {font-family: Futura; src: url('FuturaOriginal.ttf');}
@font-face {font-family: FuturaLight; src: url('FuturaLight.ttf');}
@font-face {font-family: FuturaBold; src: url('FuturaBold.ttf');}
BODY {
    font-family: FuturaLight;
    background: white; color: #333;
    align-content: top;
    margin: 0;
    padding: 0;
    }
.margin {
    margin-left: 300px;
    margin-right: 300px;
}

#primary_nav_wrap
{
	margin-top:100px;
    text-align: center;
    position: fixed;
    width: 100%;
    color: white;
    border-bottom: 5px solid darkgreen;
    background-color: #FFDE46;
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	display: inline-block;
	margin:0;
	padding:0;
    color: darkgreen;
}

#primary_nav_wrap ul a
{
	display:block;
	color: white;
	text-decoration:none;
	font-weight:700;
	font-size:20px;
	line-height:32px;
	padding:0 15px;
	font-family: FuturaBold;
    color: white;
    background-color: darkgreen;

}


#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0;
    color: white;
}

#primary_nav_wrap ul li.current-menu-item a
{
	background-color: lawngreen;
    color: white;
}
#primary_nav_wrap ul li a:hover
{
	background-color: black;
    color: white;
}

#primary_nav_wrap ul ul
{
	display:none; 
	position:absolute;
	top:100%;
	left:0;
	background-color: white;
    color: darkgreen;
	padding:0;
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:200px;
    border: 1px solid #FFDE46;
    color: White;
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px;
    color: White;

}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%;
    color: white;
}

#primary_nav_wrap ul li:hover > ul
{
	display:block;
}

.spacer
{
    width: 100%;
    height: 110px;
}

.side
{
    position: fixed;
    width: 250px;
    border-right-style: solid;
    border-width: 5px;
    height: 100%;
    align-self: left;
    float: left;
}

.main
{
    width: 100%;
    float: left;
}


H1 {
    font-size: 60px;
    margin-top: 0;
    padding-bottom: 50px;
    padding-top: 1px;
    text-align: center;
    list-style-type: none;
    position: fixed;
    width: 100%;
    top: 0;    
    font-family: FuturaBold;
    color: green;
    background-color: #FFDE46;
}

/*Opmaak van je header2*/
H2 {
    font-family: Futura;
    font-size: 40px;
    /*Kleur toevoegen*/
    color: darkgreen;
    /*Tekst centreren*/
     text-align:center;
    }

/*Opmaak header3*/
H3 {
    font-family: Futura;
    /*Kleur toevoegen*/
    font-size:30px;
    color: darkgreen
    }
p.futura20{
    font-family: Futura;
    font-size: 16px
}

p.futura25{
    font-family: Futura;
    font-size: 20px
}

.spacer2
{
    height: 10px;
}

#footer {
    margin-bottom: 0px;
    align-self: bottom;
    height: 200px;
    background-color: #FFDE46;
    position: relative;
}

.scoutsgidsen {
    height: 150px;
    position: absolute;
    left: 300px;
    bottom: 20px;
}

.logo {
    height: 150px;
    position: absolute;
    right: 300px;
    bottom: 20px;
}

.avondlied {
    font-family: Futura;
    font-size: 18px;
    text-align: center;
    font-weight: 800;
}
<!DOCTYPE HTML>
<HTML>
    <HEAD>
        <TITLE>Scouts Permeke</TITLE>
        <link rel="stylesheet" type="text/css" href="siteStyle.css">
    </HEAD>
	<BODY>
		<H1>Scouts Permeke</H1>
        
        <nav id="primary_nav_wrap">
            <ul>
               <li class="current-menu-item"><a href="scouts_permeke_site.html">Home</a></li>
               <li><a href="scouts_news.html">Nieuws</a></li>
              <li><a href="scouts_takken.html">Takken &#x25BC;</a>
                  <ul>
                      <li><a href="scouts_kapoenen.html">Kapoenen (6-8 jaar)</a></li>
                    <li><a href="scouts_kawellen.html">Kawellen (8-11 jaar)</a></li>
                       <li><a href="scouts_jonggivers.html">Jonggivers (11-14 jaar)</a></li>
                       <li><a href="scouts_givers.html">Givers (14-17 jaar)</a></li>
                       <li><a href="scouts_leiding.html">Jin, leiding en VT (+17 jaar)</a></li>
                   </ul>
               </li>
                <li><a href="scouts_activiteiten.html">Activiteiten &#x25BC;</a>
                    <ul>
                        <li><a href="scouts_kapoenena.html">Kapoenen</a></li>
                        <li><a href="scouts_kawellena.html">Kawellen</a></li>
                        <li><a href="scouts_jonggiversa.html">Jonggivers</a></li>
                        <li><a href="scouts_giversa.html">Givers</a></li>
                    </ul>
                </li>
                <li><a href="#">Praktisch &#x25BC;</a>
                    <ul>
                        <li><a href="scouts_taf&toetje.html">Taf & Toetje</a></li>
                        <li><a href="scouts_papierwerk.html">Papierwerk</a></li>
                        <li><a href="scouts_uniform.html">Uniform</a></li>
                        <li><a href="scouts_technieken.html">Technieken</a></li>
                        <li><a href="scouts_jaarthema.html">Jaarthema</a></li>
                        <li><a href="scouts_rituelen.html">Rituelen</a></li>
                        </ul>
                </li>
                <li><a href="scouts_afspraken.html">Algemeen</a></li>
                <li><a href="scouts_over.html">Over</a></li>
                <li><a href="scouts_fotos.html">Foto's</a></li>
                <li><a href="scouts_inschrijven.html">Inschrijven</a></li>
                <li><a href="scouts_verhuur.html">Verhuur</a></li>
                <li><a href="scouts_contact.htmlv">Contact</a></li>
            </ul>
        </nav>

        <div class="spacer">
            &nbsp;
        </div>

        <img src="groepsfoto.jpg" width="100%"" >

        <div style="font-family: Futura">
		    <H2>Welkom op onze vernieuwde site!</H2>
            <H2>Kijk gerust even rond.</H2>
        </div>
            <div class="spacer2"></div>
    </div>
    <div id="footer">
        <img src="logo_Scouts_en_Gidsen_Vlaanderen.png" class="scoutsgidsen"/>
        <img src="logo.png" class="logo"/>
    </div>
    </BODY>
</HTML>

Upvotes: 1

Related Questions