HTML+CSS melaksanakan gaya CSS menu lungsur kedua bar navigasi

Kami telah menambah pemilih kelas pada elemen HTML kami yang sepadan dalam bab sebelumnya Sekarang kami menambah kelas ini pada gaya css kami hanya perlu menambah gaya css ini pada halaman untuk mencapai kesan yang kami mahu

Anda boleh meletakkan gaya css ini secara berasingan ke dalam fail css dan kemudian merujuknya dalam halaman HTML

Anda juga boleh meletakkan ia terus di 'kepala' halaman HTML Tutorial ini diletakkan pada halaman yang sama

Lihat kod lengkap dalam bab seterusnya

bahagian seterusnya

fail baharu

<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>

serahkan Tetapkan Semula Kod

Operasi automatik

Skrin penuh