?
Solved

Variable width of drop down menu items

Posted on 2010-09-01
8
Medium Priority
?
422 Views
Last Modified: 2012-05-10
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
Comment
Question by:JeffreyDurham
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
8 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 33592532
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
 
LVL 42

Expert Comment

by:David S.
ID: 33592829
@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
 
LVL 43

Expert Comment

by:Rob
ID: 33592837
@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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 42

Expert Comment

by:David S.
ID: 33592938
@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
 
LVL 43

Expert Comment

by:Rob
ID: 33592993
you have a fair point re the :hover

I think the first issue here however is getting the code to work
0
 

Author Comment

by:JeffreyDurham
ID: 33599574
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
 
LVL 43

Accepted Solution

by:
Rob earned 2000 total points
ID: 33607962
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
 

Author Comment

by:JeffreyDurham
ID: 33686893
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month11 days, 15 hours left to enroll

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question