I am trying to create a reactive navbar with dropdown. To make things easier I have put my css in a style tag. I have tried everything I can think of to keep the "Our Story" under About from shifting left. Also to make this more of a challenge I am only allowing myself to use HTML and CSS.
thank you so much for the help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<title>Home</title>
<style>
/* CSS Document */
/* @import url(https://fonts.googleapis.com/css?family=Open Sans);
@import url(https://fonts.googleapis.com/css?family=Bree Serif); */
body {
background-image: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg);
background-size: cover;
background-repeat: no-repeat;
font-size:22px;
line-height: 32px;
color: #000;
margin: 0;
padding: 0;
word-wrap:break-word !important;
font-family: 'Roboto', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
line-height: 34px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
line-height: 70px;
font-family: 'Bree Serif', 'serif';
}
#title {
color: #000;
text-shadow: none;
}
#container {
margin: 0 auto;
max-width: 890px;
}
p {
text-align: center;
}
.toggle,
[id^=drop] {
display: none;
}
/* Giving a background-color to the nav container. */
nav {
margin:0;
padding: 1em;
background-color: #FFF;
}
#logo {
display: block;
padding: 0 30px;
float: left;
font-size:40px;
font-weight: 700;
line-height: 60px;
}
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content:"";
display:table;
clear:both;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
float: right;
padding:0;
margin:0;
list-style: none;
position: relative;
background-color: #34cc99;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display:inline-block;
float: left;
background-color: #FFF;
}
/* Styling the links */
nav a {
display:inline-block;
padding:14px 20px;
color:#fff;
font-size:20px;
text-decoration:none;
white-space: nowrap;
text-align: center;
}
nav ul li ul li:hover, nav ul li:hover { background: #34cc99; color: #FFF; width: max-content;padding: 0%; text-align: center;}
nav:hover{
border-bottom: #34cc99 5px solid;
}
/* Background color change on Hover */
nav a:hover {
background-color: #019966;
color: #ffffff;
text-shadow: 1px 1px lightgray;
width: auto;
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* has to be the same number as the "line-height" of "nav a" */
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
background-color: #019966;
color: #FFF;
text-align: center;
width: max-content;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:auto;
float:none;
display:list-item;
position: relative;
background-color: #34cc99;
color: #FFF;
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
position: relative;
top:-60px;
/* has to be the same number as the "width" of "nav ul ul li" */
left:170px;
}
/* Change ' ' in order to change the Dropdown symbol */
li > a:after { content: ' '; }
li > a:only-child:after { content: ''; }
/* Media Queries
--------------------------------------------- */
@media all and (max-width : 768px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
/* Hide the navigation menu by default */
/* Also hide the */
.toggle a,
.menu {
display: none;
}
/* Styling the toggle lable */
.toggle {
display: block;
background-color: #254441;
padding:14px 20px;
color:#FFF;
font-size:17px;
text-decoration:none;
border:none;
}
.toggle:hover {
background-color: #000000;
}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop]:checked ul {
display: block;
}
/* Change menu item's width to 100% */
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
background-color: #000000;
color: #FFF;
}
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a{
padding:14px 20px;
color:#FFF;
font-size:12px;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #212121;
}
/* Hide Dropdowns by Default */
nav ul ul {
float: none;
position:static;
color: #ffffff;
/* has to be the same number as the "line-height" of "nav a" */
}
/* Hide menus on hover */
nav ul ul li:hover > ul,
nav ul li:hover > ul {
display: none;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
/* has to be the same number as the "width" of "nav ul ul li" */
}
}
@media all and (max-width : 330px) {
nav ul li {
display:block;
width: 94%;
}
}
</style>
</head>
<body>
<nav>
<div id="logo">GETUWIRED</div>
<label for="drop" >Menu</label>
<input type="checkbox" id="drop" />
<ul >
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" >WordPress </label>
<a href="#"id="title">ABOUT</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a href="#">OUR STORY</a></li>
<li><a href="#">OUR COMMITMENT TO YOU</a></li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" >Web Design </label>
<a href="#"id="title">LOCATIONS</a>
<input type="checkbox" id="drop-2"/>
<ul>
<li><a href="#">AUSTIN, TX</a></li>
<li><a href="#">ATLANTA, GA</a></li>
<li><a href="#">SEATTLE, WA</a></li>
<li><a href="#">PORTLAND, OR</a></li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" >WordPress </label>
<a href="#"id="title">PRODUCTS</a>
<input type="checkbox" id="drop-3"/>
<ul>
<li><a href="#">NEW ARRIVALS</a></li>
<li><a href="#">FEATURED</a></li>
<li><a href="#">TOP RATED</a></li>
<li><a href="#">HIS</a></li>
<li><a href="#">HERS</a></li>
<li><a href="#">KIDS</a></li>
<li><a href="#">ACCESSORIES</a></li>
<li><a href="#">SPRING CATALOG</a></li>
<li><a href="#">THE ESSENTIALS</a></li>
<li><a href="#">SALE</a>
</ul>
</li>
<li><a href="#"id="title">BLOG</a></li>
<li><a href="#"id="title">CONTACT</a></li>
</ul>
</nav>
</body>
</html>
CodePudding user response：
I tested here and this worked:
/* I modified that part */
nav ul li ul li:hover,
nav ul li:hover {
background: #34cc99;
color: #FFF;
padding: 0%;
text-align: center;
}
/* I added this part */
nav ul li ul li {
width: 100%;
}
/* I added this part */
nav ul li ul li:hover a {
max-width: 100%;
display: block;
}
CodePudding user response：
Try this solution
Delete width: max-content; from :
nav ul li ul li:hover, nav ul li:hover {
background: #34cc99;
color: #FFF;
/* width: max-content; */
padding: 0%;
text-align: center;
}
Also, add display: block; to :
nav a:hover {
display: block;
background-color: #019966;
color: #ffffff;
text-shadow: 1px 1px lightgray;
width: auto;
}