• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 438
  • Last Modified:

Variable width of drop down menu items

Hello Experts!

I'm trying to create a drop down menu with a fly out for sub lists in the menu.  If I set the width to fixed width of any parent li items in my style sheet that seems to work but what I'd rather do is set the the list to the width of its largest item.  I've done width: auto and whitespace: nowrap on every ul, li, and a tags in my spreadsheet but I can't seem to get this working right.  Any suggestions would be appreciated!
here is my html

    <div id="main_top_panel">
        
          <div id="navigation_panel">
            <div id="topmenu">
            
                <li>
                    <a href="index.html" class="home">Home</a>
                </li>
                
                
                <li>
                    <a href="about-us.html" class="about_us">About&nbsp;Us</a>
                </li>
                
                
                <li >
                    <a href="products.html" class="project">Products </a>
                    <ul >
                         <li >
		                    <a class="fly" href="#NOGO">Building Permits</a>
		                    <ul>
		                        <li><a href="#nogo">Overview</a></li>
		                        <li><a href="#nogo">Coverage Areas</a></li>
		                        <li><a href="#nogo">View A Sample</a></li>
		                        <li class="last"><a href="#nogo">Order Now!</a></li>
		                    </ul>
		                 </li>
		                 <li><a href="#NOGO">Pool Permits</a></li>
		                 <li><a href="#NOGO">New Home Sales</a></li>
		                 <li><a href="#NOGO">Foreclosure Data</a></li>
		                 
		                 <li class="last"><a href="#NOGO">Vacant Land Transactions</a></li>
		             </ul>   
		        </li>             
		              
                    <li>
                        <a href="services.html" class="service">Services </a>
                    </li>
                
                <li>
                    <a href="#" class="client">Clients </a>
                </li>
                
                <li >
                    <a href="#" class="blog">Blog </a>
                </li>
                
                <li class="last">
                    <a href="contact-us.html" class="contact_us">Contact&nbsp;Us </a>
                </li>
                
                
                 <div id="login" style="float: right;">
                     <asp:Login ID="Login1" runat="server" Orientation="Horizontal" 
                      RememberMeText="Remember me" TextLayout="TextOnTop" TitleText="" 
                      UserNameLabelText="Email:">
                     </asp:Login>
                 </div>
            </div>
            </div>
          </div>

here is my css


#topmenu  
{
    margin:0px; 
    padding:20px 0px 0px 0px; 
    
}

#topmenu ul 
{
    padding:0; 
    margin:0; 
    list-style:none; 
    float:left; 
    background:#fff; 
    border-top:1px solid #fe7; 
    border-color:#fe7 #b80 #b80 #fe7;
    width: auto;    
    white-space: nowrap;
}

#topmenu li
{
    float:left;
}

#topmenu li ul
{
    display: block; 
    width: auto;
    white-space: nowrap;
}

#topmenu li li
{
    float:none;
    border-left:1px solid #fe7; 
    border-right:1px solid #b80;
}

#topmenu li li.last 
{
    border-bottom:1px solid #b80;
}

/* a hack for  IE6 */
* html #topmenu li li 
{
    float:left;
}

#topmenu ul li  
{
    display:block; 
    float:left;	
    list-style:none;
    width: auto;
    white-space: nowrap;
}


#topmenu li a 	
{
    font:bold 12px Georgia, "Times New Roman", Times, serif;
    color:#8f8c8c;
    text-decoration:none;
    display:block;
    float:left;
    padding:10px 10px 0px 10px ;
    line-height:36px; 
    white-space: nowrap; 
    width:  inherit;
}


#topmenu li a.home
{
    background:url(../images/home.gif) top no-repeat;
}    

#topmenu li a.about_us 
{
    background:url(../images/about_us.gif) top no-repeat;
}

#topmenu li a.service 	
{
    background:url(../images/service.gif) top no-repeat;
}

#topmenu li a.project 
{
    background:url(../images/project.gif) top no-repeat;
}

#topmenu li a.client 
{
    background:url(../images/client.gif) top no-repeat;
}

#topmenu li a.blog 	
{
    background:url(../images/blog.gif) top no-repeat;
}
    
#topmenu li a.contact_us 	
{
    background:url(../images/contact_us.gif) top no-repeat;
}


#topmenu li li a 
{
    display:block; 
    height:20px; 
    line-height:20px; 
    float:none; 
    padding:0px 25px 0px 5px ; 
    font-weight:normal; 
    letter-spacing:1px;
    white-space: nowrap;
    width: auto;
}

#topmenu li li a.fly 
{
    background:url(fly.gif) no-repeat right center;
}

#topmenu li:hover 
{
    position:relative; 
    z-index:300;
}

#topmenu li.cssplay_hover 
{
    position:relative; 
    z-index:300;
}

#topmenu li.cssplay_hover a 
{
    color:#000;
}

#topmenu li li a 
{
    color:#000;
}

#topmenu li li.cssplay_hover a 
{
    color:#fff; 
    background-color:#d5aa00;
}


#topmenu li:hover ul 
{
    left:0; 
    top:33px; 
    z-index:500;
}

#topmenu li.cssplay_hover ul 
{
    left:0; 
    top:33px; 
    z-index:500;
}

#topmenu ul 
{
    position:absolute; 
    left:-9999px;
    top:-9999px;
}

* html #topmenu ul 
{
    width:2px;
}
/* it could have been this simple if all browsers understood */
/* show next level */
#topmenu li:hover li:hover > ul 
{
    left:-5px; 
    margin-left:100%; 
    top:-1px; 
    z-index:500;
}
/* keep further levels hidden */
#topmenu li:hover > ul ul 
{
    position:absolute; 
    left:-9999px; 
    top:-9999px; 
    width:auto; 
}

/* show path followed */

#topmenu li:hover > a 
{
    color:#000;
}

#topmenu li li:hover > a 
{
    color:#fff; 
    background-color:#d5aa00;
}


#topmenu li a:hover  
{
    color:#000;
}

Open in new window

0
JeffreyDurham
Asked:
JeffreyDurham
  • 4
  • 2
  • 2
1 Solution
 
RobOwner (Aidellio)Commented:
I believe the only way you could do this is use javascript to loop through your list when the DOM has loaded and set the width based on what it finds.

btw - you should check your code conforms with the html standard as i've found a few issues with it... like div tags not closed in the right places etc

I've fixed up your code and included a javascript library that we'll use later once the code is working.  You see when the code is cleaned up nothing shows.... i'm curious to why you've used the following:
    position:absolute;
    left:-9999px;
    top:-9999px;
    width:auto;

instead of a display: none ??
index.zip
0
 
David S.Commented:
@tagit

Absolutely positioning an element off the top and/or left sides of a document allows assistive software, like screen-readers, to "see" the links. If display:none or visibility:hidden were used instead, such software would not provide access to the links for visually impaired users.
0
 
RobOwner (Aidellio)Commented:
@Kravimir - i understand what you're saying but isn't the reason it is off the screen so that users don't "see" it??  Surely the screen reader software would see these elements once display is set to "block" or "inline"??
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
David S.Commented:
@tagit

Many drop-down menu systems show sub-menus via hover/mouseover. People who use assistive devices don't use a mouse to trigger such an action (and neither do users of tablet devices, like iPad, for that matter).  Yes, if the sub-menus were made visible via a click event instead, there wouldn't be the same problem. However, before using display:none with a click event, I'd ask the opinion of someone who knows more about screen-reader users than I. http://www.accessifyforum.com/ might be a good place to ask such a question.
0
 
RobOwner (Aidellio)Commented:
you have a fair point re the :hover

I think the first issue here however is getting the code to work
0
 
JeffreyDurhamAuthor Commented:
Sorry about that guys, I guess it would have made sense to include the entire html, i had truncated the part I couldnt get to work but didnt test it first :P.  




expertsdemo.zip
0
 
RobOwner (Aidellio)Commented:
Hi,
I've added the javascript so that it makes all the items the same width.  You might want to tweak it so that it doesn't make the top level elements  that width too?

I also had to add <ul> tags for the toplevel and I moved the #id toplevel into the <ul> from the <div>


experts.zip
0
 
JeffreyDurhamAuthor Commented:
it looks like it was that top level ul that I was missing that seemed to have broken everything... i got it working after fixing that and just readjusting the rest of the css to include it, thanks for your help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

  • 4
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now