I am unable to reach the list element that is positioned at level 2, right after the level 3 submenu because when I hover out of the level 3 submenu the whole menu collapses to level 1.
The item that I am unable to reach is titled "Unreachable" in the code.
N.B.: I am able to reach the item if I bypass the level 2 menu, i.e. approach it without triggering level 2. But most of the time, the end user will hover over level 2 before approaching that item and will not be able to reac it.
.side-nav-bar-menu {
position: absolute;
height: 100%;
overflow: hidden;
white-space: nowrap;
width: 19.692em;
padding-top: 0.385em;
}
.side-nav-bar-menu ul {
list-style: none;
padding: 0;
margin: 0;
background-color: red;
}
.side-nav-bar-menu li:hover {
background-color: blue
}
.side-nav-bar-menu ul li ul {
display: none;
}
.side-nav-bar-menu ul li:hover > ul {
display: block;
}
.side-nav-bar-menu ul li ul li {
margin-left: 15px;
}
.side-nav-bar-menu ul li ul li ul li {
margin-left: 30px;
}
<div class="side-nav-bar-menu">
<ul>
<li>
<a>L1</a>
<ul>
<li><a>L2</a></li>
<li>
<a>L2</a>
<ul>
<li><a>L3</a></li>
<li><a>L3</a></li>
</ul>
</li>
<li><a>Unreachable</a></li>
</ul>
</li>
<li>
<a>L1</a>
<ul>
<li><a>L2</a></li>
</ul>
</li>
</ul>
</div>
Updated with new fix
Try this:
.side-nav-bar-menu {
position: absolute;
height: 100%;
overflow: hidden;
white-space: nowrap;
width: 19.692em;
padding-top: 0.385em;
}
.side-nav-bar-menu ul {
list-style: none;
padding: 0;
margin: 0;
background-color: red;
}
.side-nav-bar-menu li:hover {
background-color: blue
}
.side-nav-bar-menu ul li ul {
display: none;
}
.side-nav-bar-menu ul li:hover ul{
display: block;
}
.side-nav-bar-menu ul li ul li {
margin-left: 15px;
}
.side-nav-bar-menu ul li ul li ul li {
margin-left: 30px;
}
<div class="side-nav-bar-menu">
<ul>
<li>
<a>L1</a>
<ul>
<li><a>L2</a></li>
<li>
<a>L2</a>
<ul>
<li><a>L3</a></li>
<li><a>L3</a></li>
</ul>
</li>
<li><a>Reachable</a></li>
</ul>
</li>
<li>
<a>L1</a>
<ul>
<li><a>L2</a></li>
</ul>
</li>
</ul>
</div>
Related
I created a menu with multiple submenus. I've been searching for ways to make the submenus dropdown in a horizontal fashion from the original menu to the submenu, and then to the final submenu (which I can sometimes get by accident, but then I screw everything up and go back to my original horizontal menu with vertical submenus). I've tried changing them to in-line block, static, and block, but I can't force it to work. Is there an easier way? What am I missing?
/* Navigation Bar Menu */
nav {
color: #F00;
min-width: 100%;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display: inline-block;
float: none;
white-space: nowrap;
}
nav a {
display: block;
padding: 0 10px;
color: #F00;
font-size: 20px;
line-height: 30px;
text-decoration: none;
}
nav a:hover {
color: #FFF;
background-color: #CCC;
transition: all .3s ease;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul li:hover>ul {
display: inherit;
transition: all .3s ease;
}
nav ul ul li {
min-width: 170px;
display: list-item;
position: relative;
}
nav ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
<nav>
<ul>
<li>Home</li>
<li>About
<ul>
<li>Our Team</li>
</ul>
</li>
<li>Services
<ul>
<li>Cardiovascular
<ul>
<li>Perfusion</li>
<li>PTCA & IABP</li>
<li>ECMO</li>
<li>TAVR</li>
</ul>
</li>
<li>Blood Management
<ul>
<li>Autotransfusion</li>
<li>Platelet Gel</li>
</ul>
</li>
</ul>
</li>
<li>Products
<ul>
<li>Disposables</li>
<li>Featured Products</li>
</ul>
</li>
<li>Contact
<ul>
<li>Employment Inquiries</li>
<li>Contact</li>
</ul>
</li>
</ul>
</nav>
Sorry if I'm missing something, but is this what you're looking for?
https://codepen.io/will0220/pen/VMMgMb
This
nav ul ul li {
display: list-item;
}
Needs the display property removed, display: list-item forces it into rows. Hope this helps!
I need the submenu to show when hovering over the corresponding navigation element on the navigation bar. For the second level navigation list, I set display to none as follows
nav ul ul {
position:absolute; top: 100%;
background-color: #2b0306;
display: none;
}
and set the the first navigation list to display as inline-block as follows:
nav ul li a {
display: inline-block;
color: #fff;
padding: 10px 20px;
text-decoration: none;
width: 250px;
position: relative;
}
nav ul li a:visited { color: #fff; }
nav ul li a:hover { background-color: #6d0911; }
nav ul ul { position:absolute; top: 100%; background-color: #2b0306; display: none; }
nav ul ul li { position: relative; }
nav ul ul ul { left: 100%; top: 0px; }
As for the nav position, I set it to absolute:
nav {
background-color: rbga(0,0,0,.65);
position: absolute;
top: 0px; left: 0px;
padding: 50px 0 0 0;
width: 100%;
}
nav::after { content: ' '; display: block; clear: both; }
nav ul { list-style: none; margin: 0; padding: 0px; }
nav ul li: hover { background-color: #2b0306; }
nav ul li: hover > ul { display: block; }
/* top-level */
nav > ul { padding-left: 300px; }
nav > ul > li { float: left; }
nav > ul > li > a {
width: auto;
padding: 10px 20px 15px 20px;
}
And this is the HTML code:
<nav>
<ul><!--first level navigation-->
<li><a title="About Us" href="aboutATMC.php" >About Us</a></li>
<li>
<a title="Services" href="#" aria-haspopup ="true">Services</a>
<ul><!--Second level navigation-->
<li><a title="Consultancy" href="#">Consultancy</a></li>
<li>
<a title="Learning & Development Solutions" href="#" aria-haspopup ="true">Learning & Development Solutions</a>
<ul><!--Third level navigation-->
<li><a title="Training & Coaching" href="#">Training & Coaching</a></li>
<li><a title="Learning Material" href="#">Learning Material</a></li>
</ul><!--End of third level-->
</li>
</ul><!--end of second level-->
</li>
<li><a onclick="toggleNavPanel ('contact_panel')" id = "contactus" href="#" >Contact Us <span id="navarrow"> ▾</span></a></li>
</ul><!--End of first level-->
</nav>
Any advice please?
Try this:
/* top menu */
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li a {
padding: 10px;
display: inline-block;
}
nav > ul > li {
display: inline-block;
}
/* sub menu */
nav > ul > li > ul {
display: none;
position: absolute;
background-color: #ccc;
}
nav ul li:hover {
background-color: #ccc;
}
nav ul li:hover ul {
display: block;
}
<nav>
<ul>
<li>
Menu A
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
<li>
Menu B
</li>
</ul>
</nav>
Here I added some HTML code
<nav>
<ul>
<li>
<a href='#'>Test</a>
<ul id='submenu'>
<li>Submenu Test</li>
<li>Submenu Test</li>
<li>Submenu Test</li>
</ul>
</li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</nav>
<style>
nav {
background-color: rbga(0,0,0,.65);
position: absolute;
top: 0px; left: 0px;
padding: 50px 0 0 0;
width: 100%;
}
nav ul ul {
position:absolute;
top: 100%;
background-color: #2b0306;
display: none;
}
nav ul li:hover > #submenu {
display: block;
}
nav ul li a {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
width: 250px;
position: relative;
}
</style>
If you ever see the box appears as you hover, great!
I'm having trouble getting the alignments right on a nav bar. I'm trying to figure out how to get the logo part to stay on the left of the nav bar, but put the links on the right side. I've tried using float: right but I can't seem to get it to work on just the links. How can I do this?
https://jsfiddle.net/t46bcayd/1/
<nav>
<ul>
<li>Logo</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
Flexbox is perfect here...no need to change the structure, unless you want to.
body {
margin: 0;
padding: 0;
font-size: 15px;
}
nav {
background-color: black;
margin: 0;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
color: white;
background-color: red;
display: block;
line-height: 3em;
padding: 1em 3em;
text-decoration: none;
}
nav ul li:first-child {
margin-right: auto;
}
nav ul li a.logo {
background-color: green;
}
nav ul li a:hover {
background-color: blue;
}
<nav>
<ul>
<li>Logo
</li>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</nav>
If you remove the inline-block rule for the list items you can float the first one left and the others right:
li {
float: right;
}
li:first-child {
float: left;
}
jsFiddle example
You'd also need to re-order the list items that are floated right to:
<li>Logo</li>
<li>Three</li>
<li>Two</li>
<li>One</li>
You could use flexbox for this.
<style>
nav{
display:flex;
justify-content: space-between;
align-items: center;
}
</style>
<nav>
Logo
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
Remember prefixes ... works in IE > 9
Use the float:left property
body {
margin: 0;
padding: 0;
font-size: 15px;
}
nav {
background-color: black;
margin: 0;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li:not(:first-child) {
float: right;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
color: white;
background-color: red;
display: block;
line-height: 3em;
padding: 1em 3em;
text-decoration: none;
}
nav ul li a.logo {
background-color: green;
}
nav ul li a:hover {
background-color: blue;
}
<nav>
<ul>
<li>Logo</li>
<li>Three</li>
<li>Two</li>
<li>One</li>
</ul>
</nav>
I did have to change the order so they showed up right
This is my HTML Code for menu
<div style="visibility:visible; color: #FFF; top:125px; width:100%; height:40px; position:absolute; display:block;background:#2B63B3;">
<ul id="trans-nav">
<li>Home</li>
<li>About us</li>
<li>Academic
<ul>
<li> Sub Menu 1 </li>
<li> Sub Menu 2 </li>
<li> Sub Menu 3 </li>
</ul>
</li>
<li>Administration</li>
<li>Miscellanous
<ul>
<li> Sub Menu 1 </li>
<li> Sub Menu 2 </li>
</ul>
</li>
</ul>
</div>
This the CSS code for menu
#trans-nav { list-style-type: none; height: 40px; padding: 0px 15px; margin: 0px; }
#trans-nav li { float: left; width:110px; position: relative; padding: 0px; line-height: 40px; background: #2B63B3; text-align:center; }
#trans-nav li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; }
#trans-nav li a:hover { color: #97B7E6; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #2B63B3; list-style-type: none; padding: 0; margin: 0; z-index:1;}
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #2B63B3; }
#trans-nav li ul li a:hover { background: #2B63B3; }
When I hover on any menu item color gets changed and when I click on item it navigates to the page but the the color of the text revert back to white. I want to keep the changed color till any other menu item is not clicked.
Any advice, suggestion or guidance is appreciable.
Thanking you all in advance
You can add a '.current' class to the anchor tag, via javascript. And give it those styles.
(Or if your nav is seperate on all pages just add it to the current pages nav, no need for js.)
I'm making a simple drop down menu that I'm using JavaScript to show and hide. The menu shows, and the links work still, but when I hover past the first link to drop down, the whole drop down menu goes away, even though I set a specific height for it. I also have a separate div with content below it, and the text in that div gets pushed out of the way, though I thought z-index would fix that.
function showDrop() {
document.getElementById("dropdown").style.visibility = "visible";
}
function hideDrop() {
document.getElementById("dropdown").style.visibility = "hidden";
}
#nav {
/* margin-left: 550px;
padding-top: 110px; */
font-family: 'Averia Serif Libre', cursive;
font-size: 24px;
position: relative;
}
#nav ul li {
display: block;
float: left;
margin-right: 10px;
}
#nav ul li a:link,
#nav ul li a:visited {
text-decoration: none;
float: left;
}
#nav ul li a:hover,
#nav ul li a:active {
color: #00B2EE;
}
#nav ul li ul {
visibility: hidden;
top: 0;
left: 0;
display: block;
width: 100px;
height: 100px;
clear: both;
z-index: 2;
padding-top: 2px;
}
#nav ul li ul li {
width: 100px;
z-index: inherit;
background-color: #AAA;
font-size: 16px;
line-height: 22px;
}
<div id="nav">
<ul>
<li>About</li>
<li>Portfolio
<ul id="dropdown" onMouseOut="hideDrop();">
<li>Print Design</li>
<li>Web Design</li>
<li>Illustration</li>
</ul>
</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
Use the onmouseleave event instead, because onmouseout considers the mouse to be 'out' even if you're hovering children of the element. Sample code:
$("#dropdown").mouseleave(function() { //jQuery required; onmouseleave is IE-specific
hideDrop();
});
Hope that helped.