下拉菜单导航中子菜单的对齐

Question

I've got a navigation menu bar with dropdown submenus and a subsubmenu for one of the submenu choices (Menu 2.3).

But the subsubmenu appears aligned with the bottom of the submenu choice instead of the top, as I thought I'd selected with vertical-align: top; .

It's easiest seen with this jsfiddle . Can anyone tell me what I'm doing wrong?

Answer 1

Instead of vertical-align, I recommend to use relative and absolute position.

On your jsfiddle :

At line 45 : replace display: inline by position: relative;

At line 67 , add top: 0;

Answer 2

Just use

#nav ul li ul li {
 display: inline;
 position: relative;
}

#nav ul ul li ul {
  position: absolute;
  display: block;
  visibility: hidden;
  vertical-align: top;
  left: 100%;
  top:0;
  /*  margin-top: -32px;*/
}

and you ware not using position relative in second level menu and top:0 in third level here the code try it

 .spacer { width: 100%; clear: both; } #nav { clear: both; width: 100%; } #nav ul { margin: 0; padding: 0; width: 100%; } #nav ul li { list-style: none; float: left; width: 160px; } #nav ul li a { display: block; padding: 5px 5px; background-color: #ea4; text-decoration: none; text-align: center; color: #000; font-weight: bold; } #nav ul li a:hover { background-color: #ccf; } #nav ul li a.selected { background-color: #eee; font-weight: bold; } /* Drop-down menu styles */ #nav ul li ul { position: absolute; visibility: hidden; margin: 0; padding: 0; width: 160px; z-index: 1000; } #nav ul li ul li { display: inline; position: relative; } #nav ul li ul li a { text-align: left; padding-left: 10px; background-color: #ea4; } #nav ul li:hover > ul { display: block; visibility: visible; } #nav ul li ul li a:hover { background-color: #ccf; } /* Submenu styles */ #nav ul ul li ul { position: absolute; display: block; visibility: hidden; vertical-align: top; left: 100%; top:0; /* margin-top: -32px;*/ } #nav ul ul li i { position: relative; float: right; } 

 <div id="nav"> <ul> <li><a href="/">Home</a> </li> <li><a href="/menu1">Menu 1</a> <ul> <li><a href="/menu1-1/">Submenu 1.1</a> </li> <li><a href="/menu1-2/">Submenu 1.2</a> </li> <li><a href="/menu1-3/">Submenu 1.3</a> </li> </ul> </li> <li><a href="/menu2/">Menu 2</a> <ul> <li><a href="/menu2/menu2-1/">Submenu 2.1</a> </li> <li><a href="/menu2/menu2-2/">Submenu 2.2</a> </li> <li><a href="/menu2/menu2-3/">Submenu 2.3<i class="fa fa-caret-right"></i></a> <ul> <li><a href="/menu2/menu2-3/menu2-3-1/">Subsubmenu 2.3.1</a> </li> <li><a href="/menu2/menu2-3/menu2-3-2/">Subsubmenu 2.3.2</a> </li> </ul> </li> <li><a href="/menu2/menu2-4/">Submenu 2.4</a> </li> <li><a href="/menu2/menu2-5/">Submenu 2.5</a> </li> </ul> </li> <li><a href="/menu3/">Menu 3</a> </li> </ul> </div> <div class="spacer"></div> <div class="container"> <p>Content Here!</p> </div>