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

Курсы §13. Мастерская: создаём меню
1

Добрый день, появилась необходимость сделать меню такое что при наведение на один из подпунктов вложенные элементы списка раскрывались горизонтально. Подскажите, пожалуйста как это сделать ?

1213123.jpg1954×364 32.6 KB 

</head>
<body>

		<div class="menu">
	
	    <ul class="main-menu">
		
              <li><a href="Forum "> Forum </a></li>
              <li><a href="Blank_space"> Blank space</a></li>
			  <li><a href="Services"> Services </a>
				
			  <div class="servise_block">
				
				 <ul class="sub-menu-servious">
			                <li><a href="q "> qffetert </a></li>
							<li><a href="w "> werterterterter </a></li>
							<li><a href="e "> eertertertertert tertert</a></li>
							<li><a href="r ">ertertt </a></li>
							<li><a href="t"> tertert </a></li>
							<li><a href="y"> y </a></li>
							<li><a href="u "> u </a></li>
							<li><a href="i "> i </a></li>
							<li><a href="o "> o </a></li>
							<li><a href="p"> p </a></li>
				</ul>
				
				</div>
				
			  </li>
			  
			  <li><a href="Store"> Store </a>
			     	

			 </li>	
		
					
		
		
		
		</ul>
        
        </div>	







</body>
</html>

CSS

body {
    padding: 10px;
    font-family: "Arial", sans-serif;
    font-size: 20px;
    line-height: 1.4;
	color: white;
}

a { text-decoration: none;
	color: white;
}

.main-menu {
	 
	  padding:20px;
    
}

.main-menu  li {
  display: inline-block;
  background: grey;
  border: 2px solid black;
  padding:20px;
  float:left;
  list-style:none;
  width: auto;

}

.main-menu > li {
    position: relative;
}




.main-menu .servise_block { 


display: inline;  
position: absolute;
width: 300px;
margin: 0;
padding: 0;


display: none;
}

.main-menu > li:hover .servise_block {
    display: block;
}


.main-menu li:hover {
    color: white;
	background: red;
}

Я как думал - Заверну пункты подменю в блок, придам ему display: inline, а дальше спозицианирую. Но чёт не хочет оно мне в строку выстраиваться(

2

Опять код в сообщение вставляете… Напоминаю, есть онлайн-редакторы, очень полезны, во всех смыслах.

3

Блин, извиняюсь конечно, но пройдите еще раз курс о создании меню, и по аналогии сделайте его при выпадении не блочным а inline-block, разбираться в таком коде тяжело, и никогда не пишите в классах знак “_”

1 лайк
4

https://jsfiddle.net/BlackStar1991/p29ktLpz/6/

5

Пройдите курс по созданию меню. Единственное что могу посоветовать.

6

http://cssdeck.com/labs/full/xjotoqfy специально для вас нашел и переделал как вам надо, сделайте свой код аналогично и будет вам счастье:)

1 лайк
7

Ширина подменю должна быть такой, чтобы все пункты помещались в одну строку.
А вот это ваша самая большая ошибка:
.main-menu .servise_block {
display: inline;
position: absolute;
width: 300px;
margin: 0;
padding: 0;
display: none;
}

.main-menu > li:hover .servise_block {
display: block;
}
Если подменю вы делаете строчным элементом, то почему при наведении оно становится блочным?

1 лайк
8

да там лучше все переделать:) код вообще шаляй валяй как то, лишние div, много ошибок.

9

Ну, да, согласна, форматирование весьма “экзотическое”)

1 лайк