SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop down Menu Width

    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.


    Code:
    <!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. #2
    SitePoint Member
    Join Date
    Sep 2013
    Location
    Guelph, Ontario, Canada
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    One option would be to change this (line 216):

    Code:
    nav ul li:hover > ul {
      display: block;
    }
    to this:

    Code:
    nav ul li:hover > ul {
      display: table;
    }

  4. #4
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    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.

    Code:
    nav ul li{white-space:nowrap}

  6. #6
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    nav ul li{white-space:nowrap}
    Thank you


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •