vildock365
New Member
I am building a CSS only two-level horizontal navigation bar with relative sub-navigation to the parent. All menu items are inline. Dependent upon the classes 'right' or 'left', the sub-nav aligns to the parent. This is what I've managed to accomplish so far: html:\[code\]<body> <div class="navbar"> <ul class="topnav left"> <li>nav</li> <li>menu1 <span class="subnav"> <ul class="subnav subnav-left"> <li>item1-1</li> <li>item1-2</li> <li>item1-3</li> </ul> </span> </li> <li>menu2 <span class="subnav"> <ul class="subnav subnav-left"> <li>item2-1</li> <li>item2-2</li> <li>item2-3</li> </ul> </span> </li> </ul> <ul class="topnav right"> <li class="right">menu3 <span class="subnav subnav-right"> <ul class="subnav subnav-left"> <li>item3-1</li> <li>item3-2</li> <li>item3-3</li> </ul> </span> </li> <li class="right">menu4 <span class="subnav subnav-right"> <ul class="subnav subnav-left"> <li>item4-1</li> <li>item4-2</li> <li>item4-3</li> </ul> </span> </li> </ul> </div></body>\[/code\]css:\[code\]body { font-family: arial; margin: 0;}.navbar { height: 40px; background-color: black;}ul.topnav { margin: 0; padding: 0;}.subnav { position: absolute;}.subnav-right { right: 0;}ul.subnav { position: relative; margin: 4px 0 0 -8px; padding: 0; display: none;}ul.topnav li{ list-style: none; display: inline-block; color: white; padding: 4px 8px; font-weight: bold; line-height: 32px; float: left; clear: none; box-sizing: border-box;}ul.subnav li { background-color: red; list-style: none; display: inline-block; color: white; padding: 4px 8px; font-weight: bold; position: relative; line-height: 32px; float: left; clear: none; box-sizing: border-box;}.topnav li:hover { background-color: red;}.topnav li:hover ul.subnav { display: inline-block; background-color: red;}.nav ul li:hover { background-color: black;}.nav ul li { width: 100%;}.nav li ul { display: inline-block; clear: none; position: absolute; background-color: red; margin: 4px 0 0 -8px; padding: 0;}.left { float: left;}.right { float: right;}\[/code\]The jsfiddle:jsfiddle.net/aLZqZHere is what I'm trying to accomplish:image to nav menu