Bar navigasi pembangunan PHP menu lungsur sekunder gaya CSS
Kami telah menambah pemilih kelas pada elemen HTML kami yang sepadan dalam bab sebelumnya Sekarang kami menambah kelas ini pada gaya css kami Kodnya adalah seperti berikut
<style> li{ list-style-type:none; } #menu { width:950px; margin:30px auto 0px; height:45px; background-color: #030e11; } #menu li { float:left; width:109px; line-height:39px; text-align:center; position:relative; border:none; } #menu li a { font-size:16px; color: #e6f8e9; display:block; outline:0; text-decoration:none; } #menu li:hover a { color: #ff0000; /*导航栏文字颜色 */ } #menu li:hover .dropdown_1column { left:0px; top:38px; } .dropdown_1column{ /* 下拉菜单边框颜色*/ margin:0px auto; float:left; position:absolute; left:-999em; text-align:left; border:1px solid #066591; border-top:none; background:#F4F4F4; width: 140px; } #menu li:hover div a { /* 下拉菜单文字颜色*/ font-size:12px ;color:#444; } #menu li:hover div a:hover{color:#21910e;} /*下拉菜单鼠标停留颜色*/ #menu li ul { list-style:none;padding:10px 5px; margin:0; } #menu li ul li { font-size:12px; line-height:26px; position:relative; padding:0;margin:0; float:none; text-align:left; width:130px; } #menu li ul li:hover { background:none; border:none;padding:0; margin:0; } </style>
Kami hanya perlu menambah gaya css ini. ke halaman boleh mencapai kesan yang kita inginkan
Anda boleh meletakkan gaya css ini ke dalam fail css secara berasingan, dan kemudian merujuknya dalam halaman HTML
Anda juga boleh meletakkan Ia diletakkan terus dalam 'kepala' halaman HTML Tutorial ini diletakkan pada halaman yang sama
Lihat kod lengkap dalam bab seterusnya