0
私は自分のサイトのメニューを構築していますが、何らかの理由でアイテムの上にマウスを移動してもクラスが起動されない場合があります。文句を言わない 2.Active文句を言わないHTML/CSSアクティブなホバーとメニューのメニューは表示されません
関連するコードはここにある
@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
{
\t margin-top:100px;
text-align: center;
position: fixed;
width: 100%;
color: white;
border-bottom: 5px solid darkgreen;
background-color: #FFDE46;
}
#primary_nav_wrap ul
{
\t list-style:none;
\t position:relative;
\t display: inline-block;
\t margin:0;
\t padding:0;
color: darkgreen;
}
#primary_nav_wrap ul a
{
\t display:block;
\t color: white;
\t text-decoration:none;
\t font-weight:700;
\t font-size:20px;
\t line-height:32px;
\t padding:0 15px;
\t font-family: FuturaBold;
color: white;
background-color: darkgreen;
}
#primary_nav_wrap ul li
{
\t position:relative;
\t float:left;
\t margin:0;
\t padding:0;
color: white;
}
#primary_nav_wrap ul li.current-menu-item
{
\t background-color: lawngreen;
color: white;
}
#primary_nav_wrap ul li:hover
{
\t background-color: black;
color: white;
}
#primary_nav_wrap ul ul
{
\t display:none;
\t position:absolute;
\t top:100%;
\t left:0;
\t background-color: white;
color: darkgreen;
\t padding:0;
}
#primary_nav_wrap ul ul li
{
\t float:none;
\t width:200px;
border: 1px solid #FFDE46;
color: White;
}
#primary_nav_wrap ul ul a
{
\t line-height:120%;
\t padding:10px 15px;
color: White;
}
#primary_nav_wrap ul ul ul
{
\t top:0;
\t left:100%;
color: white;
}
#primary_nav_wrap ul li:hover > ul
{
\t 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>
\t <BODY>
\t \t <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 ▼</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 ▼</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 ▼</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">
</div>
<img src="groepsfoto.jpg" width="100%"" >
<div style="font-family: Futura">
\t \t <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>
質問のうち1部はソートされていますが、アクティブなメニューについてはどうですか？それは同じ問題ですか？ –
はい - 私の拡張答えを参照 – Johannes
それは、おかげでたくさんのトリックでした！ –