我正嘗試做一個負責任的導航欄,我在導航欄的右側wan'ta元素的工作,像這樣:Example浮動:權doesn't與元素
我把浮動:權,但它不起作用,在那之後,我嘗試了保證金餘額,但如果我使用餘裕,它就不會有反應。剩下的浮點數是一個li元素。這是我所有的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>
而我的CSS,我認爲這可能是其他樣式的一個問題,但是類.languages是最後一個,他們,我試圖用一個ID,但我得到了這一點:
的CSS是這樣的:
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;
}