Hej, stworzyłam stronę dla urządzeń do 600px, teraz za pomocą media queries przerabiam ją dla większych urządzeń. Problem jest z przerobieniem menu pionowego na poziome, wynika to z tego, że pionowe menu ma jedną dodatkową nadrzędną listę. której nie wiem jak się pozbyć nie eliminując list wewnątrz niej. Początkowo wygląda to tak(ten pasek z trzema kreskami to pierwsza lista ul):
po rozwinięciu:
no i jeszcze pod menu:
Chcę zrobić z tego menu poziome, ale nie wiem jak "wyłączyć" tylko ten pasek z tymi trzema kreskami, bez usuwania jego całej zawartości.
dołączam kod do headera strony tylko:
<header class="bodyheader">
<div class="logo">
<h1>WegeWege</h1>
</div>
<nav>
<ul class="logomenu">
<li>
<a class="spanspan" href="#">
<div class="allspan">
<span></span>
<span></span>
<span></span>
</div>
</a>
<ul class="menu">
<li><a href="#">Strona Główna</a></li>
<li><a href="#">Przepisy</a>
<ul class="undermenu">
<li><a href="#">Śniadania</a></li>
<li><a href="#">Obiady</a></li>
<li><a href="#">Kolacje</a></li>
</ul>
</li>
<li><a href="#">Teoria</a>
<ul class="undermenu">
<li><a href="#">Podstawy weganizmu</a></li>
<li><a href="#">Komponowanie posiłków</a></li>
<li><a href="#">Niedobory</a></li>
</ul>
</li>
<li><a href="#">O autorze/cele</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</li>
</ul>
</nav>
</header>
/*header----------------------------------------*/
.bodyheader{
height: 400px;
width: 100%;
background-image: url("img/backgroundorginal.png");
background-size: cover;
position: relative;
font-size: 1em;
background-position: center;
background-repeat: no-repeat;
}
.logo{
background-color: rgb(0, 0, 0, 0.3);
min-height: 34px;
max-width: 50%;
border-radius: 10px;
position: relative;
left: 45%;
top: 18%;
}
.logo > h1{
text-align: center;
padding: 2%;
text-shadow: 1px 1px #000;
}
/*menu-----------------------*/
nav{
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
font-size: 1em;
}
.logomenu{
background-color: rgb(118, 16, 201, 0.4);
border-top: 1px solid #2e0252;
height: 70px;
}
.logomenu a{
display: block;
height: 100%;
width: 100%;
}
.logomenu:hover{
background-color: rgb(118, 16, 201);
}
.allspan{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
span{
display: block;
width: 33px;
height: 6px;
background: #cdcdcd;
margin-bottom: 7px;
}
.allspan > span:last-child{
margin-bottom: 0;
}
.menu{
text-align: center;
font-size: 1.4em;
background-color: #9884f0;
}
.menu a{
line-height: 2.5;
}
.menu > li{
border-bottom: 2px solid #2e0252;
}
.menu > li:first-child{
border-top: 2px solid #2e0252;
}
.menu > li:hover{
background-color: rgb(118, 16, 201);
}
.undermenu > li{
background-color: #baabf7;
border-bottom: 2px dashed #9884f0;
}
.undermenu > li:hover > a{
color: #000;
}
/*display or not display menu*/
.menu{
display: none;
}
.menu:hover, menu:active{
display:block;
}
.logomenu > li:hover > .menu{
display: block;
}
.undermenu{
display:none;
}
.menu > li:hover > .undermenu{
display: block;
}
