CODEWITHSUNDEEP
htmlcssdrop-down-menu
Kookerus
Kookerus

Reputation: 546

HTML dropdown box screwing up text

I have a dropdown box using HTML and CSS, but if any part of the dropdown box overlaps with text on the webpage, the text is offset quite a bit. Is there a way I can change my code to simply have the box obscure the text instead of messing up the formatting?

index.html:

<body>
    <div id="header">
      <h1>Kookerus' Projects</h1>
    </div>
    <div id="dropdown">
      <ul>
        <li><a href="http://kookerus.github.io">Home</a></li>
        <li><a href="#">About</a></li>
          <li>
            <a href="/projects/batch-interpreter/index.html">Batch Interpreter &#9662;</a>
            <ul>
              <li><a href="/projects/batch-interpreter/about.html">About</a></li>
              <li><a href="#">View on Github</a></li>
            </ul>
          </li>
        <li><a href="/contact.html">Contact</a></li>
      </ul>
    </div>
</body>

style.css:

#header{
  height: 50px;
  width: 100%;
  background-color: #CC00CC;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: white;
  margin-top: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: 0;
}
#nav {
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: white;
  margin-top: 50px;
  margin-bottom
  padding: 0;
  border: 0;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: 0;
}
#about{
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: 0
}
.center { /*simple class to center the text*/
  text-align: center;
  }
h1 {
    margin: 0;
    padding: 0;
    border: 0;
}
ul {
  display: inline;
  padding: 0;
  list-style: none;
}
ul li {
  float: left;
  width: 150px;
  text-align: center;
  line-height: 21px;
}
ul li a {
  display: block;
  padding: 5px 10px;
  color: #333;
  background: #f2f2f2;
  text-decoration: none;
}
ul li a:hover {
  color: #fff;
  background: #939393;
}
ul li ul {
  display: none;
}
ul li:hover ul {
  display: block; /* display the dropdown */
}

> JSFiddle

Upvotes: 0

Views: 125

Answers (2)

Vishal
Vishal

Reputation: 394

In your dropdown ul use position: absolute and make its parent li relative

ul li ul{
  position: absolute;
}
ul li{
position: relative;
}

Upvotes: 2

mboeckle
mboeckle

Reputation: 972

You can also use display:flex that the "contacts" is not jumping on the left side, instead of display:inline

ul {
 display: flex;
 padding: 0;
 list-style: none;
}

jsfiddle

Upvotes: 0

Related Questions