Моя панель навигации не отображается в блоке, как я заявил, вместо этого она отображается в строке. Я попытался изменить отображение на разные вещи, например inline, но ничего не происходит.Навигационная панель не отображается вниз только в сторону
код:
HTML:
<body>
<div id="container">
<header id="M_head">
<h1>Testing Javascript</h1>
<nav id="M_nav">
<ul>
<li><a href="">Menu1</a>
<ul>
<a href="">Sub1</a>
<a href="">Sub2</a>
<a href="">Sub3</a>
<a href="">Sub4</a>
</ul>
</li>
<li><a href=""> Menu2</a></li>
<li><a href="">Menu3</a></li>
<li><a href="">Menu4</a></li>
<li><a href="">Menu5</a></li>
</ul>
</nav>
</header>
</div>
</body>
СКС:
*{
margin:0px;
max-width:100%;
padding:0px;
body{
border: 2px solid black;
display:block;
margin:0px auto;
max-width:100;
#M_head{
h1{
background-color:slategrey;
color:black;
display:block;
font:italic bold 50px/30px Georgia, serif;
letter-spacing: -5px;
padding-bottom:20px;
padding-top:10px;
}
#M_nav{
background-color:black;
padding:5px;
ul{
text-align:center;
padding:inherit;
width:100%;
li{
display:inline-block;
a{
color:white;
font-weight:bolder;
font-size:18px;
height:100%;
padding-left:70px;
padding-right:70px;
padding-top:11px;
padding-bottom:13px;
text-decoration:none;
transition:background 1s;
}
a:hover{
background-color:white;
color:black;
}
ul{
background-color:black;
display:none;
li{
display:block;
}
}
}
li:hover > ul{
display:block;
}
}
}
}
}
}
Jsfiddle: https: https://jsfiddle.net/n45rmksr/1/
Извините, я должен был быть немного яснее. Я имел в виду, что элементы подменю являются встроенными, а не в блоке, например, в раскрывающемся списке. –