欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-29 11:54:28
...


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