Вот HTML. В полноэкранном режиме выглядит правильно. При изменении размера браузера, в частности уменьшении его размеров, элементы панели навигации перекрывают друг друга. Не могу понять, как это исправить. Я также включил CSS. Полагаю, это связано с позиционированием? Я попытался добавить относительное положение к элементу навигации, но это не устранило проблему. Любой вклад приветствуется. Спасибо.
#mainNav {
margin-left: 20px;
margin-top: 40px;
}
.dropButton {
background-color: #F4D35E;
color: #083D77;
font-weight: bold;
font-family: Futura, sans-serif;
text-decoration: none;
padding: 16px;
font-size: 28px;
border: none;
cursor: pointer;
}
.dropButton a {
text-decoration: none;
}
.dropDown a:hover {
color: #ED2E07;
}
.dropDown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #F4D35E;
color: #083D77;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-top: 15px;
}
.dropdown-content a {
padding: 12px 16px;
text-align: center;
text-decoration: none;
display: block;
color: #083D77;
}
.featRecipe {
display: flex;
flex-wrap: nowrap;
margin-left: 75px;
}
.drink1,
.drink2 {
margin-right: 110px;
}
.featRecipe li {
max-width: 300px;
}
.drinkOfTheDay {
display: flex;
flex-wrap: nowrap;
margin-left: 75px;
}
.imgOTD,
.image,
.ingr {
margin-right: 75px;
}
#libNav li {
display: inline;
padding-right: 10px;
}
.library {
margin-left: 20px;
margin-top: 40px;
}
.drink {
display: flex;
flex-wrap: nowrap;
}
.top {
text-align: center;
margin-bottom: 40px;
}
html {
background: #EBEBD3;
}
#siteTitle {
font-family: "Brush Script MT", sans-serif;
text-align: center;
font-weight: bold;
font-size: 70px;
color: #ED2E07;
margin-bottom: 0;
margin-top: 20px;
}
#pageTitle {
margin-top: 40px;
margin-bottom: 50px;
text-align: center;
font-size: 40px;
font-family: Andale Mono, monospace;
color: #ED2E07;
}
.body {
color: #083D77;
text-align: center;
}
main {
color: #083D77;
font-family: Andale Mono, monospace;
}
main h2,h3,h4 {
color: #F95738;
}
.featRecipe h3 {
text-align: center;
color: #083D77;
font-family: Andale Mono, monospace;
}
.dir li {
max-width: 500px;
}
#libNav a {
font-size: 20px;
color: #083D77;
}
.library h3 {
font-size: 24px;
font-weight: bold;
}
.dropdown-content a:hover {
background-color: #EBEBD3;
}
.dropDown:hover .dropdown-content {
display: block;
}
.dropDown:hover .dropButton {
background-color: #EE964B;
}
img {
border: solid 5px #F95738;
}
#libNav a:visited {
color: #083D77;
}
.top a, a:visited {
color: #083D77;
font-size: 16px;
}
.dropButton a:visited {
color: #083D77;
}
.dropdown-content a:hover {
color: #ED2E07;
}
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta name="author" content="Roman Kudryashov" />
<meta name="description" content="Drinkmastery.com provides a library of cocktails for drink enthusiasts, connoisseurs, and restaurant professionals." />
<meta name="keywords" content="coktails, drinks, bar, bartending, mixology, vodka, rum, gin, tequila, whiskey, mixed drinks, recipes, liquor, liquer" />
<title>Drink Mastery</title>
<link rel="stylesheet" href="../styles/layout.css">
<link rel="stylesheet" href="../styles/format.css">
<link rel="stylesheet" href="../styles/effects.css">
<script>
function con() {
var ans = window.confirm("Are you 21+ years old?\n\nPress \"OK\" if Yes, \"Cancel\" if NO");
if (ans == false) {
window.location = "http://www.google.com";
}
}
window.setTimeout("con()", 2000);
</script>
</head>
<body>
<h1 id="siteTitle">Drink Mastery</h1>
<nav id="mainNav">
<div class="dropDown">
<a href="home.html" class="dropButton">Home</a>
</div>
<div class="dropDown">
<a href="featuredCocktails.html" class="dropButton">Featured Cocktails</a>
</div>
<div class="dropDown">
<a href="seasonalCocktails.html" class="dropButton">Seasonal Cocktails</a>
<div class="dropdown-content">
<a href="xmasDrinks.html">Christmas Drinks</a>
<a href="springFavorites.html">Spring Favorites</a>
<a href="summerDrinks.html">Summer Drinks</a>
<a href="fallSpecials.html">Fall Specials</a>
</div>
</div>
<div class="dropDown">
<a href="drinkLibrary.html" class="dropButton">Drink Library</a>
<div class="dropdown-content">
<a href="vodka.html">Vodka</a>
<a href="rum.html">Rum</a>
<a href="gin.html">Gin</a>
<a href="tequila.html">Tequila</a>
<a href="whiskey.html">Whiskey</a>
<a href="misc.html">Miscellaneous</a>
</div>
</div>
<div class="dropDown">
<a href="resources.html" class="dropButton">Resources</a>
<div class="dropdown-content">
<a href="bartendingTips.html">Bartending Tips & Tricks</a>
<a href="education.html">Educational Articles</a>
</div>
</div>
<div class="dropDown">
<a href="aboutUs.html" class="dropButton">About Us</a>
</div>
</nav>
<h2 id="pageTitle">Welcome to Drink Mastery!</h2>
<p class="body">We strive to provide you with a complete library of various cocktail recipes! Happy mixing!</p>
<main>
<h3 id="dotd" style="font-size: 24px; font-weight: bold; color: #EE964B">Drink of the Day</h3>
<div class="drinkOfTheDay">
<img src="../images/mojito.jpg" alt="Mojito" height="300" class="imgOTD">
<div class="ingr">
<h4>Ingredients</h4>
<ul>
<li>10 fresh mint leaves</li>
<li>1/2 lime, cut into 4 wedges</li>
<li>2 ablespoons of white sugar</li>
<li>1.5 oz white rum</li>
<li>1/2 cup club soda</li>
</ul>
</div>
<div>
<h4>Directions</h4>
<ol class="dir">
<li>Place mint leaves and 1 lime wedge into a sturdy glass. Use a muddler to crush the mint and lime to release the mint oils and lime juice.</li>
<li>Add 2 more lime wedges and the sugar, and muddle again to release the lime juice.</li>
<li>Fill the glass almost to the top with ice.</li>
<li>Pour the rum over the ice, and fill the glass with carbonated water.</li>
<li>Stir, taste, and add more sugar if desired. Garnish with the remaining lime wedge.</li>
</ol>
</div>
</div>
</main>
<footer>
<p>© Created by Roman Kudryashov</p>
</footer>
</body>
</html>