This HTML and CSS code creates a navigation bar with a dropdown menu:
HTML And CSS Code Create a Navigation Bar With a Dropdown Menu:
The <ul> element creates an unordered list that represents the navigation bar.
<li> elements create the list items, each containing a link (<a> tag) for different sections like "Home," "Name 1," "Name 2," etc.
The last list item contains a dropdown menu labeled "More."
The CSS styles define the appearance of the navigation bar and the dropdown menu.
When you hover over "More," it displays the dropdown content with additional links ("list 1," "list 2").
This code can be used to create a simple navigation bar with dropdown functionality for a website.
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Name 1</a></li>
<li><a href="#">Name 2</a></li>
<li><a href="#">Name 3</a></li>
<li><a href="#">Name 4</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">More</a>
<div class="dropdown-content">
<a href="#">list 1</a>
<a href="#">list 2</a>
</div>
</li>
</ul>
Comments
Post a Comment
BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');