Clever Geek Handbook

I want my dropdown menu to have max width, but my CSS is not working as expected

I want my dropdown menus to be no more than 250px wide and the text to the next line. I am setting the maximum width, but they don't expand.

http://jsfiddle.net/wtpvejjh/1/

<nav>
  <ul>
    <li><a href="#"></a>First
      <ul>
        <li><a href="#">I want this to wrap to the next line at 250px</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
      </ul>
    </li>
    <li><a href="#"></a>Second
      <ul>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
      </ul>
    </li>
    <li><a href="#"></a>Third
      <ul>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
      </ul>
    </li>
  </ul>
</nav>
+3


source to share


4 answers


To restrict a specific LI (as per OP's original question):

Install nav ul {width:250px}

and clear

floating li

. They will then sit below eachother and only be as wide as their content until they are as wide as the parent (250px) and have to be wrapped.

nav li {
  list-style: none;
  float:left;
  position: relative;
  padding: 10px;
  background: #eee;
}

nav li a {
  display:inline-block; /* Make these inline or inline block so their width is collapsed. */
}

nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  width: 250px; /* Set width. This will 'contain' the children. */
}

nav li ul li {
   clear:both; /* Clear these so they stack. */
}
nav li ul li a {
  padding: 5px;
  color: red;
  text-decoration: none;
}

li:hover ul {
  display: block;
}
      

        
        
        
      

    
<nav>
  <ul>
    <li><a href="#"></a>First
      <ul>
        <li><a href="#">I want this to wrap to the next line at 250px</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
      </ul>
    </li>
    <li><a href="#"></a>Second
      <ul>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
      </ul>
    </li>
    <li><a href="#"></a>Third
      <ul>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
      </ul>
    </li>
  </ul>
</nav>
Run codeHide result


To constrain a child UL to its maximum width (as per OP's comment):

It feels a bit "hacked" and your mileage may vary, but the following works for me ...



Use inline-block

, not float

parent li

. Set the child ul

to your desired maximum width

and specify the child li

as table-rows

. This should mean that the "row-table" will be collapsed and held by the content until it reaches its parent boundaries, at which point the content will be complete.

nav {
  font-size:0; /* set font size to avoid the natural margin that exists between inline-block elements */
}
nav li {
  font-size:16px; /* undo font size change to avoid the natural margin that exists between inline-block elements */
  list-style: none;
  display:inline-block; /* display inline (rather than float) */
  position: relative;
  background: #eee;
  padding: 10px;
}
nav li:hover {
  background: #ddd;
}
nav li a {
  display:block;
}
nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  width:250px; /* fix at your desired max width */
}
nav li ul li {
  display:table-row; /* display like a table-row */
}
nav li ul li a {
  padding: 10px;
  color: red;
  text-decoration: none;
}
li:hover ul {
  display: block;
}
      

        
        
        
      

    
<nav>
  <ul>
    <li><a href="#"></a>First
      <ul>
        <li><a href="#">I want this to wrap to the next line at 250px</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
      </ul>
    </li>
    <li><a href="#"></a>Second
      <ul>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
      </ul>
    </li>
    <li><a href="#"></a>Third
      <ul>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
      </ul>
    </li>
  </ul>
</nav>
Run codeHide result


Update (as per OP's comment regarding the need for a shadow window)

Assuming you can edit HTML, you need to wrap the child ULs in an extra element.

See: http://jsfiddle.net/wtpvejjh/49/

+3


source


FIDDLE HERE http://jsfiddle.net/wtpvejjh/30/ Check it out, I was just playing around with your code and the solution was simple, in fact you need to give the max width nav li ul li

not nav li ul

like you did.



NOTE . Sometimes when you give max width and if one word takes up more width than the word comes out of the element, so use word-wrap:break-word;

it will break the word and make it adjust the width.

+2


source


for smooth pseudo elements is the answer

Providing a nav ul

fixed width and clearing its floats correctly.

In addition, using :before

and :after

pseudo, you will give a visual width of the coherence of the elements nav li ul li

,

check the script .

0


source


Simple , you just need to add your second level width property li

to your css like this:

nav ul li ul li{  
  width: 250px;
}

Checkout DEMO

0


source






More articles:


All Articles