I have implemented a dropdown menu on an asp.net webform using an external style sheet and html hyperlinks. I am currently working on getting the menu to align in the center of the webpage, where the rest of the content is already centered. Take a look at the code snippet below:
/*Menu System Styles*/
.container {
overflow: hidden;
background-color: #0176C5;
font-family: 'Tahoma', Geneva, sans-serif;
text-align:center;
}
.container a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display:inline-block;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.container a:hover, .dropdown:hover .dropbtn {
background-color: #2ad32d;
}
.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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
} <div class="container">
<a href="home.aspx">Home</a>
<div class="dropdown">
<button class="dropbtn">About Us</button>
<div class="dropdown-content">
<a href="#">Our Mission and Values</a>
<a href="LocalProjects.aspx">Local Projects</a>
<a href="NationalProjects.aspx">National & Worldwide Projects</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">News & Events</button>
<div class="dropdown-content">
<a href="#">Recent News</a>
<a href="Events.aspx">Upcoming Events</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Prayer</button>
<div class="dropdown-content">
<a href="DiocesanPrayer.aspx">Diocesan Prayer Circle</a>
<a href="Prayer.aspx">Wave of Prayer</a>
<a href="IrelandPrayer.aspx">All Ireland Prayer Cycle</a>
</div>
</div>
<a href="home.aspx">Find a Branch</a>
<a href="home.aspx">Contact Us</a>
<a href="home.aspx">Resources</a>
<a href="home.aspx">130 Celebration</a>
</div>