How to Create Transparent Drop Down Navigation Menu with CSS and HTML
Question: Write Down the CSS and HTML code to Design the following menu. 2017
The process of use: If you make Drop Down Menu Using HTML And CSS ,at fast create html page and css page.
Example: index.html and style.css
Then copy and paste the HTML code given below into the HTML page. Copy and paste the CSS code below into the CSS page. Then save and open in the browser.
ব্যবহার প্রক্রিয়া: যদি আপনি ড্রপ ডাউন মেনু তৈরি করতে চান তাহলে প্রথমেই একটি এইচটিএমএল ও একটি সিএসএস পেজ তৈরি করে নিন।
যেমন: index.html and style.css
তারপর নিচের দেওয়া এইচটিএমএল কোড কপি করে এইচটিএমএল পেজে পেস্ট করুন। আর নিচে দেয়া সিএসএস কোড কপি করে সিএসএস পেজ এ পেস্ট করুন। তারপর সেভ করে ব্রাউজারে ওপেন করুন।
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>try menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Department</a>
<ul>
<li><a href="#">CSE</a></li>
<li><a href="#">BBA</a></li>
<li><a href="#">THM</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
HTML Code Screenshots:
CSS CODE:
*{
margin: 0;
padding: 0;
}
body{
font-family: sans-serif;
padding-left: 400px;
padding-top: 50px;
}
ul{
list-style: none;
}
ul li a{
text-decoration: none;
color: black;
display: block;
}
ul li{
float: left;
height: 40px;
width: 200px;
font-size: 20px;
line-height: 40px;
border: solid 1px black;
text-align: center;
}
ul li a:hover{
background-color: gray;
color: blue;
}
ul li ul li{
/*display: none;*/
}
ul li:hover ul li{
display: block;
}
CSS Code Screenshots:
The process of use: If you make Drop Down Menu Using HTML And CSS ,at fast create html page and css page.
Example: index.html and style.css
Then copy and paste the HTML code given below into the HTML page. Copy and paste the CSS code below into the CSS page. Then save and open in the browser.
ব্যবহার প্রক্রিয়া: যদি আপনি ড্রপ ডাউন মেনু তৈরি করতে চান তাহলে প্রথমেই একটি এইচটিএমএল ও একটি সিএসএস পেজ তৈরি করে নিন।
যেমন: index.html and style.css
তারপর নিচের দেওয়া এইচটিএমএল কোড কপি করে এইচটিএমএল পেজে পেস্ট করুন। আর নিচে দেয়া সিএসএস কোড কপি করে সিএসএস পেজ এ পেস্ট করুন। তারপর সেভ করে ব্রাউজারে ওপেন করুন।
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>try menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Department</a>
<ul>
<li><a href="#">CSE</a></li>
<li><a href="#">BBA</a></li>
<li><a href="#">THM</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
HTML Code Screenshots:
CSS CODE:
*{
margin: 0;
padding: 0;
}
body{
font-family: sans-serif;
padding-left: 400px;
padding-top: 50px;
}
ul{
list-style: none;
}
ul li a{
text-decoration: none;
color: black;
display: block;
}
ul li{
float: left;
height: 40px;
width: 200px;
font-size: 20px;
line-height: 40px;
border: solid 1px black;
text-align: center;
}
ul li a:hover{
background-color: gray;
color: blue;
}
ul li ul li{
/*display: none;*/
}
ul li:hover ul li{
display: block;
}
CSS Code Screenshots:
View Browser:
পোস্টটি বুঝতে না পারলে নিচে থাকা ভিডিওটি দেখুন।
If you do not understand the post, watch the video below.
Post a Comment