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

Question

我具有此菜单结构，但顶层项目未水平对齐。 它们是带有“ Lookup Tables”和“ 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次更改。

我用此替换了前三行

<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

到顶部li元素