今天我們就來繼續做導覽列的部分，昨天的HTML已經製作出了導覽列的框架，今天就利用CSS來做一些美化以及互動吧！

先寫掉選單及連結的預設樣式，把前面的黑點跟底線去除，再調整文字間距及顏色。

ul{
	list-style: none; /* 取消前面的黑點*/
	padding: 0;
	margin: 0;
}

a{
	text-decoration: none; /* 文字無底線*/
}

.menu > li > a{
	display: block;
	line-height: 20px;
	padding: 28px 16px;
	margin-right: 4px;
	color: #000;
}

利用 標籤可以讓元件浮動，控制元件在導覽列對應的位置上，使用 <float: left>可以讓元素彼此相鄰浮動，以達到導覽列橫向排列的效果。

.navbar .logo{
	float: left; /* 把logo浮動至左 */
	margin-top: 24px;
}

.menu{
	float: right; /* 把選單浮動至右 */
}

.menu > li{
	float: left; /* 讓選項從直的排列變成橫的 */
}

最後在寫到互動前，簡單跟大家介紹一下css的幾個標籤。

• <transform> 可以使用它來移動、旋轉、縮放和傾斜元素

transform: translate() 可以讓元素做位置的移動，調整方式為x軸、y軸的參數。

div {
  transform: translateX(100px);
}

transform: rotate() 可以根據給定的度數順時針或逆時針旋轉元素。

div {
  transform: rotate(75deg);
}

transform: scale() 可以倍數放大或縮小元素，調整方式為寬度和高度的參數。

div {
  transform: scale(0.5, 0.5);
}

• <transition>可以使用它來添加過渡效果

transition 可以針對css屬性變化的部分設定效果持續時間（秒數）。

div {
  transition: width 1s;
}

transition-delay 可以指定效果的延遲時間（秒數）。

div {
  transition-delay: 1s;
}

transition-timing-function 可以指定過渡效果的速度曲線。

div {
  transition-timing-function: linear;
}

最後我們就可以用這些標籤把下拉式選單以及互動效果做出來！

.menu .dropdown{
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%); /* 移動下拉選單的位置 */
	background-color: #000;

	opacity: 0; /* 調整不透明度 */
	visibility: hidden;
	transition: all 0.3s; /*控制過渡時間 */
	background-color: #000;
}
.menu > li:hover .dropdown{
	opacity: 1; /* 調整不透明度 */
	visibility: visible;
	top: 100%;
}
.menu .dropdown > li > a{
	display: block;
	line-height: 24px;
	padding: 8px 24px;
	color: #fff;
	width: 200px;
	transition: all 0.2s;/*控制過渡時間 */
}
.menu .dropdown > li > a:hover{ /*鼠標懸停時改變屬性 */
	background-color: #3a3a3a;
}

以上的範例大家可以到連結的codepen去做改動編輯，看看做出來的效果，進而更加認識語法的使用方式喔！
codepen

利用這些標籤可以做出自己喜歡的樣式，讓網站中不可或缺的導覽列有更多設計巧思，css做出的互動效果也可以運用在網站其他元件，大家可以再多多摸索～