Hi there! I created a button-style drop-down navigation seen here https://codepen.io/Diana-Clary/pen/vYvLNjy
I would like to have the sub-categories under each button to sit to the left (it is currently centered) of the button category.
Here is my CSS
.container{
margin-left: 5%;
margin-right: 5%;
text-align: center;
}
.dropbtn {
background-color: #8db842;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropbtn2 {
background-color: #4e96b3;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropbtn3 {
background-color: #c97676;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropbtn4 {
background-color: #dbab58;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropbtn5 {
background-color: #79628A;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropbtn6 {
background-color: #926a59;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
font-family: Arial, Helvetica, sans-serif;
display: none;
position: absolute;
background-color: #f1f1f1;
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;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #83a842;}
.dropdown:hover .dropbtn2 {background-color: #3e86a3;}
.dropdown:hover .dropbtn3 {background-color: #b96666;}
.dropdown:hover .dropbtn4 {background-color: #cb9b48;}
.dropdown:hover .dropbtn5 {background-color: #72506B;}
.dropdown:hover .dropbtn6 {background-color: #7e5d4f;}
And here is my HTML
<body style="background-color:white;">
<div class="container">
<div class="dropdown">
<button class="dropbtn">T-SHIRTS</button>
<div class="dropdown-content">
<a href="https://www.myfourleggedkids.com/diana#!/Dogs/c/154829755">Dogs</a>
<a href='https://www.myfourleggedkids.com/diana#!/Cats/c/154830003'>Cats</a>
<a href='https://www.myfourleggedkids.com/diana#!/Other/c/154829253'>Other</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn2">HOODIES</button>
<div class="dropdown-content">
<a href='https://www.myfourleggedkids.com/diana#!/Dogs/c/154830753'>Dogs</a>
<a href='https://www.myfourleggedkids.com/diana#!/Cats/c/154830004'>Cats</a>
<a href='https://www.myfourleggedkids.com/diana#!/Other/c/154826756'>Other</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn3">TOTES</button>
<div class="dropdown-content">
<a href='https://www.myfourleggedkids.com/diana#!/Dogs/c/154826757'>Dogs</a>
<a href='https://www.myfourleggedkids.com/diana#!/Cats/c/154826505'>Cats</a>
<a href='https://www.myfourleggedkids.com/diana#!/Other/c/154830005'>Other</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn4">COFFEE MUGS</button>
<div class="dropdown-content">
<a href='https://www.myfourleggedkids.com/diana#!/Dogs/c/154871755'>Dogs</a>
<a href='https://www.myfourleggedkids.com/diana#!/Cats/c/154879008'>Cats</a>
<a href='https://www.myfourleggedkids.com/diana#!/Other/c/154870258'>Other</a>
<a href='https://www.myfourleggedkids.com/diana#!/Personalized-Pet-Photo-Mug/c/154830001'>Personalized</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn5">KEYCHAINS</button>
<div class="dropdown-content">
<a href='https://www.myfourleggedkids.com/diana#!/Dogs/c/154869007'>Dogs</a>
<a href='https://www.myfourleggedkids.com/diana#!/Cats/c/154878008'>Cats</a>
<a href='https://www.myfourleggedkids.com/diana#!/Other/c/154874759'>Other</a>
<a href='https://www.myfourleggedkids.com/diana#!/Personalized/c/154871756'>Personalized</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn6">MFLK GEAR</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>