Top menu not display horizontally

Question

ankit.pandey3 -8 Junior Poster in Training

15 Years Ago

<html>
<head>
<title>Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="pro_dropdown_2/pro_dropdown_2.css" /> 
<script src="pro_dropdown_2/stuHover.js" type="text/javascript"></script>

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Index.psd) -->
<table id="Table_01" width="1400" height="769" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="4">
			<img src="images/Index_01.jpg" width="198" height="768" alt=""></td>
		<td colspan="10">
			<img src="images/Index_02.jpg" width="1002" height="315" alt=""></td>
		<td rowspan="4">
			<img src="images/Index_03.jpg" width="200" height="768" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/Index_04.jpg" width="289" height="46" alt=""></td>
		<td>
		<span class="preload1"></span>
<span class="preload2"></span>
 
<ul id="nav">
	<li class="top"><a href="#nogo1" class="top_link"><span>HOME</span></a>
	<li class="top"><a href="#nogo1" class="top_link">ABOUT US</a>
	<li class="top"><a href="#nogo2" id="products" class="top_link">PRODUCTS</a>
		<ul class="sub">
			<li><a href="#nogo19">Products handled</a>
			<li><a href="#nogo20">Products Available</a>
			<li><a href="#nogo21">Products Sourced From</a>
		</ul>
		<li class="top"><a href="#nogo22" id="Division" class="top_link">DIVISION</a>
		<ul class="sub">
			<li><a href="#nogo23">Processing & Value </a></li>
			<li><a href="#nogo24">Retailing</a></li>
			<li><a href="#nogo25">Warehouse Management</a></li>
			<li><a href="#nogo26">Other Commodities</a></li>
			<li><a href="#nogo26">Financial Service</a></li>
			<li><a href="#nogo26">Property Managements</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo27" id="contacts" class="top_link">CONTACT</a></li>
		
<p>&nbsp;</p>
		<td rowspan="2">
			<img src="images/Index_12.jpg" width="6" height="47" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/Index_13.jpg" width="1" height="407" alt=""></td>
		<td colspan="2">
			<img src="images/Index_14.jpg" width="434" height="1" alt=""></td>
		<td>
			<img src="images/Index_15.jpg" width="130" height="1" alt=""></td>
		<td>
			<img src="images/Index_16.jpg" width="172" height="1" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/Index_17.jpg" width="1001" height="406" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="198" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="288" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="146" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="34" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="148" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="43" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="130" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="34" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="172" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="6" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="200" height="1" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

CSS CODE

/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at 
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.preload1 {background: url(three_1.gif);}
.preload2 {background: url(three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:red; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; weight:100px; background: url(three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:125px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:120px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:125px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;}
#nav li ul.sub li a.fly
{background:#bbd37e url(arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover 
{background:#6a812c; color:#fff; border-color:#fff;}



#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#6a812c url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;} 

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#bbd37e url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#bbd37e;}

html-css user-interface web-design

1 Contributor
1 Reply
125 Views
6 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by ankit.pandey3

Dani AI

Generated 9 Months Ago

Quick diagnosis: the menu CSS you linked will lay items out horizontally, but the HTML around it is malformed so the browser closes and restructures the list. That forces each entry onto its own line. Fix the markup first, then the existing stylesheet or a small modern rule will make the items align horizontally.

Concrete steps (in order):

Run the page through the W3C validator to catch unclosed or misnested tags: W3C Markup Validation Service.
Make sure the ul#nav contains only li elements (each li closed) and any nested ul is placed inside the parent li. Remove block-level tags (for example stray <p>) from inside the ul. Also ensure the ul is wholly inside a single table cell if you must keep the table layout.
Add a standards DOCTYPE so browsers use standards mode:

<!DOCTYPE html>

Use the browser inspector (F12) to select a nav li and check the computed display and any overridden rules. If the stylesheet isn’t loaded or another rule forces display:block, that will stack items.

If you want a quick modern fix after cleaning the markup, use a simple flexbox rule for the nav container:

#nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
#nav li { margin-right: 12px; }

Extra notes: avoid interleaving td tags with li markup. Table-based layouts often hide structural mistakes. If supporting very old IE, verify any hover polyfill script is actually loading; otherwise prefer semantic nav outside the table. For a primer on modern layout, see MDN’s flexbox overview: Basic concepts of Flexbox.

Based on the posted markup, will likely see the horizontal menu once the list structure is corrected and the stylesheet is applied in standards mode.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ankit.pandey3 -8 Junior Poster in Training · Answer 1 · 2011-02-26T10:40:26+00:00

Hi friends......
I want to display My top menu such as "Home","About Us" till "Contact Us" display horizontally but I displays in different lines..
How I Can made it....
Plz help............