• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

nested submenu item does not line up to parent item in navbar

Contributor ,
Dec 08, 2022 Dec 08, 2022

Copy link to clipboard

Copied

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>
TOPICS
Code , How to , Performance

Views

183

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Contributor , Dec 09, 2022 Dec 09, 2022

I was able to fix the problem by changing the top from zero to "inherit", and adding a margin-top:

.sub-menu li:hover > .sub-menu {
top: inherit;
left: 110%;
margin-top: -1.5rem;
}
 

Votes

Translate

Translate
Community Expert ,
Dec 08, 2022 Dec 08, 2022

Copy link to clipboard

Copied

You understand that multi-level navigation is NOT mobile-friendly, right?  Owing to limited real estate and no mouse, streamlined navigation is preferred. 

 

I would structure the site with PRODUCTS on a separate page containing links to categories presented in visually interesting columns or cards that are easily accessed with adult finger taps & swipe gestures.

https://getbootstrap.com/docs/5.0/examples/features/

https://getbootstrap.com/docs/5.0/components/card/

 

Just something to consider when building mobile-first layouts.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 08, 2022 Dec 08, 2022

Copy link to clipboard

Copied

Thanks very much, I will have a look at that. 

The video I watched did appear to build a mobile friendly, multi-generational nav bar. 

https://youtu.be/wlCPOwBr7no

I did not implement  the third part yet though. I believe he used an overflow. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 09, 2022 Dec 09, 2022

Copy link to clipboard

Copied

LATEST

I was able to fix the problem by changing the top from zero to "inherit", and adding a margin-top:

.sub-menu li:hover > .sub-menu {
top: inherit;
left: 110%;
margin-top: -1.5rem;
}
 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines