I’ve posted a string of html code below.
I would like to find a way of
a. making the head width and drop down widths match each other exactly
b. add page links in HREF form to each of the subtitle categories.
Please see coding below
.navbar {
overflow: hidden;
background-color: #181818;
}
.navbar a {
float: left;
font-size: 18px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 18px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: Playfair Display;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #181818;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #B79259;
font-family: Playfair Display;
min-width: 100%;
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #000000;
}
.dropdown:hover .dropdown-content {
display: block;
}