Awesome! টিউনস
সকল Awesome! টিউনস

HTML and CSS ড্রপ ডাউন মেনু (css dropdown menu)

2,280 দেখা 2 টিউমেন্টস জোসস
টিউন বিভাগ এইচটিএমএল
প্রকাশিত
Level 0

13 টিউনস 3 টিউমেন্টস 0 ফলোয়ার

যারা সিএসএস দিয়ে মেনু  ৈতৈরি করতে পারেন না, তাদের জন্য কোড টি শেয়ার করলাম।

নিচের কোড টি index.html নামে সেভ করেন।
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>

#menu{
	padding:0;
	margin:0 auto;
	background:#CCC;
	width:960px;
	height:40px;
}

#menu ul{
	padding:0;
	margin:0;
}

#menu ul li{
	float:left;
	width:150px;
	position:relative;
	list-style:none;
}

#menu ul li a{
	color:#000;
	text-decoration:none;
	font-size:16px;
	padding:10px 10px;
	display:block;
}

#menu ul li a:hover{
	color:#FFF;
	background:#000;
}


#menu ul li ul{
	display:block;
	top:39px;
	visibility:hidden;
	padding:0;
	margin:0;
	position:absolute;
	width:150px;
}

#menu ul li:hover ul{
	visibility:visible;
	display:block;
	background:#09F;
}

#menu ul li:hover ul li ul{
	width:150px;
	display:block;
	top:0px;
	left:150px;
	visibility:hidden;
	padding:0;
	margin:0;
	position:absolute;
}

#menu ul li ul li:hover ul{
	visibility:visible;
	display:block;
}

#menu ul li ul:hover ul li ul{
	width:150px;
	display:block;
	top:0px;
	left:150px;
	visibility:hidden;
	padding:0;
	margin:0;
	position:absolute;
}

#menu ul li ul li ul li:hover ul{
	visibility:visible;
	display:block;
}



</style>
</head>

<body>
<div id="menu">
	<ul>
    	<li><a href="#">Home</a></li>
        <li><a href="#">About Us</a>
        	<ul>
            	<li><a href="#">Destiny MLM</a></li>
                <li><a href="#">HollMark FP</a></li>
        	</ul>
        </li>
        <li><a href="#">Project</a>
        	<ul>
            	<li><a href="#">Destiny Project</a>
                	<ul>
                    	<li><a href="#">Tree Plantation</a></li>
                        <li><a href="#">Kalo Jira</a></li>
                        </li>
                        <li><a href="#">Amader TV</a></li>
                    </ul>
                </li>
                <li><a href="#">HollMark Project</a></li>
        	</ul>
        </li>
    </ul>
</div>

</body>
</html>

টিউনস ভালো লাগলে আমার ব্লগ  থেকে ঘুরে আসুন।

Level 0

আমি tanvir007123। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 1 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 13 টি টিউন ও 3 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস