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!
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 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 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;
}
@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.
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.
@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"??
@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.
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.
you have a fair point re the :hover
I think the first issue here however is getting the code to work
I think the first issue here however is getting the code to work
ASKER
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
expertsdemo.zip
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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!
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