CODEWITHSUNDEEP
css
hobbes
hobbes

Reputation: 467

How do I change CSS submenu width so it doesn't used the same width as the main menu?

I'm currently using CSS submenus by working with ul > li > ul > lu. My current CSS code is using:

#nav li:hover ul.sub 
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; width:100%; height:auto;}

The width is find for the top menu, but within the sub menu, it uses the original width value from the top menu. If I change the width to 325%, then the submenu is wide enough but then the top menu is too wide.

I've been messing with the CSS format, but can't seem to get the submenu to hold its own 100% width value separate from the top menu.

Does anyone have a solution on how to use 100% width to match its contents, and not the value of the top menu?

If anyone wants a peak to see what I mean, they can have a look here: http://

I have it currently set to 100% width to show you the results of the submenu.

Upvotes: 0

Views: 2852

Answers (2)

IMI
IMI

Reputation: 2469

Due to the way that you have your CSS written, you will want to change the following rule in your css file:

#nav li:hover li:hover ul, #nav li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover li:hover ul {
  left: 100%;
  /* you may want to use "left:calc(100% + 3px);" to account for the padding */
  width: auto;
}

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115044

Set the width of the submenu ul to auto

Then apply white-space:nowrap to the submenu li.

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}
a {
  text-decoration: none;
  padding: 0.5em;
  display: block;
}
li {
  background: orange;
  display: inline-block;
}
nav > ul {
  background: lightblue;
}
nav > ul > li {
  position: relative;
}
nav > ul > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  width:auto;
}
nav > ul > li > ul li {
  display: block;
  white-space: nowrap;
  background: #000;
}
<nav role='navigation'>
  <ul>
    <li><a href="#">Home</a>
      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Clients</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
      </ul>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Clients</a>
    </li>
    <li><a href="#">Contact Us</a>
    </li>
  </ul>
</nav>

Upvotes: 2

Related Questions