Zwijane menu - od danej rozdzielczosci

pytanie zadane 23 września 2017 w HTML i CSS przez kawainka Początkujący (380 p.)

Cześć

Mam tutaj takie kody - joomla

<?php 
    defined('_JEXEC') or die; 
    $app = JFactory::getApplication(); 
?> 
 
<!DOCTYPE HTML> 
<html> 
<head> 
	<meta name="viewport" content="width=device-width, 

initial-scale=1.0">
    <link href="media/jui/css/bootstrap.min.css" 

rel="stylesheet">
	<link href="media/jui/css/bootstrap-responsive.min.css" 

rel="stylesheet">
	<link href="templates/<?php echo $this->template; ?>/css/my-responsive.css" rel="stylesheet">
	<link href="templates/<?php echo $this->template; ?>/css/template.css" rel="stylesheet">
    <jdoc:include type="head" /> 
  <script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="media/jui/js/bootstrap.min.js"></script>
</head> 
 
<body> 
<div class ="tlo">

<div class ="tloBaner">


<div id='blaa'><div id="herb"><img src="/ttt.png"/></div>
</div>
  </div>
  </div>
  

   <div class="Menu"><jdoc:include type="modules" name="menuu" style="xhtml" /></div>
  <div id='bla'>
<div id="herb"><img src="/tess.png"/></div>
  </div>
</body> 
 
</html>

body {
    font-family: Arial, Helvetica, Sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    color: #434343;
}


.Menu {
   float: left;
   width: 100%;
   overflow: hidden;
   position: relative;
}
ul {
   clear: left;
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
   left: 50%;
   text-align: center;
}
ul li {
   display: block;
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
   right: 50%;
}
 ul li a {
   display: block;
   margin: 0 0 0 1px;
   padding: 25px 94.29px;
   background: #ddd; 
   color: #000;
   text-decoration: none;
   line-height: 20px;
   font-size: 25px;
}
ul li a:hover {
   background: #b00; 
   color: #fff;
}
 ul li a.zaznaczony,  ul li a.zaznaczony:hover {
   color: #fff;
   background: #000;
   font-weight: bold;
}
#bla * {
width:100%;
height:100%;
}

#topgraf{ width:100%; position:relative}


#blaa * {
width: 100%;
height: 100%;
}


.Baner{
  
  height: 100px;
width: 651px;
background-image: url("fotki/ttt.png");
background-color: black;
margin: auto;

}
.tloBaner{
width: 40%;
height: 60%;
background-color: black;
margin: auto;
padding: 0.4;
}

.tlo
{
height: 100%;
min-width: 100px;
background-color: black;
margin: auto;

}

Strona - rowery-rokietnica.pl

Teraz mam pytanie, jak zrobić aby menu zamieniało się np na takie jak na stronie http://www.kurshtml.edu.pl

I tam jak zmieniamy wielkosc przegladarki menu zamienia sie na taki kwadratowe 3 paski i mozna tam rozwinac menu

Pozdrawiam