[Eskymo]

I've just tried to implement this tutorial I found the CSS-Tricks website in the site I'm working on at the moment to change my normal list menu into a dropdown when the site is viewed on small screens - I'm testing on my iPod touch as I don't have an iPhone and I have two main problems:

1. when I click on the drop down menu - the page zooms in - I don't want this to happen and I don't know why it is.
2. the links in the drop down do nothing - they don't link anywhere even though a link is specified - why don't they work?

This is my code:

<div id="navigation-area">
	<ul id="nav">
		<li><a href="http://www.google.com">About</a></li>
		<li><a href="http://www.google.com">Locations</a></li>
		<li><a href="http://www.google.com">Products</a></li>
		<li><a href="http://www.google.com">Development</a></li>
		<li><a href="http://www.google.com">Partnering</a></li>
		<li><a href="http://www.google.com">Community Involvement</a></li>
		<li><a href="http://www.google.com">Careers</a></li>
		<li><a href="http://www.google.com">Media Centre</a></li>
		<li class="last"><a href="http://www.google.com">Contact</a></li>
	</ul> 
			
	<select>
		<option value="">Select</option>
				
		<option value="http://www.google.com">About</option>
		<option value="http://www.google.com">Locations</option>
		<option value="http://www.google.com">Products</option>
		<option value="http://www.google.com">Development</option>
		<option value="http://www.google.com">Partnering</option>
		<option value="http://www.google.com">Community Involvement</option>
		<option value="http://www.google.com">Careers</option>
		<option value="http://www.google.com">Media Centre</option>
		<option value="http://www.google.com">Contact</option>
	</select> 
</div> <!-- END navigation-area -->

I did originally have '#' in place for all the links, but substituted these for links to Google for now so there was actually somewhere for the links to take you so I could test it works - it doesn't - and I'm not sure what I'm doing wrong.

I've got this in my main CSS file:

#navigation-area {
    width: 94%;
    margin: 0 auto;
    padding: 20px 0px 0px 0px;
}

#nav li {
	display: inline;
	list-style-type: none;
	padding-right: 10px;
	font-weight:bold;
	font-size: 0.75em; /* 12px/16px */
	color: 141D5A;
}
#nav li.last {padding: 0px;}

#nav li a:link, #nav li a:visited { color: #141D5A; text-decoration: none; }
#nav li a:hover, #nav li a:active { color: #F29400; text-decoration: underline; }

#navigation-area select {
  display: none;
}

and this is my CSS file for small screens:

#navigation-area {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0px 0px 0px;
}

#navigation-area li     { display: none; }
#navigation-area select { display: inline-block; }

and when I view the site on the small screen the drop down menu does appear just fine. When I click on it - for some reason the whole page zooms in - not sure why this happens - and when I select a link and click 'done' I get taken nowhere and I also have to 'pinch' the screen to get it back to the normal size.

Any ideas?
Have I missed something fundamental?

[Eskymo]

I managed to find this snippet of code on http://www.w3schools.com here:

http://www.w3schools...ryjs_selectmenu

Implemented it and it works just fine - just had to add action="" to the form tag to get the page to validate.