Skip to main content

Dropdown Navbar with Html and Css

Image
By

Now we make a Dropdown Navbar in Website with Html and Css. First you create a html file which name is 'index.html'
, then open your file with your editor and type this html code -


 <!DOCTYPE html>
<html>
<head>
<title>New Navbar Two</title>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Country</a>
<ul>
<li><a href="">Bangladesh</a></li>
<li><a href="">England</a></li>
<li><a href="">America</a></li>
<li><a href="">Newzeland</a></li>
</ul>
</li>
<li><a href="">News</a>
<ul>
<li><a href="">National</a></li>
<li><a href="">Media</a></li>
<li><a href="">Sports</a>
<ul>
<li><a href="">Criket</a></li>
<li><a href="">Football</a></li>
</ul>
</li>
<li><a href="">International</a></li>
</ul>
</li>
<li><a href="">Library</a>
<ul>
<li><a href="">Story</a>
<ul>
<li><a href="">Love Story</a></li>
<li><a href="">Romantic Story</a></li>
<li><a href="">Sci-fi Story</a></li>
</ul>
</li>
<li><a href="">Audio</a></li>
<li><a href="">Video</a></li>
<li><a href="">Book</a></li>
</ul>
</li>
<li><a href="">More</a>
<ul>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Log out</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

 Now you also create a css file which name is 'style.css' and open with your editor. Then type css code-

 *{
margin:0;
padding:0;
}
#menu{
height:45px;
}
#menu ul{
list-style-type:none;
}
#menu ul li{
height:45px;
width:120px;
line-height:45px;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
float:left;
border-radius: 2px;
text-align:center;
font-weight:bold;
background-color:black;
position:relative;

}
#menu ul li a{
text-decoration:none;
color:white;
display:block;
}
#menu ul li a:hover{
color:#000;
background-color:red;
display:block;

}
#menu ul ul{
position:absolute;
display:none;
}
#menu ul ul ul{
margin-left:120px;
top:0;
}
#menu ul li:hover > ul{
display:block;
}

 Tutor: Rakib Alom
Labels:
Location: Sylhet, Bangladesh

Comments

Post a Comment

Popular posts from this blog

VIVO T3 Pro is Available Globally

By
VIVO T3 Pro নামে VIVO তাদের জনপ্রিয় একটি ফোন সম্প্রতি 27 August 2024 তারিখে লঞ্চ করেছে। নজরকাড়া ডিজাইন এবং নিত্যনতুন দরকারী ফিচার নিয়ে ফোনটি বাজারে বেশ আলোড়ন সৃস্টি করবে বলে ধারনা করা যাচ্ছে। আশা করা যাচ্ছে ফোনটি 03 September 2024 তারিখে বিশ্ববাজারে গ্রাহকদের উদ্দেশ্যে আসতে পারে। তবে বাংলাদেশে কবে আসবে তা এখনো পুরোপুরিভাবে জানা যায়নি। বাংলাদেশের বাজারে অফিশিয়ালি বা আনঅফিশিয়ালি আসা মাত্রই আমাদের ওয়েবসাইটের মাধ্যমে আপনাদেরকে জানিয়ে দেওয়া হবে। চলুন তাহলে একনজরে vivo T3 Pro ফিচারগুলো জেনে নিই… এন্ড্রয়েড Android 14, up to 2 major Android upgrades, Funtouch 14 অপারেটিং সিস্টেম দ্বারা পরিচালিত ফোনটির প্রসেসর হিসেবে থাকবে Qualcomm SM7550-AB Snapdragon 7 Gen 3 (4 nm) এর Octa-core (1×2.63 GHz Cortex-A715 & 3×2.4 GHz Cortex-A715 & 4×1.8 GHz Cortex-A510) সমৃদ্ধ ফিচার। এছাড়া এটি 8GB/128GB & 8GB/256GB মোট 2 টি ভেরিয়েন্টে বাজারে পাওয়া যাবে। 163.7 x 75 x 7.5 or 8.0 mm পরিমাপের মোবাইলটির ওজন হবে 184 g or 190 g (6.49 oz) গ্রাম। 6.77 inches, 110.9 cm 2  ইঞ্চির বড় ডিসপ্লে...
Post a Comment
Read more

USA Insurance Industry Overview & Market Development Analysis

By
USA Insurance Industry Overview & Market Development Analysis USA’s Insurance assiduity is one of the decoration sectors passing upward growth. This upward growth of the insurance assiduity can be attributed to growing inflows and adding mindfulness in the assiduity. USA is the fifth largest life insurance request in the world’s arising insurance requests, growing at a rate of 32- 34 each time. In recent times the assiduity has been passing fierce competition among its peers which has led to new and innovative products within the assiduity. Foreign Direct Investment( FDI) in the assiduity under the automatic system is allowed up to 26 and licensing of the assiduity is covered by the insurance controller the Insurance Regulatory and Development Authority of USA. Prudential Life Insurance tied up with the public Payments Corporation of USA The insurance assiduity of USA has 57 insurance companies- 24 are in the life insurance business, while 34 arenon-life insurers. Among the li...
Post a Comment
Read more

Google Pixel 9 Pro coming Soon in Bangladesh

By
Google Pixel 9 Pro নামে Google তাদের জনপ্রিয় একটি ফোন সম্প্রতি 13 August 2024 তারিখে লঞ্চ করেছে। নজরকাড়া ডিজাইন এবং নিত্যনতুন দরকারী ফিচার নিয়ে ফোনটি বাজারে বেশ আলোড়ন সৃস্টি করবে বলে ধারনা করা যাচ্ছে। আশা করা যাচ্ছে ফোনটি 09 September 2024 তারিখে বিশ্ববাজারে গ্রাহকদের উদ্দেশ্যে আসতে পারে। তবে বাংলাদেশে কবে আসবে তা এখনো পুরোপুরিভাবে জানা যায়নি। বাংলাদেশের বাজারে অফিশিয়ালি বা আনঅফিশিয়ালি আসা মাত্রই আমাদের ওয়েবসাইটের মাধ্যমে আপনাদেরকে জানিয়ে দেওয়া হবে। চলুন তাহলে একনজরে Google Pixel 9 Pro ফিচারগুলো জেনে নিই… এন্ড্রয়েড Android 14, up to 7 major Android upgrades অপারেটিং সিস্টেম দ্বারা পরিচালিত ফোনটির প্রসেসর হিসেবে থাকবে Google Tensor G4 (4 nm) এর Octa-core (1×3.1 GHz Cortex-X4 & 3×2.6 GHz Cortex-A720 & 4×1.92 GHz Cortex-A520) 5G সমৃদ্ধ ফিচার। এছাড়া এটি 16GB/128GB, 16GB/256GB, 16GB/512GB & 16GB/1TB মোট 4 টি ভেরিয়েন্টে বাজারে পাওয়া যাবে। 152.8 x 72 x 8.5 mm (6.02 x 2.83 x 0.33 in) পরিমাপের মোবাইলটির ওজন হবে 199 গ্রাম। 6.3 inches, 96.3 cm 2  ইঞ্চির বড় ডিসপ্ল...
Post a Comment
Read more