Ajuda na programação, respostas a perguntas / Html5 / Float: certo não funciona com um elemento - html5, css3, navegação

Float: right não funciona com um elemento - html5, css3, navigation

Estou tentando fazer uma barra de navegação responsiva, não quero um elemento à direita do nav, assim: Exemplo

Eu estava colocando float:certo, mas não funciona, depois disso tentei com margin-left, mas se usar margin left, não vai responder. O elemento com o float à esquerda é um elemento li. Este é todo o meu HTML:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Responsive Menu</title>
</head>
<body>
<div class="container">

<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li class="test">
<a href="#">I amsterdam</a>
</li>
<li  class="test">
<a href="#">La Ciudad</a>
<ul>
<li>
<a href="#">Museos</a>
<ul>
<li><a href="#">Museo van Gogh</a></li>
<li><a href="#">Rijksmuseum</a></li>
<li><a href="#">Casa de Ana Frank</a></li>
<li><a href="#">Museo Casa de Rembrandt</a></li>
</ul>
</li>
<li>
<a href="#">Lugares</a>
<ul>
<li><a href="#">Vondelpark</a></li>
<li><a href="#">Barrio de Jordan</a></li>
<li><a href="#">Red Light Distrit</a></li>
</ul>
</li>
</ul>
</li>
<li  class="test">
<a href="#">Alojamiento</a>
<ul>
<li>
<a href="#">Hoteles</a>
<ul>
<li><a href="#">Los mejores Hoteles</a></li>
<li><a href="#">Hoteles más económicos</a></li>
</ul>
</li>
<li>
<a href="#">Albergues</a>
</li>
</ul>
</li>
<li  class="test">
<a href="#">Eventos</a>
<ul>
<li>
<a href="#">Concierto Kanye West</a>
</li>
<li>
<a href="#">Ajax - Real Madrid</a>
</li>
<li>
<a href="#">Amsterdam Fashion Week</a>
</li>
</ul>
</li>
<li  class="languages">
<a href="#">Languages</a>
<ul>
<li>
<a href="#">English</a>
</li>
<li>
<a href="#">Español</a>
</li>
<li>
<a href="#">Français</a>
</li>
<li>
<a href="#">Deutsch</a>
</li>
</ul>
</li>
</ul>
</div>

E meu CSS, pensei que poderia ser um problema para outros estilos, mas a classe .languages é a última delas, tentei com um ID, mas consegui: Resultado com ID

O CSS é este:

body, nav, ul, li, a  {
margin: 0;
padding: 0;
}

body {
width: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: red;
}

a {
text-decoration: none;
}

.container {
width: 100%;
}
.toggleMenu {
display:  none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#175e4c;
position: relative;
}

.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}

.nav ul {
list-style: none;
width: 9em;
}

.nav a {
padding: 10px 15px;
color:#fff;
*zoom: 1;
}

.nav > li {
float: left;
border-top: 1px solid #104336;
z-index: 200;
}

.nav > li > a {
display: block;
}

.nav li ul {
position: absolute;
left: -9999px;
z-index: 100;
}

.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index:100;
border-top: 1px solid #175e4c;
}

.nav li li li a {
background:#249578;
z-index:200;
border-top: 1px solid #1d7a62;
}

#languages{
float: right;
}

Respostas:

1 para resposta № 1

Não tenho certeza por que não estava funcionando para você. Usando seu código de exemplo, mas simplesmente adicionando id="languages" para o elemento li parece funcionar. Vejo https://jsfiddle.net/eaLow5h3/

1 para resposta № 2

Em seu css3 você tem id como seletor (#languages) e não uma classe! Tente mudar o "#" para "." . Se isso não funcionar, adicione ao seu css este caminho