不能正確漂浮列表

編輯任務完成，謝謝你的回覆。如果任何人都可以通過單擊來展開/淡入查看功能來幫助我，這將非常有幫助。我目前正在研究它。不能正確漂浮列表

我正在爲我的網站做一個非常簡單的導航。我無法弄清楚爲什麼文本不能堅持到正確的位置。這裏是一個例子：http://jsfiddle.net/E6ArK/

我也希望添加一個點擊展開，也許淡入視圖功能一段時間。任何幫助將非常感激。

HTML

<div class="navigation"> 
    <ul> 
     <li> 
      <h1>Applications</h1> 

      <ul> 
       <li>Not Available</li> 
       <li>Not Available</li> 
      </ul> 
     </li> 
     <li> 
      <h1>Forum</h1> 

      <ul> 
       <li>Not Available</li> 
       <li>Not Available</li> 
      </ul> 
     </li> 
     <li> 
      <h1>Guilds</h1> 

      <ul> 
       <li>Not Available</li> 
       <li>Not Available</li> 
      </ul> 
     </li> 
     <li> 
      <h1>Imageboards</h1> 

      <ul> 
       <li>People</li> 
       <li>Random</li> 
       <li>Screen Shots</li> 
       <li>Wallpapers</li> 
      </ul> 
     </li> 
     <li> 
      <h1>Projects</h1> 

      <ul> 
       <li>Not Available</li> 
       <li>Not Available</li> 
      </ul> 
     </li> 
    </ul> 
</div>

CSS

/* NAVIGATION */ 

/* Heading */ 
.navigation ul li h1 { 
    background : #000000; 
    color : #ffffff; 
    display : table; 
    font-weight : 100; 
    margin : 0; 
    padding : 6px; 
    border-right : 3px solid #ffffff; 
    font-size : 28px; 
    margin-bottom : 3px; 
} 
/* Positioning */ 
.navigation { 
    font-family :'Open Sans Condensed', sans-serif; 
    margin : 12px; 
    position : fixed; 
    right : 0; 
    top : 0; 
} 
.navigation ul { 
    font-size : 20px; 
    margin : 0; 
    padding : 0; 
    text-align : right; 
} 
.navigation ul li { 
    clear : right; 
    color : #ffffff; 
    float : right; 
    list-style-type : none; 
} 
/* Second Level */ 
.navigation ul li ul { 
    display : none; 
} 
.navigation ul li:hover ul { 
    display : block; 
} 
.navigation ul li ul li { 
    background : #000000; 
    border-right : 3px solid #ff0000; 
    color : #ffffff; 
    display : table; 
    font-size : 18px; 
    margin-bottom : 3px; 
    padding : 6px; 
}

來源

2013-02-19 Zifaun

通過「不能堅持正確的」，你指的是怎樣一些他們在盤旋時稍微向左移動？ – 2013-02-19 14:54:48

您需要執行'.navigation ul li h1 {float：right; }' – Andy 2013-02-19 14:56:52

謝謝安迪。給我一會兒，我把頭撞在牆上。 – Zifaun 2013-02-19 15:00:41

您需要的標題浮到右側爲好。將float: right添加到.navigation ul li h1的規則塊中。這應該讓他們堅持正確。

來源

2013-02-19 14:58:44

你只需要一個浮動添加：右鍵屬性到您的標題樣式：

/* Heading */ 
.navigation ul li h1 { 
    background : #000000; 
    color : #ffffff; 
    display : table; 
    font-weight : 100; 
    margin : 0; 
    padding : 6px; 
    border-right : 3px solid #ffffff; 
    font-size : 28px; 
    margin-bottom : 3px; 
    float: right; 
}

希望幫助

來源

2013-02-19 14:58:55

不能正確漂浮列表

回答

相關問題