Hi,
I am working on the following menu and when I enter a long string for a menu link, that link goes above other links.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
a { text-decoration: none; font-family: Verdana }
#menu { padding: 10px 0 0 0; text-align: center }
#menu li { display: inline }
#menu a { display: inline-block; width: 90px; height: 75px; padding-top: 10px; background: #780000; color: #fff; font-size: 13px }
</style>
</head>
<body>
<ul id="menu">
<li><a href=""><img src="image.jpg" /><br /><span>Places To See Around</span></a></li>
<li><a href=""><img src="image.jpg" /><br /><span>About</span></a></li>
<li><a href=""><img src="image.jpg" /><br /><span>Hours</span></a></li>
<li><a href=""><img src="image.jpg" /><br /><span>Places To See Around</span></a></li>
<li><a href=""><img src="image.jpg" /><br /><span>Contact</span></a></li>
<li><a href=""><img src="image.jpg" /><br /><span>Support</span></a></li>
</ul>
</body>
</html>
image.jpg is a 36x36 dummy image. Do you have any idea what’s wrong with this menu?
Thanks for any ideas.