ブロガーのナビバー

Question

私のブログでカスタムメニューバーを作成しようとしていますが、ドロップダウンメニューが正しく表示されず、ホバーの背景を変更できません。また、メニューのアクティブなクラスを切り替える方法も学びたいと思います。カスタムHTML/JSスクリプトプラグインを使用してメニューを追加しました。コードはここにあります。何を意味するのかを理解するために、私のブログ、www.tamilegnr.blogspot.inを調べることができます。

<center><div style="max-width:1280px;"><ul> 
 
    <li><a class="active" style="font-size:18px;" href="https://tamilegnr.blogspot.in">Home</a></li> 
 
<li class="dropdown"><a class="dropbtn" style="font-size:18px;" href="https://tamilegnr.blogspot.in/2015/07">Posts</a> 
 
<div class="dropdown-content"> 
 
<a href="https://tamilegnr.blogspot.in/search/label/Books">Books</a> 
 
<a href="https://tamilegnr.blogspot.in/search/label/Notes">Notes</a> 
 
<a href="https://tamilegnr.blogspot.in/search/label/Projects">Projects</a> 
 
<a href="https://tamilegnr.blogspot.in/search/label/Softwares">Softwares</a> 
 
</div> 
 
</li> 
 
    <li><a style="font-size:18px;" href="http://tamilengineers.blogspot.in/p/blog-page_20.html">Downloads</a></li> 
 
    <li><a style="font-size:18px;" href="http://tamilengineers.blogspot.in/p/anime-seven-deadly-sins-nanatsu-no.html">Anime</a></li> 
 
</ul> 
 

 
<style> 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #000; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover:not(.active) { 
 
    background-color: #111; 
 
} 
 

 
.active { 
 
    background-color: #4CAF50; 
 
} 
 
li.dropdown { 
 
    display: block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #000; 
 
    min-width: 160px; 
 
} 
 

 
.dropdown-content a { 
 
    color: white; 
 
    padding: 10px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: center; 
 
} 
 

 
.dropdown-content a:hover {background-color: #111;} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
.dropbtn { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
.dropdown:hover .dropbtn { 
 
    background-color: #111; 
 
} 
 
</style> 
 
</div></center>

私はホバーの背景とすべてを変更しようとしましたが、それは、それは全体のテンプレートでのみ編集可能ですので、多分変更does notの

、イムあまりにもわかりません。ドロップダウンはここでは機能しませんが、別々にテストするとうまく動作します。だから私は理由とそれを修正する方法を知りたいです。ありがとうございます

Answer 1

1. アクティブにするタグにclass="active"インラインCSSを追加してください。