我正在为我的网站和视口实现一个响应式下拉菜单，我希望它看起来像一个人可单击的菜单，但是当我进入“电话视图”（600像素）时，它会得到多列我可以强制菜单在CSS中的一列上吗？
这是我的代码：
body{
margin: 0;
}
a {
text-decoration: none;
color: #ea5c0d;
display: block;
}
.lang{
float: right;
}
.lang img{
height: 50%;
width: 50%;
padding-left: 30px;
padding: 0;
}
.lang a{
height: 6em;
padding-left: 30px;
padding: 0;
}
ul {
list-style: none;
position: relative;
text-align: left;
}
li {
float: left;
}
ul:after {
clear: both;
}
ul:before,
ul:after {
content: " ";
display: table;
}
nav {
position: relative;
background: #f7af3e;
background-image: -webkit-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: -moz-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: -o-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
text-align: center;
text-shadow: 0.063em 0.063em 0.063em #333333;
}
ul.logo {
position: relative;
width: 16.250em;
float: left;
margin: 0;
padding: 0;
z-index: 1;
}
ul.logo a , img{
width: 100%;
height: 6em;
}
ul.primary li .CON {
display: block;
padding-right: 1.875em;
padding-left: 1.875em;
padding-top: 2.063em;
padding-bottom: 1.938em;
border-right: 0.063em solid #3D3D3D;
}
.menu-toggle-button , .primary a {
transition: 1s;
}
ul.primary li:last-child a {
border-right: none;
}
ul.primary li a:hover {
color: #b94503;
}
/* sousmenus */
ul.sousmenu {
position: absolute;
z-index: 2;
box-shadow: 0.125em 0.125em 0.188em #505050;
width: 35%;
display:none;
padding-left: 0;
}
ul.sousmenu li {
float: none;
margin: 0;
}
ul.sousmenu li a {
border-bottom: 0.063em dotted #ccc;
border-right: none;
color: #000;
padding: 0.938em 3.125em;
}
ul.sousmenu li:last-child a {
border-bottom: none;
}
ul.sousmenu li a:hover {
color: #000;
background: #eeeeee;
}
/* sousmenu display*/
ul.primary li:hover ul {
display: block;
background: #fff;
}
/* keeps the tab background white */
ul.primary li:hover a {
background: #fff;
color: #666;
text-shadow: none;
}
ul.primary li:hover > a{
color: #000;
}
.primary {
list-style: none;
margin-left: 25em;
margin-top: 0;
padding: 0;
}
.primary .CON {
display: inline-block;
padding: 1rem;
}
.primary a:focus,
.primary a:hover {
background-color: #444;
outline: none;
}
.primary a:active {
background-color: #666;
}
.menu-toggle-button {
cursor: pointer;
display: none;
padding: 1rem;
user-select: none;
}
.menu-toggle {
opacity: 0;
pointer-events: none;
position: absolute;
}
@media only screen and (max-width: 1310px){
ul.logo {
display: none;
visibility: hidden;
}
.primary{
margin: 0;
}
}
@media only screen and (max-width: 600px) {
ul.logo , .lang{
display: none;
visibility: hidden;
}
.primary {
flex-direction: column;
margin: 0;
}
.primary .CON {
width: 100%;
}
.primary label{
padding-top: 0;
float: left;
}
ul.primary li .CON{
border-right: 0;
}
.menu-toggle:not(:checked) ~ .primary {
display: none;
float: left;
}
.menu-toggle-button {
display: -webkit-box
}
#menu-toggle .menu-toggle:focus ~ .menu-toggle-button,
#menu-toggle .menu-toggle-button:hover {
background-color: #444;
}
.menu-toggle:focus ~ .menu-toggle-button,
.menu-toggle-button:hover {
background-color: #inherit;
}
}<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test menu déroulant</title>
<link rel="stylesheet" href="cssfeuilletest2.css">
</head>
<body>
<div>
<ul class="logo">
<a href="test.html"><img src="Logo.png" alt="Logo"></a>
</ul>
<nav>
<input class="menu-toggle" id="menu-toggle" type="checkbox">
<label class="menu-toggle-button" for="menu-toggle">☰</label>
<ul class="primary">
<li class="BonPl">
<a class="CON">
<input class="menu-toggle" id="menu-toggle1" type="checkbox">
<label class="menu-toggle-button" for="menu-toggle">☶</label>
Bon Plans</a>
<ul class="sousmenu">
<li><a href="Pages/Sousmenus/frise.html">Histoire de la ville</a></li>
<li><a href="Pages/Sousmenus/archi.html">Architecture</a></li>
</ul>
</li>
<li class="InfoPr">
<a class="CON">
<input class="menu-toggle" id="menu-toggle2" type="checkbox">
<label class="menu-toggle-button" for="menu-toggle">☶</label>
Infos Pratiques</a>
<ul class="sousmenu">
<li><a href="Pages/Sousmenus/calendar.html">Actualités de la ville</a></li>
<li><a href="Pages/Sousmenus/Transports.html">Transports</a></li>
</ul>
</li>
<li class="BonPl">
<a class="CON">
<input class="menu-toggle" id="menu-toggle3" type="checkbox">
<label class="menu-toggle-button" for="menu-toggle">☶</label>
Astuces</a>
<ul class="sousmenu">
<li><a href="Pages/Sousmenus/Petits Prix.html">Nos bonnes adresses</a></li>
<li><a href="Pages/Sousmenus/Insolite.html">Insolites</a></li>
</ul>
</li>
<li class="Sejour">
<a class="CON">
<input class="menu-toggle" id="menu-toggle4" type="checkbox">
<label class="menu-toggle-button" for="menu-toggle">☶</label>
Visiter Florence</a>
<ul class="sousmenu">
<li><a href="Pages/Sousmenus/autour.html">Autour de vous</a></li>
<li><a href="Pages/Sousmenus/circuits.html">Nos circuit</a></li>
</ul>
</li>
<li>
<a class="CON">
<input class="menu-toggle" id="menu-toggle4" type="checkbox">
<label class="menu-toggle-button" for="menu-toggle">☶</label>
Authentification</a>
<ul class="sousmenu">
<li><a>Se connecter</a></li>
<li><a>S'inscrire</a></li>
</ul>
</li>
<li class="lang">
<a href=""><img src="langswitch.png" alt="en"></a>
</li>
</ul>
</nav>
</div>
</body>
</html>