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

Awesome! টিউনস

সকল Awesome! টিউনস

এসে গেলো পাসওয়ার্ড প্রোটেক্টেড ইউএসবি

কামরুল ইসলাম রুবেল

উইন্ডোজ এক্সপি-র স্পিড বাড়ানোর জন্য ৮ টি টিপস ডন্ট মিস দিস মেগা টিউন

আব্দুল্লাহ আল শোয়েব

মানব মস্তিস্ক ও কম্পিউটারের পারস্পরিক সমন্বয় :: শুধুই কল্পবিজ্ঞান?

অনুপ

অফিসিয়ালি রিলিজ পেল বহুল প্রতিক্ষিত উইন্ডোজের সর্বশেষ ভার্সন উইন্ডোজ ৮ Windows 8! দেখে নিন উইন্ডোজ...

মুশফিকুস সালেহীন

2,771 দেখা 3 টিউমেন্টস জোসস

টিউন বিভাগ এইচটিএমএল

প্রকাশিত

Level 0

tanvir007123

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

টিউমেন্ট ফলো জোসস

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

নিচের কোড টি index.html নামে সেভ করেন।

<pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="menuu.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div class="menu">
	  <ul>
		  <li><a href="#">Desktops</a></li>
		  <li><a href="#">Laptops &amp; Notebooks</a></li>
		  <li><a href="#">Components</a>
			<ul>
				<li><a href="#"> - Mice and Trackballs</a></li>
				<li><a href="#"> - Monitors dhjdfg</a></li>
				 <li><a href="#"> - Printers fgj</a></li>
				 <li><a href="#"> - Scanners</a></li>
				 <li><a href="#"> - Web Cameras</a>
				 	<ul>
						<li><a href="#"> - Mice and Trackballs</a></li>
						<li><a href="#"> - Monitors</a></li>
						 <li><a href="#"> - Printers</a></li>
						 <li><a href="#"> - Scanners</a></li>
						 <li><a href="#"> - Web Cameras</a></li>
					 </ul>
				 
				 </li>
			 </ul>
		</li>
		<li><a href="#">Tablets</a></li>
		<li><a href="#">Software</a></li>
	</ul>
</div>
</body>
</html>

নিচের কোড টি menuu.css নামে সেভ করেন।

.menu {
    background: none repeat scroll 0 0 #1A1A1A;
    display: block;
    height: 40px;
    margin: 0 auto;
    width: 960px;
}

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

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

.menu ul li a{
	font-size:14px;
	padding:12px 10px;
	text-decoration:none;
	display:block;
	color:#0FF;
	background:#000;
}

.menu ul li a:hover{
	color:#F00;
	background:#666;
}

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

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

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

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

টিউমেন্ট ফলো জোসস

Level 0

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