Buongiorno a tutti, premetto che sono un novello nel mondo del web development per cui chiedo scusa dell'eventuale banalità della domanda. Non riesco a risolvere il problema che vedete nel video.
Nel dropdown menù che vedete (da cui ho preso spunto da un codice esistente) mi da questo errore "visivo", nel momento in cui vado in hover su un sottomenù il menù principale scatta verso l'alto
Ora vorrei che il sottomenu andasse in OFFSET magari nella sezione sottostante oppure in alternativa che il menù andasse verso l'alto ma in maniera dolce, magari attraverso una transition. Di seguito il codice.
Grazie mille per chi sarà disposto ad aiutarmi.
Nel dropdown menù che vedete (da cui ho preso spunto da un codice esistente) mi da questo errore "visivo", nel momento in cui vado in hover su un sottomenù il menù principale scatta verso l'alto
Ora vorrei che il sottomenu andasse in OFFSET magari nella sezione sottostante oppure in alternativa che il menù andasse verso l'alto ma in maniera dolce, magari attraverso una transition. Di seguito il codice.
Grazie mille per chi sarà disposto ad aiutarmi.
HTML:
<!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">
<script src="script.js" charset="utf-8" type="text/javascript"></script>
<!-- Ionicos script -->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<!-- end Ionicons script -->
</head>
<body>
<ul class="main__menu">
<li class="list-item">
<a href="#" class="home item--js">
<ion-icon size="large" name="home-outline"></ion-icon>
<span>Home</span>
</a>
</li>
<li class="list-item">
<a href="#" class="about item--js">
<ion-icon size="large" name="construct-outline"></ion-icon>
<span>Chi siamo</span>
<i class="ion ion-ios-contact-outline"></i>
</a>
</li>
CSS:
/*page menu_1*/
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
/*Colors*/
/*Font*/
/* Reset*/
*,
*::before
*::after
{
-webkit-box-sizing:border-box ;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
/*text-shadow: #fff 1px 1px 4px;*/
}
/* Start Style*/
.main__menu {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
.main__menu {
grid-template-columns: 1fr;
max-width: 300px;
}
}
.main__menu .list-item:hover .drop-menu li {
display: block;
transition: all 0.5s linear;
}
.main__menu .list-item:hover .menu-1 {
perspective: 1000px;
}
.main__menu .list-item:hover .menu-1 .drop-item {
opacity: 0;
}
.main__menu .list-item:hover .menu-1 .drop-item:nth-child(1) {
animation-name: leftToRight;
animation-duration: 400ms;
animation-delay: -150ms;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.main__menu .list-item:hover .menu-1 .drop-item:nth-child(2) {
animation-name: leftToRight;
animation-duration: 400ms;
animation-delay: 0ms;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.main__menu .list-item:hover .menu-1 .drop-item:nth-child(3) {
animation-name: leftToRight;
animation-duration: 400ms;
animation-delay: 150ms;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.main__menu .list-item:hover .menu-1 .drop-item:nth-child(4) {
animation-name: leftToRight;
animation-duration: 400ms;
animation-delay: 300ms;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
