Имеется стандартное такая меню с подпунктами:
body {
text-align: center;
font-family: cursive;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
display: inline;
}
.drop_menu {
opacity: 0;
}
.list_menu:hover .drop_menu {
opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ааа</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<nav class="header">
<ul class="menu">
<li class="list_menu"><a href="#">Главная</a></li>
<li class="list_menu"><a href="#">Смотреть</a>
<ul class="drop_menu">
<li><a href="#" target="_blank">Фильмы</a></li>
<li><a href="#" target="_blank">Мультфильмы</a></li>
<li><a href="#" target="_blank">Сериалы</a></li>
<li><a href="#" target="_blank">Трейлеры</a></li>
</ul>
</li>
<li class="list_menu"><a href="#">Контакты</a>
<ul class="drop_menu">
<li><a href="" target="_blank">Илья</a></li>
<li><a href="">Артем</a></li>
<li><a href="" target="_blank">Женя</a></li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
Почему в итоге получается все "пирамидой", а не в линию?