如何移動下拉菜單（CSS）？

我必須爲學校（ICT課程）製作一個網站，並使用CSS製作了一個下拉菜單（帶有一些YouTube幫助）。現在我想要移動我的菜單，以便我可以在菜單上方放置一個橫幅。如何移動下拉菜單（CSS）？

我可以移動除藍色背景之外的所有東西。我做這件事感動了它：

#nav ul{ 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    position: relative; 
    top: 50px; 
    }

有誰知道如何在一次移動全部或僅僅移動藍色的背景？

代碼：

body { 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow-y: scroll; 
 
    font-family: Arial; 
 
    font-size: 18px 
 
} 
 
#nav { 
 
    background-color: #0000FF; 
 
} 
 
#nav_wrapper { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
    text-align: left; 
 
} 
 
#nav ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    position: relative; 
 
    top: 50px; 
 
} 
 
#nav ul li { 
 
    display: inline-block; 
 
} 
 
#nav ul li:hover { 
 
    background-color: #0066FF; 
 
} 
 
#nav ul li a, 
 
visited { 
 
    color: #ccc; 
 
    display: block; 
 
    padding: 15px; 
 
    text-decoration: none; 
 
} 
 
#nav ul li a:hover { 
 
    color: #ccc; 
 
    text-decoration: none; 
 
} 
 
#nav ul li:hover ul { 
 
    display: block; 
 
} 
 
#nav ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #0066FF; 
 
    border: 5px solid #0000FF; 
 
    border-top: 0; 
 
    margin-left: -5px; 
 
} 
 
#nav ul ul li { 
 
    display: block; 
 
} 
 
#nav ul ul li a, 
 
visited { 
 
    color: #ccc; 
 
} 
 
#nav ul ul li a:hover { 
 
    color: #099; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Homepage</title> 
 

 
    <link href="CSS/menu.css" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <div id="nav"> 
 
    <div id="nav_wrapper"> 
 
     <ul> 
 
     <li><a href="#">Homepage</a> 
 
      <ul> 
 
      <li><a href="#">Kopje1a</a> 
 
      </li> 
 
      <li><a href="#">Kopje2a</a> 
 
      </li> 
 
      <li><a href="#">Kopje3a</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Pagina2</a> 
 
      <ul> 
 
      <li><a href="#">Kopje2b</a> 
 
      </li> 
 
      <li><a href="#">Kopje2b</a> 
 
      </li> 
 
      <li><a href="#">Kopje2b</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Pagina3</a> 
 
      <ul> 
 
      <li><a href="#">Kopje1c</a> 
 
      </li> 
 
      <li><a href="#">Kopje2c</a> 
 
      </li> 
 
      <li><a href="#">Kopje3c</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

我不能發表圖片因爲這是我的第一篇文章，我沒有超過10聲譽，我很抱歉。

總是歡迎批評，恨是不是。

來源

2014-10-01 TheNLGhost

你能向我們提供您的代碼的http://jsfiddle.net/做的伎倆？ – Elfayer 2014-10-01 17:45:37

您的目標是#nav ul（無序列表）而不是導航欄本身，它實際上具有背景屬性集。做到這一點：

#nav { top: 50px; }

來源

2014-10-01 17:47:32 TheFrozenOne

對不起，這對我不起作用（我以前試過）。 – TheNLGhost 2014-10-01 18:34:32

您已經定義在< DIV ID =「導航」的藍色背景>

要確保這個藍色的背景也移動你需要移動包含分區，而不僅僅是未分類列表div。

這樣：

#nav{ 
background-color: #0000FF; 
list-style-type: none; 
padding: 0; 
margin: 0; 
position: relative; 
top: 50px; 
}

應該爲你

來源

2014-10-01 17:51:14 Pmleader

非常感謝它！ – TheNLGhost 2014-10-01 18:34:58

我其實不明白爲什麼這個工作，我的答案沒有，但只要它的作品一切正常。 – TheFrozenOne 2014-10-01 21:16:30

如何移動下拉菜單（CSS）？

回答

相關問題