用CSS打造可折叠伸缩名片菜单-(0)

现看看其CSS样式表代码:

<style type=”text/css”>

<!–

#menu {

  font-size:12px;

  height:380px;

  margin:0;

  padding:0;

  width:180px;

  overflow:hidden;

  background:#f0f0f0;

  list-style:none;

  border-left:1px solid #cccccc;

  border-right:1px solid #cccccc;

}

#menu li a {

  display:block;

  text-decoration:none;

  color:#00b;

  margin:0;

  width:100%;

  }

#menu li a span {

  display:none;

  color:#000;

  height:120px

  }

#menu li a.one span {

  display:block;

  margin:0 10px;

}

#menu li a:hover {

  background:#f1f1f1;

  }

#menu li a:hover span {

  display:block;

  margin:0 10px;

  cursor:pointer;

}

#menu .h2 {

  margin:0 5px;

  padding:0;

  color:#808;

  font-variant:small-caps;

  border:0;

  }

#menu .h3 {

  margin:0 5px;

  padding:0;

  color:#00b;

  }

.curved {

  width:180px;

  margin:0 auto;

  }

.curved .b1, .curved .b2, .curved .b3, .curved .b4  {

  font-size:1px;

  display:block;

  background:#88c;

  overflow: hidden;

  }

.curved .b1, .curved .b2, .curved .b3 {

  height:1px;

}

.curved .b2, .curved .b3, .curved .b4 {

  background:#f0f0f0;

  border-left:1px solid #cccccc;

  border-right:1px solid #cccccc;

  }

.curved .b1 {

  margin:0 4px;

  background:#cccccc;

  }

.curved .b2 {

  margin:0 2px;

  border-width:0 2px;

  }

.curved .b3 {

  margin:0 1px;

  }

.curved .b4 {

  height:2px;

  margin:0px;

  }

–>

</style>

用CSS打造可折叠伸缩名片菜单-(0)

相关文章:

你感兴趣的文章:

标签云: