Exploring the world of dropdown menus in CSS has led me to encounter some challenges. I am striving to ensure that the dropdown boxes appear on the same line as the button that triggers them. Below is the CSS code I have been working with:
/* global styles */
* {
margin: 0;
border: 0;
padding: 0;
}
/* styling for the first box */
#a1 {
display: block;
background-color: lightblue;
height: 300px;
}
h1 {
text-align: center;
padding: 25px;
font-size: 6em;
font-family: Shrikhand;
color: white;
text-shadow: 5px 5px #000000;
}
/* styling for the second box */
#a2 {
display: block;
background-color: lightyellow;
height: 300px;
}
#mbar {
width: 100%;
height: 50px;
background-color: gray;
}
.li {
height: 20px;
float: left;
padding: 15px;
text-decoration: none;
list- style: none;
background-color: lightgray;
border-left: 1px solid black;
}
.li2 {
height: 20px;
padding: 15px;
text-decoration: none;
list-style: none;
background-color: lightgray;
display: none;
width: 130.981px;
}
.dd {
width: 130.981px;
}
.dd:hover .li2 {
display: block;
}
Here is the corresponding HTML code:
<div id="a2">
<div id="mbar">
<ul>
<li class="li">index</li>
<li class="li">gallery</li>
<li class="li dd">
dropdown
<ul>
<li class="li2">dropdown1</li>
<li class="li2">dropdown2</li>
</ul>
</li>
<li class="li">contact</li>
</ul>
</div>
</div>
You can find the source code on codepen.
If you click on the dropdown button, you'll notice that the dropdown navigation is not properly aligned with the button.