No replies
jr7
Offline
newbie
Last seen: 10 years 8 weeks ago
Timezone: GMT+1
Joined: 2010-08-04
Posts: 1
Points: 2

Hi,

I've been tearing my hair out trying to get my horizontal menu to work across all browsers:

It doesn't work in IE6 or 7 because I have used inline-block as opposed to inline when setting the display properties for the li's. So I have started from scratch in trying to get it to display properly; here's the basic code I have used:

<div id="menu">
	<ul>
		<?php 
			//Build Menu
			foreach ($pages as $id => $page)
			{ 
				if ($id != 'home' && $id == $req_page)
				{ 
					echo "<li class='selected'>".$page."</li>"; 			
				}
				elseif ($id != 'home')	
				{ 
					echo "<li><a href='/".$id."/'>".$page."</a></li>";
				}
			}
		?>
	</ul>
</div>

CSS:

/* Main Menu */
 
#menu 
{
 
	float: right;
 
	height: 159px;
 
	margin-right: 10%;
 
}
 
#menu ul {
 
	list-style: none;
 
	color: #FFF;		
 
}
 
#menu ul li {
 
	display: inline;	
 
}
 
#menu ul li.selected {
 
	background-color: #FFF;
 
	color: #C50000;
 
	padding: 0 30px;
 
	font-weight: bold;
 
	border: 1px solid #000;
 
	border-width: 0 3px;
 
}
 
#menu ul li a {
 
	padding: 0 30px;
 
	color: #DDD;
 
	text-decoration: none;
 
}
 
#menu ul li a:hover {
 
	color: #FFF;
 
}

Thanks for any help.