Looks like I am missing a code snippet to align the sub submenu of my nav to the side. I also want to hide it until the sub menu item is clicked/hovered on. Can someone help me figure out what code I need?
My code:
<head>
<ul id="drop-nav">
<li><a href="#">  Buy Now</a></li>
<li><a href="#">  More Buying Options ▾ </a>
<ul>
<li><a href="#">Buy From Amazon</a></li>
<li><a href="#">Buy From Amazon UK</a></li>
<li><a href="#">Buy From Amazon FR ▸ </a></li>
<ol>
<li><a href="#">First Book Title</a></li>
<li><a href="#">Second Book Title</a></li>
<li><a href="#">Third Book Title</a></li>
</ol>
</ul>
</li>
</ul>
<style type="text/css">
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul li {
display: block;
position: relative;
float: left;
border: 1px solid #fff
}
li ul {
display: none;
}
ul li a {
display: block;
background: #f3f3f3;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #666666;
}
ul li a:hover {
background: #cccccc;
}
li:hover ul {
display: block;
position: relative;
}
li:hover li {
float: none;
}
li:hover a {
background: #f3f3f3;
}
li:hover li a:hover {
background: #CCCCCC;
}
#drop-nav li ul li {
border-top: 0px;
}
</style>
</head>
Hi Ray H, thanks for your reply! I didn’t realize I was ‘cheating’ by using the <ol> tag. I was trying so hard to get the sub submenu to flush! I am trying to replicate a menu which I made from a paid online service but I don’t want to pay a yearly subscription for the piece of code, plus, there’s a limit on the number of codes I can then make depending on the subscription package.
Well, here’s the exact menu I’m trying to replicate:
It worked! Thanks so much PaulOB! I also need to figure out my menu dimensions. It’s too narrow and I would like it to be bigger . I have very very elementary knowledge of html (actually, I just can find codes, copy and find the right place to post without swooning from seeing so many funny characters!) so I’ve been tinkering with the padding but nothing is working! In fact, my first menu column looks a little smaller after my tinkering but I didn’t know how to retrace my steps with that. So, please, if you can give me one last code to resize the menu boxes to be the exact same height and also be larger overall, I would be very grateful!
Please compare the one I am trying to replicate with my own:
Oh, I’ve also found the menu still lists the sub submenu items under the submenu. I think I need a code to hide the sub submenu until the submenu item is hovered. Here’s what I found online but it isn’t working?
You need to be more specific so to reveal just the next sub menu you would say.
li:hover > ul {
display: block;
}
Note the use of the child selector which limits the reveal to the next menu only and not the sub sub menu.
You can see the technique evident in my old codepen here.
Rather than using display:none its better to hide the menu off-left screen so its available for accessibility and seo reasons more easily but that’s a question for another day.
You can make the sub menu the same width as the parent quite easily or you could add a fixed width if needed by just applying it to the ul of the submenus. I think they look neater when matched to the top menu widths of each one (unless the item is too small).
Here’s your code re-vamnped.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
.drop-nav li {
position: relative;
float: left;
}
.drop-nav li > ul {
position: absolute;
left:-999em;
width:100%;
top:0;
transition:top .5s ease;
}
.drop-nav ul ul {
transition:transform .5s ease, opacity .3s ease;
transform:translateX(0);
opacity:0;
}
.drop-nav a {
display: block;
background: #f3f3f3;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #666666;
border: 1px solid #fff;
line-height:1.2em;
}
.drop-nav a:hover {
background: #ccc;
}
.drop-nav li:hover > ul {
left:0;
top:100%;
}
.drop-nav li li:hover > ul {
left:0;
transform:translateX(100%);
top:0;
opacity:1;
}
.drop-nav ul li {
float: none;
}
.drop-nav li:hover > a {
background: #ccc;
}
</style>
</head>
<body>
<ul id="drop-nav" class="drop-nav">
<li><a href="#"> Buy Now</a></li>
<li><a href="#"> More Buying Options ▾</a>
<ul>
<li><a href="#">Buy From Amazon</a></li>
<li><a href="#">Buy From Amazon UK</a></li>
<li><a href="#">Buy From Amazon FR ▸</a>
<ul>
<li><a href="#">First Book Title</a></li>
<li><a href="#">Second Book Title</a></li>
<li><a href="#">Third Book Title</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Oh My Lord! Thank you, thank you, thank you! The code is perfectly 100% what I needed!
Ps: I can also see in my notification that some other guys have left me responses, but unfortunately I can’t see their comments in the thread. I’m not ignoring you, guys, and I appreciate your taking time to weigh in, thank you too!
