Всем привет. Нужно сделать три горизонтальних меню по центру div блока Как на рисунке.
Так же переместить знаки наверх. Вировнять по горизонтали смог, как вертикально уже пару дней не получается.
Вот мой код html и css.
body {
font-family: Arial, sans-serif;
}
.container {
background: #ffd1f7;
height: 60%;
width: 80%;
outline: 10px double black;
position: fixed;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.container div {
display: inline-block;
}
ul {
list-style-type: none;
}
li {
font-size: 20px;
float: left;
text-transform: uppercase;
margin-right: 50px;
text-align: center;
}
ul.menuFirst li {
background: url("../images/checked.png") no-repeat;
padding-left: 30px;
}
ul.menuFirst li:hover {
background: url("../images/checked-hover.png") no-repeat;
}
ul.menuThird{
list-style-image: url("../images/smile.png");
}
ul.menuThird li:hover {
list-style-image: url("../images/smile-hover.png");
}
<div class="container">
<div>
<ul class="menuFirst">
<li>About</li>
<li>News</li>
<li>Teachers</li>
<li>Programs</li>
<li>Cost</li>
</ul>
</div>
<div>
<ul class="menuThird">
<li>About</li>
<li>News</li>
<li>Teachers</li>
<li>Programs</li>
<li>Cost</li>
</ul>
</div>
</div>
в div контейнере должно быть 3 листа
<div>
<ul class="menuSecond">
<li>About</li>
<li>News</li>
<li>Teachers</li>
<li>Programs</li>
<li>Cost</li>
</ul>
</div>