Solved

Variable width of drop down menu items

Posted on 2010-09-01
8
417 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
  • 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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 500 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

856 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