Menu CSS standar ( không dùng CSS hack) (Thứ Hai, 07/09/2009-3:45 PM)
| Code: |
<style type="text/css">
ul,li,a {
display:block;
margin:0;
padding:0;
border:0;
}
ul {
width:150px;
border:1px solid #9d9da1;
background:white;
list-style:none;
}
li {
position:relative;
padding:1px;
padding-left:26px;
background:url("http://phpbasic.com/phpbasic_data/include/item_moz.gif") no-repeat;
z-index:9;
}
li.folder { background:url("http://phpbasic.com/phpbasic_data/include/item_folder.gif") no-repeat; }
li.folder ul {
position:absolute;
left:120px;
top:5px;
}
li.folder>ul { left:140px; }
a {
padding:2px;
border:1px solid white;
text-decoration:none;
color:gray;
font-weight:bold;
width:100%;
}
li>a { width:auto; }
li a.submenu {
background:url("http://phpbasic.com/phpbasic_data/include/sub.gif") right no-repeat;
}
a:hover {
border-color:gray;
background-color:#bbb7c7;
color:black;
}
li.folder a:hover {
background-color:#bbb7c7;
}
li.folder:hover { z-index:10; }
ul ul, li:hover ul ul {
display:none;
}
li:hover ul, li:hover li:hover ul {
display:block;
}
</style></head><body>
<ul id="menu">
<li><a href="#"> lorem </a></li>
<li class="folder">
<a href="#" class="submenu"> adipiscing </a>
<ul>
<li><a href="#"> dolor </a></li>
<li class="folder">
<a href="#" class="submenu"> consectetuer</a>
<ul>
<li><a href="#"> elit </a></li>
<li><a href="#"> ipsum </a></li>
<li><a href="#"> Donec </a></li>
</ul>
</li>
<li><a href="#"> vestibulum </a></li>
</ul>
</li>
<li class="folder">
<a href="#" class="submenu"> consectetuer</a>
<ul>
<li><a href="#"> elit </a></li>
<li><a href="#"> ipsum </a></li>
<li><a href="#"> Donec </a></li>
</ul>
</li>
<li><a href="#"> sit amet </a></li>
</ul>