Drop down Menu Width

HTML & CSS
1

Hi all

I have a demo here www.ttmt.org.uk/nav

It’s a simple list navigation with drop downs

The ‘Our Work’ drop down has another drop down on the last button.

The drop downs are wider than the parent buttons but the drop under the last button of ‘Our Work’ isn’t wide enough for the text.

Why are these button not wide enough.


<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">

  <!--css-->
  <style>

    body{
    	background:#eee;
    	font-family:helvetica, sans-serif;
    }
    nav{
    	margin:50px;
    	float:left;
    }

    nav ul ul{
    	display:none;
    }
    nav ul li:hover > ul{
    	display:block;
    }
    nav ul{
    	list-style:none;
    	position:relative;
    	display:inline-table;
    }
    nav ul:after {
    	content: "";
    	clear: both;
    	display: block;
    }

    nav ul li{
    	float:left;
    }
    nav ul li a{
    	display:block;
    	padding:20px;
    	text-decoration:none;
    	background:#fff;
    	color:red;
    	margin:0 5px 0 0;
    	position:relative;
    }
    nav ul li a span{
    	display:inline-block;
    	width:14px;
    	height:7px;
    	background:blue;
    	position:absolute;
    	bottom:10px;
    	left:50%;
    	margin-left:-7px;
    }
    nav ul ul{
    	padding:0;
    	position:absolute;
    	top:100%;
    }
    nav ul ul li{
    	float:none;
    	position:relative;
    }
    nav ul ul li a{
    	background:red;
    	color:#fff;
    	margin:0 0 5px 0;
    }
    nav ul ul ul{
    	position:absolute;
    	left:100%;
    	top:0;
    }

  </style>


  <title>Title of the document</title>
  </head>

<body>

  <nav>
    <ul>
      <li><a href="#">Home<span></span></a></li>
      <li><a href="#">About Us ><span></span></a>
        <ul>
          <li><a href="#">About Us Bigger Button</a></li>
          <li><a href="#">About Us Us</a></li>
          <li><a href="#">About Us Us Us</a></li>
          <li><a href="#">About Us Us Us Us</a></li>
        </ul>
      </li>
      <li><a href="#">Our Work ><span></span></a>
        <ul>
          <li><a href="#">Our Work One</a></li>
          <li><a href="#">Our Work Two</a></li>
          <li><a href="#">Our Work Three ></a>
            <ul>
              <li><a href="#">Our Work Three Sub Button</a></li>
              <li><a href="#">Our Work Three Another Sub Button</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Contact<span></span></a></li>
    </ul>
  </nav>


</body>

</html>
2

Hi ttmt,
You can add a ‘min-width’ of 150px to your _nav ul li a.
This will be now the minimum width your navigation is. Hope that helps!

3

One option would be to change this (line 216):

nav ul li:hover > ul {
  display: [COLOR="#FF0000"]block[/COLOR];
}

to this:

nav ul li:hover > ul {
  display: [COLOR="#FF0000"]table[/COLOR];
}
4

ralph.m that sort of works, it makes it wider but not full width.

So why is this ‘ul’ not full width when it’s parent is?

5

Hi,

What are you trying to do exactly?

If you want the dropdown to match the width of the parent list item then set position:relative to the list element.


nav ul li{position:relative}

If you want the dropdown as wide as the longest entry in each dropdown then set white-space nowrap instead.


nav ul li{white-space:nowrap}
6 

nav ul li{white-space:nowrap}

Thank you