In theory when I step over the dropdown menu it should open normally and allow me to click until I exit the menu area, instead when I step over it and try to go down to select the menu disappears, I know it's an overflow problem but I can't seem to out of it I have already tried with the z-index
@import url("https://fonts.googleapis.com/css2?family=Roboto Serif:ital,wght@1,600&display=swap");
body {
margin: 0;
}
/*
#topcontainer{
opacity: 0.9;
background-color: #1f1f1f;
height: 80px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
} Vedere zia*/
#subcontainer {
opacity: 0.9;
background-color: #1f1f1f;
height: 80px;
width: 100%;
display: flex;
flex-direction: row;
border-bottom: 1px solid black;
position: fixed;
z-index: 99;
}
ul#nav {
list-style-type: none;
font-size: 30px;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex: 9;
flex-direction: row;
}
ul#nav li {
height: 60px;
display: flex;
box-sizing: border-box;
align-items: center;
}
ul#nav li a {
padding: 20px;
color: #ebebeb;
}
.Ilink {
text-decoration: none;
color: #000000;
}
.Ilink:hover {
color: #000000;
}
#logol {
margin: 0 0 0 20;
display: flex;
flex-direction: row;
align-self: center;
flex: 1;
flex-grow: 0;
}
#textr {
margin: 0 20 0 0;
line-height: 80px;
display: flex;
flex: 1;
align-self: center;
flex-direction: row-reverse;
font-size: 20;
color: white;
}
.dropdown {
position: relative;
display: inline-block;
z-index: 1;
}
.cont {
margin: 11 0 0 0;
opacity: 0.9;
display: none;
position: absolute;
background-color: #1f1f1f;
min-width: 400px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.cont a {
color: white;
padding: 0 16 0 16;
display: block;
text-align: left;
float: none;
font-size: 25;
z-index: 1;
}
.cont a:hover {
background-color: #ddd;
}
.dropdown:hover .cont {
display: block;
}
#princ {
background-image: url(./Immagini/princ.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
margin: 0;
width: 100%;
height: 1000;
z-index: 0;
}
#ptcont {
position: fixed;
width: 100%;
height: 68%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 0;
}
#princt {
font-size: 50px;
font-family: cursive;
color: white;
margin: 0;
}
#subt {
font-size: 30px;
font-family: cursive;
color: white;
margin: 0;
}
#textc {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 450;
background: #1f1f1f;
opacity: 0.5;
z-index: 3;
}
#textcs {
height: 70%;
padding: 0 10 0 40;
margin: 0 0 0 0;
font-size: 22px;
font-family: "Roboto Serif", serif;
color: white;
}
#topbanner {
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-image: url(./Immagini/header-menu1.jpg);
background-position: center;
background-size: cover;
}
#bgcont {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-image: url(./Immagini/sfondo-menup.jpg);
background-position: center;
background-size: cover;
z-index: 0;
}
#contcont {
width: 100%;
height: 100%;
background-color: white;
z-index: 1;
opacity: 0.5;
}
#footcontainer {
background-color: #363636;
height: 80px;
width: 100%;
text-align: center;
line-height: 80px;
color: white;
margin: 0 0 0 0;
}<html>
<head>
<title>Trattoria - HOME</title>
<link href="./style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<div id="subcontainer">
<img id="logol" src="./Immagini/logo.png" width="100px" height="50px" />
<ul id="nav">
<li><a href="./index.html" >Home</a></li>
<div >
<li id="drop">
<a href="./Pagine/#" >
Menù
<svg width="20" height="15" viewBox="-2.5 -5 75 60" preserveAspectRatio="none">
<path d="M0,0 l35,50 l35,-50" fill="none" stroke="white" stroke-linecap="round" stroke-width="5" />
</svg>
</a>
</li>
<div >
<a href="#" >Antipasti</a><br />
<a href="#" >Primi</a><br />
<a href="#" >Secondi</a><br />
<a href="#" >Dolci</a><br />
<a href="#" >Piatti del giorno</a>
</div>
</div>
<li><a href="#Chisiamo" >Chi Siamo</a></li>
<li><a href="./Pagine/#" >Aiuto</a></li>
</ul>
<div>
<a href="#" ><p id="textr">Accedi/Registrati</p></a>
</div>
</div>
</header>
</body>
</html>CodePudding user response：
Change margin to padding in .cont class
.cont{
padding: 11 0 0 0;
opacity: 0.9;
display: none;
position: absolute;
background-color: #1f1f1f;
min-width: 400px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
CodePudding user response：
You added hover to .dropdown so it affects both .dropdown and all of his children. This part is ok.
The issue is that you have a gap between the menu item #drop and the dropdown .cont. When you move the cursor down, at some point you come across this gap. That is when you are longer pointing to .dropdown or to any of the children so the .dropdown loses his hover state. To fix this, you need to eliminate this gap either by changing the size of the elements or by moving them closer together.
My original answer was to replace the margin with the padding in .cont, so the .cont is tall enough to eliminate this gap, but now i think a better solution would be to change the padding inside ul#nav li a element. If you change:
ul#nav li a {
padding: 20px;
color: #ebebeb;
}
to:
ul#nav li a {
padding: 25px 20px;
color: #ebebeb;
}
the appearance will not change but the link will cover the entire height of the header and the gap will disappear completely - the hover will be kept.