2015-04-06 52 views
0

我正嘗試做一個負責任的導航欄,我在導航欄的右側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,但我得到了這一點:Result with 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; 
} 

回答

1

在你的css3中你有id作爲選擇符(#languages)而不是類!嘗試將'#'更改爲'。' 。如果這不起作用添加到您的CSS此路徑

.nav > li.languages{ 
    float: right; 
}