I am coding my own navbar in Dreamweaver CC. I have used bootstrap before, but now I prefer to code it myself. It's going ok, but I'm stuck on one problem. The nested submenu item does not line up to parent item . I've tried finding solutions, and toggling the CSS attributes, including changng the positioning from absolute to relative, but no luck. the url is:
https://www.atnuke.com/nav.html
If you hover over products, you see the product list. If you hover over instruments, the instrument list appears correctly. If you go down and hover over sources, the list of sources, rises to the top, instead of aligning to the parent element.
CSS code:
/* Add a black background color to the top navigation */
*{padding: 0;
margin: 0;
box-sizing: border-box;
}
header {background-color: #262626;}
li {list-style: none;}
a{color:white;
text-decoration: none;}
.navbar {
min-height: 70px;
display:flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.menu-icons{color: blue;
font-size: 4rem;
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
cursor: pointer;
z-index: 1500;
display: none;
}
.nav-menu {
display:flex;
justify-content: space-between;
align-items: center;
gap: 60px;
}
.nav-menu li:hover>.sub-menu{
top: 4rem;
opacity: 1;
visibility: visible;}
.sub-menu li:hover>.sub-menu{
top: 0rem;
left: 8rem;
}
.nav-branding {
font-size: 2rem;
}
.nav-link{
transition: 0.7s ease;
font-size: 1.2rem;
}
.nav-link:hover{
color: dodgerblue;
}
.nav-link-2{
transition: 0.7s ease;
font-size: 2rem;
}
.nav-link-2:hover{
color: dodgerblue;
}
.hamburger {display: none;
cursor: pointer}
.bar{display:block;
width: 25px;
height: 3px;
margin: 5px auto;
transition: 0.3s;
transition-timing-function: ease-in-out;
background: white;
}
.sub-menu {
line-height: 2rem;
width: max-content;
padding-left: 5px;
padding-right: 5px;
display: block;
position: absolute;
border-top: 3px solid #145DDD;
background-color: #191919;
z-index: 100;
transition: all 650ms ease;
top: 4rem;
visibility: hidden;
}
.sub-menu::before {
content: "";
position: absolute;
top: -1.5rem;
left: 2rem;
border: 0.6rem solid transparent;
border-bottom-color: cornflowerblue;
}
.sub-menu .sub-menu::before {
top: .9rem;
left: -1.5rem;
border: 0.6rem solid transparent;
border-right-color: cornflowerblue;
}
.sub-menu .sub-menu {
border-top:none;
border-left: 3px solid cornflowerblue;
top: 0;
left: 160%;
}
.nav-menu li:hover > .sub-menu {
top: 4rem;
opacity: 1;
visibility: visible;
}
.sub-menu li:hover > .sub-menu {
top: 0;
left: 100%;
}
@media(max-width:786px){
.hamburger{display: block;}
.hamburger.active .bar:nth-child(2){
opacity: 0;
}
.hamburger.active .bar:nth-child(1){
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3){
transform: translateY(-8px) rotate(-45deg);}
.nav-menu{
position: fixed;
left: -100%;
top: 70px;
gap: 0;
flex-direction: column;
background-color: #262626;
width: 100%;
text-align: center;
transition: 0.3s
}
.nav-item {
margin: 16px 0;
}
.nav-menu.active{
left: 0;
}
}
___________
html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>navigation</title>
<link href="CSS/navigation.css" rel="stylesheet" type="text/css">
</head>
<body><header>
<nav class="navbar">
<a href="index.htm" class="nav-branding nav-link-2">Atlantic Nuclear</a>
<ul class="nav-menu">
<li class="nav-item">
<a href="index.htm" class="nav-link">Home</a></li>
<li class="nav-item">
<a href="Products.html" class="nav-link">Products</a>
<ul class="sub-menu">
<li><a href="/nuclear/instr.html">Instrumentation</a>
<ul class="sub-menu"><li><a href="/nuclear/INSTRUMENTATION/Lud/ludlum.htm">Ludlum Instrumentation</a></li><li><a href="/nuclear/INSTRUMENTATION/Lud/probes.htm">Ludlum Probes</a></li>
<li><a href="/nuclear/Protean.html">Protean</a></li>
<li><a href="/nuclear/INSTRUMENTATION/dosimetry.html">Dosimetry</a></li>
<li><a href="/nuclear/INSTRUMENTATION/mp/dose_calibrators.html">Dose Calibrators</a></li>
<li><a href="/nuclear/INSTRUMENTATION/simulation.html">Simulated Rad Training</a></li>
<li><a href="/nuclear/INSTRUMENTATION/MCA.htm">Multi-Channel Analyzers</a></li>
</ul></li>
<li><a href="/nuclear/shielding.html">Shielding</a></li>
<li><a href="/nuclear/sources.htm">Sources</a><ul class="sub-menu"><li>
<a href="/nuclear/sources/floodsrc.htm">Flood Sources</a></li>
<li><a href="/nuclear/sources/floodsrc.htm">Check Sources</a></li>
<li><a href="/nuclear/sources/TubeSources.htm">Tube Sources</a></li>
</ul></li>
<li><a href="/nuclear/accessories.html">Accessories</a></li>
<li><a href="/nuclear/Airsampling.htm">Air Sampling</a></li>
<li><a href="/nuclear/hoods.htm">Hoods and Filters</a><ul class="sub-menu"><li><a href="/nuclear/hoods/Stainlesshood.htm">Stainless Steel Hoods</a></li>
<li><a href="/nuclear/hoods/iodinehoods.html">Portable Iodine Hoods</a></li></ul></li>
<li><a href="specials.htm">Specials</a></li>
</ul>
</li>
<li class="nav-item">
<a href="News.html" class="nav-link">News</a></li>
<li class="nav-item">
<a href="About.html" class="nav-link">About</a></li>
<li class="nav-item">
<a href="Contact.html" class="nav-link">Contact</a></li></ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div></nav>
</header>
<script src="js/navigation.js"></script>
</body>
</html>
1 Correct answer
3
Replies
AdChoices