ដ៏តូចមួយក្នុងការធ្វើការរចនាMenu drop down។
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<link rel="stylesheet" a href="css drop down.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menu drop down</title>
</head>
<body>
<ul class="main">
<li class="menu1"><a href="#">Home</a></li>
<li class="menu2"><a href="#">News</a></li>
<li class="menu3"><a href="#">Code</a></li>
<li class="menu4"><a href="#">Css</a></li>
<li class="menu5"><a href="#">HTML</a></li>
<li class="menu6"><a href="#">Java</a></li>
<li class="menu7"><a href="#">XML</a></li>
<li class="menu8"><a href="#">CMS</a></li>
</ul>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
*{
margin:auto;
padding:0px;
margin-top:15px;
cursor:wait;
}
ul.main{
border:1px solid #000;
width:150px;
height:auto;
list-style:none;
box-shadow:1px 2px 3px 5px #CCCCCC;
}
li.menu1 a{
border:0px solid #F00;
color:#000;
text-decoration:none;
}
.menu1{
width:150px;
height:30px;
border:0px solid #000;
margin:0px;
padding:0px;
text-align:center;
background:#9CC;
}
ul li a:hover{
background:#933;
font-size:20px;
font-family:"Lucida Console", Monaco, monospace;
box-shadow:1px 2px 1px 2px #333333;
}
ul a{
width:160px;
height:auto;
border:0px solid #0F0;
padding:10px;
padding-top:1px;
padding-bottom:8px;
cursor:pointer;
}
li.menu2 a{
text-decoration:none;
color:#333;
}
.menu2{
width:150px;
height:30px;
border:0px solid #000;
margin:0px;
padding:0px;
text-align:center;
background:#CCC;
}
li.menu3 a{
text-decoration:none;
color:#000;
}
.menu3{
width:150px;
height:30px;
border:0px solid #000;
margin:0px;
padding:0px;
text-align:center;
background:#999;
}
li.menu4 a{
text-decoration:none;
color:#000;
}
.menu4{
width:150px;
height:30px;
border:0px solid #000;
margin:0px;
padding:0px;
text-align:center;
background:#666;
}
li.menu5 a{
text-decoration:none;
color:#000;
}
.menu5{
width:150px;
height:30px;
border:0px solid #000;
margin:0px;
padding:0px;
text-align:center;
background:#FFF;
}
li.menu6 a{
text-decoration:none;
color:#000;
}
.menu6{
width:150px;
height:30px;
border:0px solid #000;
margin:0px;
padding:0px;
text-align:center;
background:#CCF;
}
li.menu7 a{
text-decoration:none;
color:#000;
}
.menu7{
width:150px;
height:30px;
border:0px solid #000;
margin:0px;
padding:0px;
text-align:center;
background:#CCC;
}
li.menu8 a{
text-decoration:none;
color:#000;
}
.menu8{
width:150px;
height:30px;
border:0px solid #000;
margin:0px;
padding:0px;
text-align:center;
background:#CF9;
}
0 comments:
Post a Comment