Блог

Главная - Вопросы по программированию - Как выровнять меню li с выпадающими списками с классами по горизонтали

Как выровнять меню li с выпадающими списками с классами по горизонтали

#html #css #drop-down-menu

#HTML #css #выпадающее меню

Вопрос:

У меня есть эта структура меню, но элементы верхнего уровня не выровнены по горизонтали. Это элементы «li» с «Таблицами поиска» и «MainMenu2» и их выпадающими списками под ними. В настоящее время они отображаются под или немного друг над другом. Как я должен изменить свой стиль, чтобы сделать это?

Спасибо.

введите описание изображения здесь

 	#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>

Комментарии:

1. не понял, что вы пытаетесь сказать в вопросе!!

2. Как мне выровнять элементы li основного уровня (меню верхнего уровня) по горизонтали. т.е. слева направо. Это те, которые имеют «LookupTables» и «MainMenu2» в качестве заголовков или текста.

3. Я прикрепил изображение, чтобы показать меню друг над другом, а не рядом.

Ответ №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

к элементам li верхней строки