Credit: clevertechie
ประกอบไปด้วย 2 ส่วนคือ HTML และ CSS
รูปภาพจาก https://clevertechie.com/files/nature.jpg
1. HTML Source code
<html>
<link href="style.css" rel="stylesheet">
<ul>
<li><a>Home</a></li>
<li><a>About</a>
<ul>
<li><a>Our Team</a></li>
<li><a>Campian Sites</a></li>
<li><a>Mission & Vision</a></li>
<li><a>Resource</a></li>
</ul>
</li>
<li><a>Think to do</a>
<ul>
<li><a>Activities</a></li>
<li><a>Parks</a></li>
<li><a>Shops</a></li>
<li><a>Events</a></li>
</ul>
</li>
<li><a>Contract</a>
<ul>
<li><a>Map</a></li>
<li><a>Directions</a></li>
</ul>
</li>
<li><a>News</a></li>
</ul>
</html>
2 . CSS Source code
body{
background:url('nature.jpg') no-repeat;
background-size:cover;
font-family:Arial;
color:white;
}
ul{
margin:0px;
padding:0px;
list-style:none;
}
ul li{
float:left;
width:250px;
height:40px;
background-color:black;
opacity:.8;
line-height:40px;
text-align:center;
font-size:20px;
margin-right:2px;
}
ul li a{
text-decoration:none;
color:white;
display:block;
}
ul li a:hover{
background-color:green;
}
ul li ul li{
display:none;
}
ul li:hover ul li{
display:block;
}
ไม่มีความคิดเห็น:
แสดงความคิดเห็น