如何将li菜单与水平类的下拉菜单对齐

Question

我有这个菜单结构，但顶级项目没有水平对齐。它们是具有“查找表”和“MainMenu2”的“li”元素及其下方的下拉列表。目前它们出现在彼此之下或略微相互之间。我该如何改变自己的风格呢？

谢谢。

	#main_nav ul
	{
		background: black;
		float: left;
		-webkit-transition: .5s;
		transition: .5s;
	}

	.dropdown-submenu 
	{
		position: relative;
	}

	.dropdown-submenu .dropdown-menu 
	{
		top: 0;
		left: 100%;
		margin-top: -1px;
	}

<nav id="main_nav" class="navbar navbar-inverse" style="position:fixed;top:0px;width:100%;">
  <div class="container-fluid" style="background-color: black;color:gainsboro;">
      <ul style="list-style: none; margin: 5px 15px -50px -3px; padding: 2px; left: 0px; width: 20%; position: absolute; background-color: black;">
	<li class="dropdown-menu" style="background-position: inherit; margin: 5px; width: 20%; color: gainsboro; float: left; display: block; position: relative; background-image: inherit; background-attachment: inherit; background-repeat: inherit; background-size: inherit; background-origin: inherit; background-clip: inherit; background-color: black;">
	    <a class="dropdown-toggle" aria-expanded="false" style="color: gainsboro; background-color: black !important;" href="#" data-toggle="dropdown">
	        LookupTables
	        <span class="caret"></span>
	     </a>
		 <ul class="dropdown-menu" style="background: black !important; width: 20%;">
		     <li class="dropdown-submenu">
			 <a style="color: gainsboro; background-color: black !important;" href="/City/List">
			     Cities
			 </a>
		      </li>
		      <li class="dropdown-submenu">
			  <ul class="dropdown-menu">
			      <li class="dropdown-submenu">
				  <a style="color: gainsboro; background-color: black !important;" href="/TTT/Edit">
					TTT
				  </a>
			       </li>
			  </ul>
			</li>
		    </ul>
		</li>
		<li class="dropdown-menu show" style="background-position: inherit; margin: 5px; width: 20%; color: gainsboro; float: left; display: block; position: relative; background-image: inherit; background-attachment: inherit; background-repeat: inherit; background-size: inherit; background-origin: inherit; background-clip: inherit; background-color: black;">
		    <a class="dropdown-toggle" aria-expanded="true" style="color: gainsboro; background-color: black !important;" href="#" data-toggle="dropdown">
			MainMenu2
			<span class="caret"></span>
		    </a>
		    <ul class="dropdown-menu show" style="background: black !important; width: 20%;">
			<li class="dropdown-submenu">
			    <a style="color: gainsboro; background-color: black !important;" href="/TTT/Edit">
				Vehicles
			    </a>
			</li>
		    </ul>
		</li>
	   </ul>
 </div>
  </nav>

Answer 1

我找到了答案。需要进行2项更改。

我用这个替换了前3行

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
   <div class="navbar-collapse collapse navbar-left">
      <ul class="nav navbar-nav">

并补充说

display:inline-block

到topline li元素