私はあなたがそれを押さえたときに下の矢印を示すメニューを持っているが、あなたがそれを押したときにも矢印を表示したい。ここでアクティブなメニューを作りなさい
はcodepenのコードです:https://codepen.io/ouchie/pen/gMMegZ
HTML
<div id="menu">
<ul>
<li><a href="index.html"><img src="Image/home-128.png" width="27" height="27" id="menu-img" />Startseite</a></li>
<li><a href="Pages/Anfahrt.html"><img src="Image/Map.png" width="27" height="27" id="menu-img" />Anfahrt</a></li>
<li><a href="Pages/Kontakt.html"><img src="Image/Contact.png" width="27" height="27" id="menu-img" />Kontakt</a></li>
<li><a href="Pages/Speisekarte.html"><img src="Image/Menu.png" width="27" height="27" id="menu-img" />Speisekarte</a></li>
<li><a href="Pages/Galerie.html"><img src="Image/Gallery.png" width="27" height="27" id="menu-img" />Galerie</a></li>
</ul>
</div>
は、これは私が使用するCSSです。私はこれを作っていなかったが、私はあなたが追加することができ、インターネット
CSS
#menu {
position:relative;
list-style:none;
float:left;
width:800px;
height:60px;
text-align:center;
}
#menu li {
float:left;
text-decoration:none;
display:block;
font-family:Franklin Gothic Heavy, Gadget, sans-serif;
height:50px;
text-align:center;
line-height:50px;
}
#menu ul{
display:inline-block;
list-style-type: none;
}
#menu li a {
position:relative;
display:inline;
padding:11px 27px;
overflow:hidden;
text-decoration:none;
text-align:center;
font-family:'Lucida Sans Unicode','Lucida Grande','Lucida Sans','DejaVu Sans Condensed',sans-serif;
text-transform:capitalize;
font-weight:bold;
color:#000;
border-bottom:7px solid #959393;
background:#979393;
background-image: -webkit-linear-gradient(top, #ffffff, #EDF1F2);
background-image: -moz-linear-gradient(top, #ffffff, #EDF1F2);
background-image: -ms-linear-gradient(top, #ffffff, #EDF1F2);
background-image: -o-linear-gradient(top, #ffffff, #EDF1F2);
background-image: linear-gradient(to bottom, #ffffff, #EDF1F2);
-moz-transition:all 0.25s ease;
-webkit-transition:all 0.25s ease;
-o-transition:all 0.25s ease;
transition:all 0.25s ease;
opacity:0.68;
}
#menu li:nth-child(2n-1) a:hover {
border-bottom-color:#FF0000;
}
#menu li:nth-child(2n) a:hover {
border-bottom-color:#FF0000;
}
#menu li:nth-child(2n-1) a:hover::before {
position:absolute;
content:'';
width:0;
height:0;
border-left:11.5px solid transparent;
border-right:11.5px solid transparent;
border-bottom:11.5px solid #FF0000;
right:45%;
bottom:0;
}
#menu li:nth-child(2n) a:hover::before {
position:absolute;
content:'';
width:0;
height:0;
border-left:11.5px solid transparent;
border-right:11.5px solid transparent;
border-bottom:11.5px solid #FF0000;
right:45%;
bottom:0;
}
#menu li a:hover {
color:#FF0000;
text-shadow:inset 0 0 8px 0 red;
-moz-transition:all 0.25s ease;
-webkit-transition:all 0.25s ease;
-o-transition:all 0.25s ease;
transition:all 0.25s ease;
}
チェックアウト:target' –
Iそれは既にやったが、うまくいかなかった。それをどこに追加するか分かりません。 – Joey
申し訳ありませんが、私は ':target'を意味しました:https://css-tricks.com/on-target/ –