និងគំរូរក្នុងការបង្កើត។ខាងក្រោមនេះគឺជាគំនិត
ដ៏តូចមួយក្នុងការធ្វើការរចនាMenu។
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css11.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Donwload</a>
<ul>
<li class="radius-1"><a href="#">Home</a></li>
<li class="radius-2"><a href="#">Donwload</a></li>
</ul>
</li>
<li><a href="#">Programs</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
ul.menu{
border:0px solid;
margin:0;
padding:0;
height:50px;
border-radius:25px;
box-shadow:1px 3px 1px #999;
background: #627d4d; /* Old browsers */
background: -moz-linear-gradient(top, #627d4d 0%, #1f3b08 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#627d4d), color-stop(100%,#1f3b08)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #627d4d 0%,#1f3b08 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #627d4d 0%,#1f3b08 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #627d4d 0%,#1f3b08 100%); /* IE10+ */
background: linear-gradient(to bottom, #627d4d 0%,#1f3b08 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */}
ul li{
list-style:none;
border:0px solid;
float:left;
position:relative;
padding:15px;
margin-left:1px;
width:120px;
}
ul li a{
text-decoration:none;
border:0px solid;
padding:13px;
color:#FFF;}
ul li:hover > a{color:#F00;}
/*List Drowdown*/
ul li ul{
position:absolute;
left:0px;
top:100%;
display:none;
margin:0;
padding:0;
border:0px solid;
}
ul li ul li{
margin:0;
width:100px;
background: #627d4d; /* Old browsers */
background: -moz-linear-gradient(top, #627d4d 0%, #1f3b08 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#627d4d), color-stop(100%,#1f3b08)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #627d4d 0%,#1f3b08 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #627d4d 0%,#1f3b08 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #627d4d 0%,#1f3b08 100%); /* IE10+ */
background: linear-gradient(to bottom, #627d4d 0%,#1f3b08 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */
}
ul li ul .radius-1{
border-radius:5px 5px 0px 0px;
}
ul li ul .radius-2{
border-radius:0px 0px 5px 5px;
}
ul li:hover ul{
display:block;}
ul li ul li:hover{
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
0 សូមធ្វើការតំលៃផង:
Post a Comment