Menu CSS 5 2007-09-20 07:29:18

Demo:
<style type="text/css">
#basic {
position:absolute;
left: 450px;
top: 150px;
}
#basic ul{
  position:relative;
  list-style:none;
  padding: 0px;
  margin: 0px;
  width:174px;
  height:183px;
  background: url(http://phpbasic.com/phpbasic_data/include/base.gif) no-repeat left top;
}
#basic a{
  position:absolute;
  display:block;
  left:0px;
  height:12px;
  text-decoration:none;
  font: bold 9px Verdana,Arial,Helvetica,sans-serif;
  color:#000000;
z-index:2;

background: url(http://phpbasic.com/phpbasic_data/include/puces.gif) no-repeat top left;
}


#basic a:hover{
  color:#A99D49;
  width:174px;

  z-index:1;
}

#basic #menu1{
  top: 35px;

  padding-left: 58px;

  background-position: 0% 0%;
}

#basic #menu1:hover{
  top: 0px;
  padding-top: 35px;

  background-position: 0% -72px;
}

#basic #menu2{
  top: 53px;
  padding-left: 57px;
  background-position: 0% -12px;
}

#basic #menu2:hover{
  top: 0px;
  padding-top: 53px;
  background-position: 0% -119px;
}

#basic #menu3{
  top: 71px;
  padding-left: 54px;
  background-position: 0% -24px;
}

#basic #menu3:hover{
  top: 0px;
  padding-top: 71px;
  background-position: 0% -184px;
}

#basic #menu4{
  top: 89px;
  padding-left: 50px;
  background-position: 0% -36px;
}

#basic #menu4:hover{
  top: 0px;
  padding-top: 89px;
  background-position: 0% -267px;
}

#basic #menu5{
  top: 107px;
  padding-left: 44px;
  background-position: 0% -48px;
}

#basic #menu5:hover{
  top: 0px;
  padding-top: 107px;
  background-position: 0% -368px;
}

#basic #menu6{
  top: 125px;
  padding-left: 37px;
  background-position: 0% -60px;
}

#basic #menu6:hover{
  top: 0px;
  padding-top: 125px;
  background-position: 0% -487px;
}
</style>
<div id="basic">
<ul>
  <li><a id="menu1" title="menu1" accesskey="1" href="#">Menu 1</a></li>
  <li><a id="menu2" title="menu2" accesskey="2" href="#">Menu 2</a></li>
  <li><a id="menu3" title="menu3" accesskey="3" href="#">Menu 3</a></li>
  <li><a id="menu4" title="menu4" accesskey="4" href="#">Menu 4</a></li>
  <li><a id="menu5" title="menu5" accesskey="5" href="#">Menu 5</a></li>

  <li><a id="menu6" title="menu6" accesskey="6" href="#">Menu 6</a></li>
</ul>
</div>
<br />Code:
<style type="text/css">
#basic ul{
  position:relative;
  list-style:none;
  padding: 0px;
  margin: 0px;
  width:174px;
  height:183px;
  background: url(http://phpbasic.com/phpbasic_data/include/base.gif) no-repeat left top;
}
#basic a{
  position:absolute;
  display:block;
  left:0px;
  height:12px;
  text-decoration:none;
  font: bold 9px Verdana,Arial,Helvetica,sans-serif;
  color:#000000;
z-index:2;

background: url(http://phpbasic.com/phpbasic_data/include/puces.gif) no-repeat top left;
}


#basic a:hover{
  color:#A99D49;
  width:174px;

  z-index:1;
}

#basic #menu1{
  top: 35px;

  padding-left: 58px;

  background-position: 0% 0%;
}

#basic #menu1:hover{
  top: 0px;
  padding-top: 35px;

  background-position: 0% -72px;
}

#basic #menu2{
  top: 53px;
  padding-left: 57px;
  background-position: 0% -12px;
}

#basic #menu2:hover{
  top: 0px;
  padding-top: 53px;
  background-position: 0% -119px;
}

#basic #menu3{
  top: 71px;
  padding-left: 54px;
  background-position: 0% -24px;
}

#basic #menu3:hover{
  top: 0px;
  padding-top: 71px;
  background-position: 0% -184px;
}

#basic #menu4{
  top: 89px;
  padding-left: 50px;
  background-position: 0% -36px;
}

#basic #menu4:hover{
  top: 0px;
  padding-top: 89px;
  background-position: 0% -267px;
}

#basic #menu5{
  top: 107px;
  padding-left: 44px;
  background-position: 0% -48px;
}

#basic #menu5:hover{
  top: 0px;
  padding-top: 107px;
  background-position: 0% -368px;
}

#basic #menu6{
  top: 125px;
  padding-left: 37px;
  background-position: 0% -60px;
}

#basic #menu6:hover{
  top: 0px;
  padding-top: 125px;
  background-position: 0% -487px;
}
</style>
<div id="basic">
<ul>
  <li><a id="menu1" title="menu1" accesskey="1" href="#">Menu 1</a></li>
  <li><a id="menu2" title="menu2" accesskey="2" href="#">Menu 2</a></li>
  <li><a id="menu3" title="menu3" accesskey="3" href="#">Menu 3</a></li>
  <li><a id="menu4" title="menu4" accesskey="4" href="#">Menu 4</a></li>
  <li><a id="menu5" title="menu5" accesskey="5" href="#">Menu 5</a></li>

  <li><a id="menu6" title="menu6" accesskey="6" href="#">Menu 6</a></li>
</ul>
</div>

Tra loi 3 comment(s) TG 2007-09-20 07:29:18

123456 2009-01-12 02:09:06

vote cho TG 100 điểm luôn, U có mấy bài về css menu hay quá trời

Tra loi

Ken Phan 2009-01-12 02:51:32

bóc tem .... xoẹt xoẹt xoẹt ...
thanks TG nhiều nhé ^^

Tra loi

123456 2009-03-17 08:46:49

Trên IE bị lỗi TG ơi

Tra loi

Y kien