Я пытаюсь создать панель навигации в чистом html / css, ширина которой менее 600 пикселей по горизонтали с горизонтальным набором ссылок (без маркеров). При ширине более 600 пикселей я хочу вертикальную навигационную панель с вертикальным списком.
Тем не менее, моя горизонтальная версия по-прежнему дает мне вертикально сложенный набор с маркерами, а моя вертикальная версия имеет слово «ссылки», встроенное в «абзац», когда я хочу его внизу.
Я не могу понять, что я делаю не так. Я попытался очистить его и запустить снова, который работал, пока я не вставил свой медиа-запрос, и все снова пошло не так. Любая помощь приветствуется.
<header>
<nav id="navbar">
<h1>HTML Basics</h1>
<ul>
<li>Documents</li>
<li>Headings</li>
<li>Paragraph</li>
<li>Links</li>
<li>Images</li>
</ul>
</nav>
</header>
#navbar{
background: red;
width: 100%;
height: 20%;
margin: auto;
position: fixed;
display: inline;
float: top;
top: 0;
left: 0;
}
@media screen and (min-width:600px){
#navbar{
background: red;
width: 22%;
height: 100%;
margin: auto;
position: fixed;
display: block;
top: 0;
left: 0;
}
li{
list-style: none;
padding-right: 20px;
padding-bottom: 20px;
display: inline-block;
margin-left: 10%;
float: left;
font-family: 'Nunito Sans', sans-serif;
text-decoration: none;
font-size: 12px;
}
@media only screen and (min-width:600px){
li{
list-style-type: none;
display: block;
font-family: 'Nunito Sans', sans-serif;
text-decoration: none;
font-size: 20px;
}
}
li:hover{
color:#911f32;
font-size: 18px;
}