Menu CSS standar ( không dùng CSS hack) 2007-09-20 06:32:05
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>
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>
Tra loi 13 comment(s) 2007-09-20 06:32:05
cb_dethuong 2007-11-19 05:24:39
Tra loi
vietcms.com 2007-11-20 04:58:00
Tra loi
bibodethuong 2008-08-06 02:20:03
Tra loi
thanh nam 2008-11-19 10:11:47
Tra loi
123456 2009-01-12 10:18:36
Tra loi
TG 2009-01-12 11:45:39
Tra loi
123456 2009-01-14 10:33:50
Tra loi
Về Đâu 2009-01-17 10:48:06
Tra loi
tester 2009-01-18 08:46:05
Tra loi
Về Đâu 2009-01-19 02:39:35
Mình không quan tâm đến việc hack lắm.
Tra loi
CH 2009-05-19 02:58:28
Tra loi
TG 2009-05-19 10:41:59
Tra loi
Về Đâu 2009-05-20 08:04:46
Như vậy rất logic phù hợp với sematic HTML
Tra loi
Y kien