CODEWITHSUNDEEP
htmlcss
An Ignorant Wanderer
An Ignorant Wanderer

Reputation: 1612

resize dropdown menu to match link width

I would like to resize my dropdown menu to match the link width. Here is a picture of what I currently have: enter image description here

Here are the relevant parts of my HTML page:

    <body>
        <div class="navbar">
            <nav>
                <a href=index.html>About</a>
                <a href=projects.html>Projects</a>
                <a href=publications.html>Publications</a>
                <div class="dropdown">
                    <button class="dropbtn">Writing
                    </button>
                    <div class="dropdown-content">
                      <a href="why_writing.html">Why Write?</a>
                      <a href="dollops.html">Dollops</a>
                      <a href="longforms.html">Longforms</a>
                      <a href="technical_science.html">Technical/Science</a>
                      <a href="quotes.html">Quotes</a>
                      <a href="words.html">Words</a>
                      <a href="notes.html">Notes</a>
                    </div>
                </div>  
            </nav>
        </div>

Here are the most relevant parts of my CSS stylesheet:

/* Navbar container */
*{
    box-sizing: border-box;
  }
   .navbar {
      overflow: hidden;
      background-color: #272424;
      font-family: Arial;
    }

    /* Links inside the navbar */
    .navbar a {
      float: left;
      font: Arial;
      font-size: 20px;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      width: 25%;
    }

    /* The dropdown container */
    .dropdown {
      float: left;
      overflow: hidden;
      width: 25%;
    }

    /* Dropdown button */
    .dropdown .dropbtn {
      font-size: 20px;
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font-family: inherit; /* Important for vertical align on mobile phones */
      margin: 0; /* Important for vertical align on mobile phones */
      width: 100%;
    }

    /* Add a red background color to navbar links on hover */
    .navbar a:hover, .dropdown:hover .dropbtn {
      background-color: #81A3A7;
    }

    /* Dropdown content (hidden by default) */
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    /* Links inside the dropdown */
    .navbar .dropdown-content a {
      float: none;
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
      width:auto;
    }

    /* Add a grey background color to dropdown links on hover */
    .dropdown-content a:hover {
      background-color: #ddd;
    }

    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
      display: block;
    }

I tried adding width: 100% to .dropdown-content but the width was too large and extended beyond the writing link to the right.

EDIT: As an extra feature, I would like my links to be appear as "boxes" that are connected without any spaces between them instead of having them appear as on one continuous band of black. How can I do that?

Upvotes: 0

Views: 377

Answers (3)

Amaresh S M
Amaresh S M

Reputation: 3010

Check out my code :I solved that .dropdown-content issue and Also added extra feature as per u r requirement i.e (spaces between them instead of having them appear as on one continuous band of black)

/* Navbar container */
*{
box-sizing: border-box;
}
.navbar {
overflow: hidden;
background-color: transparent;
font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
float: left;
font: Arial;
font-size: 20px;
border-radius:4px;
margin:6.2px;
background-color: black;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 23.5%;
}

/* The dropdown container */
.dropdown {
float: left;
margin:6px;
border-radius:4px;
overflow: hidden;
background-color: black;
width: 24%;
}

/* Dropdown button */
.dropdown .dropbtn {
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
width: 100%;
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #81A3A7;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
width:23.5%;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Links inside the dropdown */
.navbar .dropdown-content a {
float: none;
color: black;
background-color:white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
width:auto;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
@media only screen and (max-width: 900px){     

.navbar a { 
width:22%; 
}    
.dropdown{
width:22%;     
}
.dropdown-content{
width:22%;   
}    
}
<div class="navbar">
<nav>
<a href=index.html>About</a>
<a href=projects.html>Projects</a>
<a href=publications.html>Publications</a>
<div class="dropdown">
<button class="dropbtn">Writing
</button>
<div class="dropdown-content">
<a href="why_writing.html">Why Write?</a>
<a href="dollops.html">Dollops</a>
<a href="longforms.html">Longforms</a>
<a href="technical_science.html">Technical/ Science</a>
<a href="quotes.html">Quotes</a>
<a href="words.html">Words</a>
<a href="notes.html">Notes</a>
</div>
</div>  
</nav>
</div>

Upvotes: 0

Sumit Patel
Sumit Patel

Reputation: 4638

I have make some modification related to the css.

/* Navbar container */
*{
    box-sizing: border-box;
  }
   .navbar {
      background-color: #272424;
      font-family: Arial;
     height:50px
    }

    /* Links inside the navbar */
    .navbar a {
      float: left;
      font: Arial;
      font-size: 20px;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      width: 25%;
    }

    /* The dropdown container */
    .dropdown {
      float: left;
      width: 25%;
       position: relative;
    }

    /* Dropdown button */
    .dropdown .dropbtn {
      font-size: 20px;
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font-family: inherit; /* Important for vertical align on mobile phones */
      margin: 0; /* Important for vertical align on mobile phones */
      width: 100%;
    }

    /* Add a red background color to navbar links on hover */
    .navbar a:hover, .dropdown:hover .dropbtn {
      background-color: #81A3A7;
    }

    /* Dropdown content (hidden by default) */
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
          width: 100%;
    }

    /* Links inside the dropdown */
    .navbar .dropdown-content a {
      float: none;
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
      width:auto;
    }

    /* Add a grey background color to dropdown links on hover */
    .dropdown-content a:hover {
      background-color: #ddd;
    }

    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
      display: block;
    }
<div class="navbar">
            <nav>
                <a href=index.html>About</a>
                <a href=projects.html>Projects</a>
                <a href=publications.html>Publications</a>
                <div class="dropdown">
                    <button class="dropbtn">Writing
                    </button>
                    <div class="dropdown-content">
                      <a href="why_writing.html">Why Write?</a>
                      <a href="dollops.html">Dollops</a>
                      <a href="longforms.html">Longforms</a>
                      <a href="technical_science.html">Technical/Science</a>
                      <a href="quotes.html">Quotes</a>
                      <a href="words.html">Words</a>
                      <a href="notes.html">Notes</a>
                    </div>
                </div>  
            </nav>
        </div>

Upvotes: 2

Raahul
Raahul

Reputation: 397

.dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
      width: -webkit-fill-available;
    }

Setting width to -webkit-fill-available will do the change.

If you want to appear as seperate boxes. You need to use flex feature.

Upvotes: 0

Related Questions