what I’ve done till now is:
Show the div(A) on hover of div(B) that I have actually done and the real problem I’m getting is when I try to show the nav element of div(A) when it’s shown by hovering on div(B).
So the cycle is like: div(B)>div(A)>nav elements.
I’m attaching only relevant code as it might get to long to attach whole HTML file.
the HTML code is:
<!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">
<title>Target</title>
<link rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head>
<body>
<header>
<div class="header-first">
<div class="header-forvisibility">
<div class="header-second">
<div class="logo">
<img src="./images/target-logo.png" alt="Target-australia">
</div>
<div class="search">
<span class="search-icon">
<i class="fas fa-search"></i>
</span>
<input type="text" placeholder="Search products & brands" name="search">
<span class="mic-icon">
<i class="fas fa-microphone"></i>
</span>
</div>
<div class="setting-icons">
<div class="user">
<img src="./images/user.svg" alt="user">
</div>
<div class="heart">
<img src="./images/heart.svg" alt="heart">
</div>
<div class="cart">
<img src="./images/shopping-cart.svg" alt="cart">
</div>
</div>
</div>
</div>
<div class="header-third">
<div class="header-third-inner">
<ul class="nav-ul">
<li class="nav-li">Deals & Exclusives
<div class="mega-box deals-mega-box">
<hr>
<div class="content">
<div class="deals-and-exclusive">
<div class="row-1">
Shop All Deals & Exclusives
</div>
<hr>
<div class="row-2">
<div class="col-1">
<ul class="latest">
<li class="latest-li">Latest</li>
<li class="latest-li">Deals</li>
<li class="latest-li">Online Only</li>
<li class="latest-li">Clearance</li>
</ul>
</div>
<div class="col-2">
<div class="image-1">
<img src="./images/nav-col-2-image1.webp" alt="">
</div>
<div class="image-2">
<img src="./images/nav-col-2-image2.webp" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="animation-line start">
</div>
</div>
</div>
</div>
</header>
<main>
<div class="update-notification">
<h3><span class="free-delivery">Free delivery</span> orders over <span class="dollar">$45</span></h3>
</div>
I’m trying to mock this website navbar, after scrolling a little bit down you can hover and get the div(A) and then you can hover div(A) for nav elements but I’m not able to hover div(A). It just disappears when I move my mouse over div(A) elements.
The reference website is:
https://www.target.com.au/
Mine screenshot:
- First view:
-
When I scroll little bit down it will disappear the div(A):
-
Now if I try to hover div(A) it will show div(A) and if I try to hover div(A) it just disappears (instead, should show div(A) nav elements just like in the reference website link):
