Мега -меню - не отображается должным образом ⇐ Html

[Anonymous]

Я пытаюсь создать мегамену, но он не отображается должным образом. Мега-меню отображается правильно, но элементы ребенка плавают справа от родительского элемента. Также каждый блок не отображается в виде столбца - элементы в каждом блоке плавают слева друг от друга. Я хочу использовать CSS, а не Flexbox. < /P>
Фон для мега-меню правильно отображается на паряке над мега-каплей, но каждая колонка Mega-Menu UL плавает справа от «A Tag-Mega Menu» < /p>
< /p>
menu-container-меню-это навигационная бар. class = "Snippet">

Код: Выделить всё

* {
box-sizing: border-box;
}

body {
margin: 0px;
padding: 0px;
font-size: 15px;
}

.menu-container {
width: 100%;
margin: 0px;
padding: 0px;
height: 90px;
background: #323653;
}

.menu {
position: relative;
margin: 0px;
padding: 0px;
}

.menu li {
list-style-type: none;
position: relative;
margin: 0px;
float: left;
}

.menu li a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
padding: 35px 25px;
height: 90px;
float: left;
font-size: 0.75rem;
}

.mega-menu {
display: none;
}

.mega-dropdown:hover .mega-menu {
display: block;
position: relative;
left: 0px;
right: 0;
width: 100%;
top: 90px;
height: 340px;
background: #444c8d;
padding: 15px;
}

.mega-menu ul {
display: block;
position: relative;
margin: 0px;
width: 25%;
height: auto;
float: left;
}

.mega-menu ul li {
list-style-type: none;
margin: 0px;
padding: 0px;
}

.mega-menu ul li a {
padding: 10px;
color: #ffffff;
clear: both;
}< /code>

[list]
[*][url=#]Mega Menu[/url]


[url=#]News 1[/url]
[*][url=#]News 1[/url]
[*][url=#]News 1[/url]
[*][url=#]News 1[/url]
[*][url=#]News 1[/url]
[/list]
[list]
[*][url=#]News 1[/url]
[*][url=#]News 1[/url]
[*][url=#]News 1[/url]
[*][url=#]News 1[/url]
[*][url=#]News 1[/url]
[/list]
[list]
[*][url=#]News 1[/url]
[*][url=#]News 1[/url]
[*][url=#]News 1[/url]
[*][url=#]News 1[/url]
[*][url=#]News 1[/url]
[/list]
[list]
[*][url=#]News 1[/url]
[*][url=#]News 1[/url]
[*][url=#]News 1[/url]
[*][url=#]News 1[/url]
[*][url=#]News 1[/url]
[/list]

Подробнее здесь: https://stackoverflow.com/questions/796 ... y-properly