首頁 > web前端 > html教學 > 纯 CSS 实现水平下拉菜单_html/css_WEB-ITnose

纯 CSS 实现水平下拉菜单_html/css_WEB-ITnose

WBOY
發布: 2016-06-21 09:06:08
原創
1110 人瀏覽過


#menu {

  font-family: Arial;

  font-size: 14px;

  width: 500px;

  overflow: hidden;

}


#menu, #menu ul {

  list-style-type: none;

  background: #A3C159;

  margin: 0;

  padding: 0;

}


#menu li {

  float: left;

}


#menu li a {

  display: block;

  padding: 10px 15px;

  color: #FFF;

  text-decoration: none;

  border-right: 1px solid #FFF;

}

#menu li a:hover {

  background: #1BA6B2;

}


#menu li ul li {

  float: none;

}


#menu li ul li a {

  border-top: 1px solid #FFF;

}


#menu li ul {

  display: none;

  position: absolute;

}


#menu li:hover ul {

  display: block;

}


备注:不支持 IE6。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板