CODEWITHSUNDEEP
htmlcssdrop-down-menu
TheNLGhost
TheNLGhost

Reputation: 1

How to move the dropdown menu (CSS)?

I have to make a website for school (ICT class), and I made a dropdown menu with CSS (with some youtube help). Now I want to move my menu down so I can place a banner above the menu.

I can move everything except for the blue background. I moved it by doing this:

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

Does anybody know how to move everything at once or just move the blue background?

Code:

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>

I can't post images cause this is my first post and I don't have more then 10 reputation, I'm sorry.

Criticism is always welcome, Hating is not.

Upvotes: 0

Views: 2566

Answers (2)

Pmleader
Pmleader

Reputation: 236

You have defined the blue background in the < div id="nav" >

To make sure this blue background also moves you need to move the containing div and not just the Unsorted List div.

so:

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

should do the trick for you

Upvotes: 1

TheFrozenOne
TheFrozenOne

Reputation: 1715

You're targeting #nav ul( the unorderd list ) not the navbar itself, which actually has the background property set. Do that:

#nav { top: 50px; }

Upvotes: 0

Related Questions