Third level navigation css help

I’m trying to build a three level navigation … first level horizontal nav, second level vertical drop down menus but if there is a third level of navigation, I’d like the second level to display horizontally with the third level stacked in vertical columns underneath. Can anyone offer up sample css or a tutorial to make this happen please. I’ve looked into flex, nth child and scraped the css a few time.

Help please. Thanks in advance.

Hi,

It would help if you show what you have tried then we could point you in the right direction,

Styling a third level of a dropdown is no different from styling the second level and you just use descendant selectors to style the third level as required.

e.g.
ul.nav > li > ul {second level rules}
ul.nav > li > li > ul {third level rules}

The second level is usually placed at left:0 and top:100% and for the third level you want top:0; and left:100% instead.

This old article shows the basics but you should update the code to use the child selector and there’s no need for ie6 support these days as that browser has gone.

Here’s a working example with very basic styling so you should be able to work it all out.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {margin:0;padding:0;list-style:none}
.nav:after {content:"";display:table}
.nav > li {float:left;}
.nav li {position:relative;}
.nav a {display:block;padding:5px 10px;background:red;color:#fff;text-decoration:none;border:1px solid #000;margin:0 -1px -1px 0}
.nav li:hover > a{background:blue}
.nav ul {position:absolute;	margin-left:-999em;	left:0;	width:150px;}
.nav > li > ul {	left:0;	top:100%;}
.nav li li > ul {	left:100%;	top:0}
.nav li:hover > ul {	margin:0}
</style>
</head>

<body>
<ul class="nav">
		<li><a href="#">Menu</a>
				<ul>
						<li><a href="#">Sub Menu</a>
								<ul>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
								</ul>
						</li>
						<li><a href="#">Sub Menu</a>
								<ul>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
								</ul>
						</li>
						<li><a href="#">Sub Menu</a>
								<ul>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
								</ul>
						</li>
						<li><a href="#">Sub Menu</a>
								<ul>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
								</ul>
						</li>
				</ul>
		</li>
		<li><a href="#">Menu</a>
				<ul>
						<li><a href="#">Sub Menu</a>
								<ul>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
								</ul>
						</li>
						<li><a href="#">Sub Menu</a>
								<ul>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
								</ul>
						</li>
						<li><a href="#">Sub Menu</a>
								<ul>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
								</ul>
						</li>
						<li><a href="#">Sub Menu</a>
								<ul>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
								</ul>
						</li>
				</ul>
		</li><li><a href="#">Menu</a>
				<ul>
						<li><a href="#">Sub Menu</a>
								<ul>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
								</ul>
						</li>
						<li><a href="#">Sub Menu</a>
								<ul>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
								</ul>
						</li>
						<li><a href="#">Sub Menu</a>
								<ul>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
								</ul>
						</li>
						<li><a href="#">Sub Menu</a>
								<ul>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
										<li><a href="#">Sub Sub Menu</a></li>
								</ul>
						</li>
				</ul>
		</li>
</ul>
</body>
</html>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.