CODEWITHSUNDEEP
htmlcssdrop-down-menu
viktor.radovic
viktor.radovic

Reputation: 518

How can I make my dropdown submenus the same width?

I have a drop down menu implemented in CSS, but my submenus are not all the same size. I'm not sure how to fix the problem, because adding the width property does not work.

Here is the menu CSS:

.submenu {
  display: none;
}
#navlist li:hover ul {
  display: block;
  /*used to block display the dropdown */
  position: absolute;
  padding: 0px;
  margin-top: 15px;
  width: 200px;
}
#navlist li {
  list-style: none;
  margin: 0;
  height: 30px;
}
#navlist li a {
  color: #F1F6FE;
  padding: 5px 15px;
  margin-left: 3px;
  border: 1px solid #0F3974;
  border-bottom: none;
  background: #2153AA url('../img/tab_bg.gif') bottom left repeat-x;
  background-size: 80px 60px;
  text-decoration: none;
}
#navlist li a:link {
  color: #F1F6FE;
}
#navlist li a:visited {
  color: #F1F6FE;
}
#navlist li a:hover {
  color: #FFFFFF;
  background: #3364BB;
  border-color: #0F3974;
  width: 200px;
}
#submenu li:hover {
  display: flex;
  /* display the dropdown */
  position: absolute;
  padding: 0px;
  margin-top: 15px;
  width: 200px;
}
<div id="navcontainer">
  <ul id="navlist">
    <li id="active">
      <a href="index.php" id="current">Home</a>
    </li>
    <li>
      <a href="#">Tools</a>
      <ul class='submenu'>
        <li><a href="hcm.php">HCM</a>
        </li>
        <li><a href="interlopers.php">Interlopers</a> 
        </li>
        <li><a href="#">SFD</a>
        </li>
        <li><a href="#">Summary report</a>
        </li>
        <li><a href="#">Age</a>
        </li>

      </ul>
    </li>
    <li> <a href="#">Data</a>
      <ul class='submenu'>
        <li><a href="#">Catalogs</a>
        </li>
        <li><a href="#">Plots</a>
        </li>
        <li><a href="papers.php">Papers</a>
        </li>
      </ul>
    </li>
    <li> <a href="about.php">About</a>
    </li>
    <li> <a href="links.php">Links</a>
    </li>
  </ul>
</div>

Upvotes: 0

Views: 517

Answers (1)

jafarbtech
jafarbtech

Reputation: 7015

As submenus are all in different size dont specify width property. instead use display: block; for all a tags which adjusts the width according to the content.

Separate the hovered and non hovered submenu style to make it hidden when not hovered by using

#navlist li ul {
  display: none;
  /*used to block display the dropdown */
  position: absolute;
  padding: 0px;
  margin-top: 1px;
}
#navlist li:hover ul {
  display: block;
}

remove the margin-top to remove hovering issues

Demo:-

.submenu {
  display: none;
}
#navlist li ul {
  display: none;
  /*used to block display the dropdown */
  position: absolute;
  padding: 0px;
  margin-top: 1px;
}
#navlist li:hover ul {
  display: block;
}
#navlist li {
  list-style: none;
  margin: 0;
  height: 30px;
}
#navlist > li {
  display: inline-block;
}
#navlist li a {
  color: #F1F6FE;
  padding: 5px 15px;
  margin-left: 3px;
  border: 1px solid #0F3974;
  border-bottom: none;
  background: #2153AA url('../img/tab_bg.gif') bottom left repeat-x;
  background-size: 80px 60px;
  text-decoration: none;
  display: block;
}
#navlist li a:link {
  color: #F1F6FE;
}
#navlist li a:visited {
  color: #F1F6FE;
}
#navlist li a:hover {
  color: #FFFFFF;
  background: #3364BB;
  border-color: #0F3974;
}
#submenu li:hover {
  display: flex;
  /* display the dropdown */
  position: absolute;
  padding: 0px;
  margin-top: 15px;
}
<div id="navcontainer">
  <ul id="navlist">
    <li id="active">
      <a href="index.php" id="current">Home</a>
    </li>
    <li>
      <a href="#">Tools</a>
      <ul class='submenu'>
        <li><a href="hcm.php">HCM</a>
        </li>
        <li><a href="interlopers.php">Interlopers</a> 
        </li>
        <li><a href="#">SFD</a>
        </li>
        <li><a href="#">Summary report</a>
        </li>
        <li><a href="#">Age</a>
        </li>

      </ul>
    </li>
    <li> <a href="#">Data</a>
      <ul class='submenu'>
        <li><a href="#">Catalogs</a>
        </li>
        <li><a href="#">Plots</a>
        </li>
        <li><a href="papers.php">Papers</a>
        </li>
      </ul>
    </li>
    <li> <a href="about.php">About</a>
    </li>
    <li> <a href="links.php">Links</a>
    </li>
  </ul>
</div>
</div>

Upvotes: 2

Related Questions