Dropdown Menu Advice

HTML & CSS
1

Hey people!

I’ve used an online help site to construct a CSS-Based Dropdown Menu. It works perfectly. I just need a little advice to help me tweak it a bit.

My code is as follows:

<div id="container">
<div id="menu">
 
<ul id="item1">
<li class="top"><img src="/wp-content/themes/thepink/images/home.png" height="30px" width="80px" /></li>

</ul>
 
<ul id="item2">
<li class="top"><img src="/wp-content/themes/thepink/images/community.png" height="30px" width="125px" /></li>
<li class="item"><a href="/forum/">Forums</a></li>
<li class="item"><a href="/chat/">Chat</a></li>
<li class="item"><a href="/aboutcommunity/">About the Community</a></li>
</ul>
 
<ul id="item3">
<li class="top"><img src="/wp-content/themes/thepink/images/videos.png" height="30px" width="90px" /></li>
<li class="item"><a href="/browsevideos/">Browse Videos</a></li>
<li class="item"><a href="/aboutparenttv/">About ParentChannel.TV</a></li>
</ul>

<ul id="item4">
<li class="top"><img src="/wp-content/themes/thepink/images/shop.png" height="30px" width="85px" /></li>
<li class="item"><a href="#">Browse Auctions</a></li>
<li class="item"><a href="#">Browse Classifieds</a></li>
<li class="item"><a href="#">Create an Ad/Listing</a></li>
<li class="item"><a href="#">About The 1-Stop</a></li>
</ul>

<ul id="item5">
<li class="top"><img src="/wp-content/themes/thepink/images/astrology.png" height="30px" width="125px" /></li>
<li class="item"><a href="#">Daily Horoscopes</a></li>
<li class="item"><a href="#">Romance</a></li>
<li class="item"><a href="#">Personal Reports</a></li>
</ul>

<ul id="item6">
<li class="top"><img src="/wp-content/themes/thepink/images/charts_tools.png" height="30px" width="150px" /></li>
<li class="item"><a href="#">Baby Name Finder</a></li>
<li class="item"><a href="#">Due Date Calculator</a></li>
<li class="item"><a href="#">Ovulation Predictor</a></li>
<li class="item"><a href="#">Weight Charts</a></li>
</ul>

<ul id="item7">
<li class="top"><img src="/wp-content/themes/thepink/images/fun_games.png" height="30px" width="150px" /></li>
<li class="item"><a href="#">Pre-School Games</a></li>
<li class="item"><a href="#">Educational Games</a></li>
<li class="item"><a href="#">Other Games</a></li>
</ul>

body {
	font-family:georgia;
	}

#container {
	width:100%;
	margin:auto;
	font-size:11pt;
}


#menu {
	position:absolute;
	margin-top:10px;
	}
	
#menu ul .item {
	display:none;
	}
	
#menu ul:hover .item {
	position: relative;
	display:block;
	background:#000;
	padding:1px;
	margin:1px;
	}
 
#menu ul:hover .item a {
	color:#fff;
	text-decoration: none;
	}
	
#menu ul:hover .item a:hover {
	color:#999;
	}
 
#menu ul {
	float:left;
	margin:0px;
	padding:2px;
	background:#b10000;
	list-style:none;
	}

.clear {
	clear:both;
	height:10px;
	}

I just have three questions:

  1. Is the menu WC3 compliant? If not, how do I change it to make it so.

  2. How can I stop the “Top” menu buttons from moving when the menu that pops up underneath is wider than the button itself?

  3. I’ve been told this does not work on an iPhone/iPod - How can I change it so that it’s more universal?

Many thanks in advance for your support.

2

“Just” lol :slight_smile: Those 3 little questions go to the heart of web development and would take a few good books to answer fully.

  1. Is the menu WC3 compliant? If not, how do I change it to make it so.

If you mean is it valid then run it through the validator and find out :slight_smile:

If you mean is it accessible then the answer is no because there is no keyboard support, no screen reader support and no support for users with motor impaired disabilites (e.g. users who have trouble controlling the mouse).

You should always ensure that the menu can be operated via the keyboard and not just with the mouse.

The menu you are using is an unorthodox and non semantic structure that doesn’t describe the innate hierarchy of a drop down menu very well. Nearly all accessible dropdowns are created with nested lists and not sepearte uls.

You may want to look at some accessible examples to understand more.

http://learningtheworld.eu/2008/accessible-drop-down-menus/
http://pfirsichmelba.de/artikel-scripts/suckerfish-accessible.html
http://www.tyssendesign.com.au/articles/css/dropdown-low-down/
http://plugins.jquery.com/project/Superfish

Once you have made all the changes to your menu then you need to check it against the accessibility recommendations and satisfy yourself that it meets the multiple criteria specified.

IE6 is not working with your menu because it doesn’t understand hover on any element except anchors and would need javascript support. Javascript support should also be an added enhancement so that there is some delay in the hiding and showing of menus and adding some persistence for motor impaired users.

  1. How can I stop the “Top” menu buttons from moving when the menu that pops up underneath is wider than the button itself?

The sub menus should be removed from the flow and placed absolutely below the trigger item and not in-flow as per your example. The basic suckerfish menu shows the technique required.

  1. I’ve been told this does not work on an iPhone/iPod - How can I change it so that it’s more universal?

The iphone doesn’t support the hover pseudo classes as it is a touch device and therefore isn’t a suitable menu for the iphone. I would recommend you use a normal menu if iphone support is required or enhnace the menu for more capable browsers instead.

See here for the whole mobile approach:

http://yiibu.com/articles/rethinking-the-mobile-web/

and here:
http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/
http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

Sorry, if that sounds a lot of work but your questions were too far reaching for a simple answer :slight_smile: