Добрый день, появилась необходимость сделать меню такое что при наведение на один из подпунктов вложенные элементы списка раскрывались горизонтально. Подскажите, пожалуйста как это сделать ?
</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, а дальше спозицианирую. Но чёт не хочет оно мне в строку выстраиваться(