I'm currently designing a navigation menu that includes a child navigation menu. My goal is to have the size of the main navigation menu match that of the child navigation menu.
To achieve this, I've created three hyperlink tags followed by a div element. All four elements are floated to the left. The div element consists of a button and another nested div. I've set the nested div to be positioned absolutely so it appears below the button. My intention is for the button to have the same width as the nested div containing the child links. However, setting the root div element with position relative did not produce the desired outcome. Below is the CSS and HTML code. Any insights on solving this issue would be greatly appreciated.
/* css */
<style>
.navbar {
background: #006669;
overflow: hidden;
}
.navbar a{
float: left;
padding: 15px 15px;
text-decoration: none;
color: white;
font-size: 1.1rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.navbar .subnav{
float: left;
border:1px solid black;
}
.navbar .subnav .subnavbutton{
padding: 15px 15px;
text-decoration: none;
color: white;
font-size: 1.1rem;
border: none;
outline: none;
background: transparent;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.navbar .subnav .subnavcontent{
position:absolute;
border: 1px solid red;
min-width: 100px;
display: none;
}
.navbar .subnav .subnavcontent a{
float: none;
color: #444;
background: white;
display: block;
}
.navbar .subnav .subnavcontent a:hover{
background: #a0a0a0;
}
.navbar .subnav:hover .subnavcontent{
display: block;
}
</style>
here is the body content
<div class="navbar">
<a href="#">Home</a>
<a href="#">News</a>
<div class="subnav">
<button class="subnavbutton">Contact</button>
<div class="subnavcontent">
<a href="#">link1</a>
<a href="#">link2</a>
<a href="#">link3</a>
</div>
</div>
</div>