ボタンナビゲーションのスタイル設定

Question

こんにちは、私は自分のサイトのボタンナビゲーションを作成しようとしています。私はそれが4つのボタンのために働くようにしようとしています、私はそれらを円、すべての異なる色にしたい、そして、ユーザーがそれの上を飛ぶとき、それは輝きます。だから私は、これまでに得た：

HTML：

<nav id="main-menu"> 
    <ul> 
    <li class="model-icon a-color hvr-glow"> 

    </li> 
    <li class="model-icon b-color hvr-glow"> 

    </li> 
    <li class="model-icon c-color hvr-glow"> 

    </li> 
    <li class="model-icon d-color hvr-glow"> 

    </li> 
    </ul> 
</nav> 

#main-menu > ul > li { 
    margin: 0 5px; 
    width: 50px; 
    height: 50px; 
    cursor: pointer; 
} 

.a-color { 
    background-color: Yellow; 
} 

.b-color { 
    background-color: Red; 
} 

.c-color { 
    background-color: White; 
} 

.d-color { 
    background-color: Green; 
} 

を問題はあるが、そこにはグロー効果はありません、彼らは箱ではなく円です。将来的には

その後、私は今、私はただの箱は円形に回すために取得したいし、ユーザーがそれの上に置いたときのためにしかし、この site

を使用して、それの真ん中にSVG画像を入れます、それは

おかげ

Answer 1

が#main-menu > ul > li:hover {} を追加し、影にhere

を調整して、円のために点灯します：

border-radius：50％;

#main-menu > ul > li { 
 
    margin: 0 5px; 
 
    width: 50px; 
 
    height: 50px; 
 
    cursor: pointer; 
 
    
 
} 
 
#main-menu > ul > li:hover { 
 
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); 
 
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); 
 
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); 
 
border-radius:50%; 
 
} 
 

 
.a-color { 
 
    background-color: Yellow; 
 
} 
 

 
.b-color { 
 
    background-color: Red; 
 
} 
 

 
.c-color { 
 
    background-color: White; 
 
} 
 

 
.d-color { 
 
    background-color: Green; 
 
}

<nav id="main-menu"> 
 
    <ul> 
 
    <li class="model-icon a-color"> 
 

 
    </li> 
 
    <li class="model-icon b-color"> 
 

 
    </li> 
 
    <li class="model-icon c-color"> 
 

 
    </li> 
 
    <li class="model-icon d-color"> 
 

 
    </li> 
 
    </ul> 
 
</nav>