Search code examples
htmlcssdropdown

Unable to alter width of dropdown element

My intention is to make a top navigation bar, in which the list item PROJECTS is supposed to be a dropdown. So far the dropdown is working, but it takes as much width as the parent element. I want to dissociate the dropdown content from the navigation item without changing formatting properties, such that it occupies just as much space needed by its items and is also positioned right below PROJECTS.

My code: 

body{
  margin: 0;
  padding: 0;
}
nav ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  background-color: #666666;
  position: fixed;
  top: 0px;
}

nav li{
  float: left;
}
nav li a{
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-family: sans-serif;
  padding: 15px;
  display: block;
}
nav li a:hover:not(.active){
  background-color: #444;
}
nav li a.active{
  background-color: rgba(0, 150, 0, 1);
}

main{
  padding-top: 30px;
}
.dropdown_content{
  display: none;
  width: auto;
}
.dropbtn:hover .dropdown_content{
  display: block;
}
  <body>
    <header>
      <nav class="nav">
        <ul>
          <li> <a href="#" class="active">Home</a> </li>
          <li> <a href="#">About</a> </li>
          <li class="dropbtn">
            <a href="#">Projects</a>
            <div class="dropdown_content">
              <a href="#">HTML</a>
              <a href="#">CSS</a>
              <a href="#">JavaScript</a>
            </div>
          </li>
          <li> <a href="#">Contact</a> </li>
        </ul>
      </nav>
    </header>
    <main>

    </main>
    <footer>

    </footer>
  </body>

How the result looks now:enter image description here

How I want it to look(image edited)

enter image description here

Thank you in advance.

Solution

  • Just add position: fixed and background-color: #666666 for dropdown_content. Like that:

    .dropdown_content {
    ...
    position: fixed;
    background-color: #666666;
}

    This will not break the positioning of the dropdown menu, because the ul tag also has a fixed positioning.

    body {
    margin: 0;
    padding: 0;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    background-color: #666666;
    position: fixed;
    top: 0px;
}

nav li {
    float: left;
}

nav li a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-family: sans-serif;
    padding: 15px;
    display: block;
}

nav li a:hover:not(.active) {
    background-color: #444;
}

nav li a.active {
    background-color: rgba(0, 150, 0, 1);
}

main {
    padding-top: 30px;
}

.dropdown_content {
    display: none;
    width: auto;
    position: fixed;
    background-color: #666666;
}

.dropbtn:hover .dropdown_content {
    display: block;
}
    <body>
    <header>
        <nav class="nav">
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropbtn">
                    <a href="#">Projects</a>
                    <div class="dropdown_content">
                        <a href="#">HTML</a>
                        <a href="#">CSS</a>
                        <a href="#">JavaScript</a>
                    </div>
                </li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main></main>
    <footer></footer>
</body>