Responsywna strona problem

[s_matysik]

jak zrobić responsywne menu rozwijane?

na stronie deskopowej jest normalne bez rozwijania, rozwijane ma być tylko na RWD

menu:

<div class="site_head_menu">
<ul class="top_menu">
<li><a href="https://adresstrony.pl/1/" ><span>strona1</span></a> </li>
<li><a href="https://adresstrony.pl/2/" ><span>strona2</span></a> </li>
<li><a href="https://adresstrony.pl/3/"  ><span>strona3</span></a> </li>
<li><a href="https://adresstrony.pl/4/"  ><span>strona4</span></a></li> 
<li><a href="https://adresstrony.pl/5//" ><span>strona5</span></a> </li>
<li><a href="https://adresstrony.pl/6/" ><span>strona6</span></a> </li>
<li><a href="https://adresstrony.pl/7/" ><span>strona7</span></a> </li>
<li><a href="https://adresstrony.pl/8/" ><span>strona8</span></a></li> 
</ul>
</div>

plik CSS

.top_menu{
float:right;
margin:0px;
padding:0px 5px 0 5px;
list-style: none;
line-height: normal;
}


.top_menu span{


background:url('images/n_c.gif') repeat-x;


padding:12px 6px 12px 0px;


}


.top_menu li{
background:url('images/n_l.gif') no-repeat;


float: left;
padding:12px 2px 12px 0px;




}


.top_menu li a{
background:url('images/n_p.gif') no-repeat right;


padding:12px 8px 12px 10px;
color:white;
font-weight:bold;
font-size:12px;
text-decoration:none;






}
.top_menu li:hover span{


background:url('images/z_c.gif') repeat-x;


padding:12px 6px 12px 0px;
border:0px;
}


.top_menu li:hover{
background:url('images/z_l.gif') no-repeat;






}


.top_menu li:hover a{
background:url('images/z_p.gif') no-repeat right;
color:black;
}

wiem że robi się to w

@media only screen and (max-width: 900px) {   
}

ale jak zrobić aby było rozwijane?

mam jeszcze problem z szerokością strony, jak powinienem ustawić container dla RWD?

dla deskopów ustawione jest tak:

.container {
width:100%;
}
.container .row  {
margin-bottom:20px;
}
.container .row .col6 {
width:50%;
min-height:10px;
float:left;
padding:0px 5px;
box-sizing:border-box;
}
.container .row::after {
clear:both;
}

[ttah]

Podpatrz jak to działa w bootstrapie:

https://getbootstrap.com/examples/navbar/

https://getbootstrap.com/examples/navbar-static-top/

https://getbootstrap.com/examples/navbar-fixed-top/

[s_matysik]

wolałbym zrobić to w mediaqueries

[ttah]

Czyli dokładnie tak, jak to jest rozwiązane we wspmnianym przeze mnie frameworku CSS.

[s_matysik]

ale nie wiem jak zrobić z deskopowego menu poziomego menu rozwijane na RWD

[Aleksiejs]

W media queries przy odpowiednich rozdzielczościach wrzucasz klasy menu, które sprawią, że będzie się rozwijało. W necie jest miliard++ rozwiązań na takie menu, a im częściej czytam Twoje posty tym bardziej wydaje mi się, że powienieneś zacząć od nauki używania Google, w którym pozycjonujesz strony.