Dropdown menu with logo (image), link, and to open a new tag

HTML & CSS
1

Hi everybody,

Would really appreciate some help with the following:

I want to make a drop down menu with:

  • links
  • logo (image) of each company I link to.
  • that opens the link in a new tab

I copied something like the code bellow but it doesn’t seem to work.

Thanks for your assistance!

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en”>
<body>

<form action=“”>
<form name=“jump”>
<p><select name=“menu”>

<option selected>KCS GROUP Websites</option>

<option value=“<a href=“http://www.abc111.com”><img src=“images/navigation/abc.jpg” alt=“abc” height=“10” width=“10” style= “border: none;”/>ABC</a></option>
<option value=”<a href=“http://www.abc111.com”><img src=“images/navigation/abc.jpg” alt=“abc” height=“10” width=“10” style= “border: none;”/>ABC</a></option>
<option value="<a href=“http://www.abc111.com”><img src=“images/navigation/abc.jpg” alt=“abc” height=“10” width=“10” style= “border: none;”/>ABC</a></option>

</select>

<input type=“button” value=“GO!” onClick=“tab.open(this.form.jumpmenu.options[this.form.jumpmenu.selectedIndex].value;”>
</p>
</form>

</body>
</html>

2

You may need a bit of JavaScript for that. A better option would be to use a standard drop down list, made with an unordered list (like normal site menus).

anyhow, I have seen it done with a select, as found here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
	<title>Test</title>
	<script type="text/javascript">
		function navigate(o)
		{
			if(document.getElementById && document.createTextNode)
			{
				if(o.getElementsByTagName('select')[0])
				{
					var sel=o.getElementsByTagName('select')[0];
					self.location=sel.options[sel.selectedIndex].value;
				
				}
			}
		}
    </script>
</head>
<body>
<form action="" method="post" onsubmit="navigate(this);return false;">
	<label for="s1">Navigate to:</label>

	<select name="s1" id="s1">
		<option value="http://www.alistapart.com">A list apart</option>		
		<option value="http://www.icant.co.uk">Christian Heilmann</option>		
		<option value="http://www.evolt.org">Evolt</option>		
	</select>
	<input type="submit" value="send" />
</form>

</body>
</html>