html menu

[Percival07]

HI PEOPLE,
i have a problem with creating a menu in html, I tried creating 1 with list and it changes each and everytym i change a computer to another. Any1 with a better approach maybe?

[stultuske]

what do you mean: it changes?
also, what is your code?

[AleMonteiro]

Hi, I didn't understand anything about your problem.

Please be more specific and try to explain what you want and what the problem is.

[Percival07]

when i open it from another computer with a differing resolution it became squashed

[JorgeM]

Please post your relevant code so we can take a look and advise.

[Percival07]

     <table style="width: 100%">
            <tr>
                <td width="20px">&nbsp;&nbsp;</td>
                <td>
                <a href="la">
                <div id="wrapper">
<div id="navMenu">

<ul>
<li><a href="Mainsite.htm" style="width:100px">Home</a>
<!--end inner ul-->
</li><!--End of main list-->
</ul><!--End of main ul-->

</div><!--End of navMenu div-->
</div>
<div id="wrapper">
<div id="navMenu">

<ul>
<li><a href="#" style="width:100px">School</a>
<ul>

<li><a href="../Comming soon/Comming Soon.htm">Register</a></li>
<li><a href="../Comming soon/Comming Soon.htm">Residence</a></li>
<li><a href="../information/information.htm">Information</a></li>
<li><a href="../heritage/heritage mlazi.htm">Heritage and Archives</a></li>
<li><a href="../Gov body/gov body mlazi.htm">Governing body</a></li>
<li><a href="../STAFF/staffing.htm">Staff</a></li>
<li><a href="../Facilities/Facilities.htm">Facilities</a></li>
<li><a href="../boarding/boarding.htm">Boarding</a></li>

</ul><!--end inner ul-->
</li><!--End of main list-->
</ul><!--End of main ul-->

</div><!--End of navMenu div-->
</div>
<div id="wrapper">
<div id="navMenu">

<ul>
<li><a href="#" style="width:100px">Academic</a>
<ul>

<li><a href="../webs/home page/AcademicOverview.htm">Academic Overview</a></li>
<li><a href="../webs/home page/SubjectOffered.htm">Subject Offered</a></li>
<li><a href="../webs/home page/AcademicInfomation.htm">Academic Information</a></li>
<li><a href="../Comming soon/Comming Soon.htm">Academic Achievement</a></li>
<li><a href="../webs/home page/MatricPerfomance.htm">Matric Performance</a></li>
</ul><!--end inner ul-->
</li><!--End of main list-->
</ul><!--End of main ul-->

</div><!--End of navMenu div-->
</div>
<div id="wrapper">
<div id="navMenu">

<ul>
<li><a href="#" style="width:100px">Sport</a>
<ul>

<li><a href="../webs/home page/SportResults.htm">Sport Result</a></li>
<li><a href="../webs/home page/SportOverview.htm">Sport Overview</a></li>
<li><a href="../webs/home page/SportOffered.htm">Sport Offered</a></li>
</ul><!--end inner ul-->
</li><!--End of main list-->
</ul><!--End of main ul-->

</div><!--End of navMenu div-->
</div>
<div id="wrapper">
<div id="navMenu">

<ul>
<li><a href="../Gallery/Gallery.htm" style="width:100px">Gallery</a>
<!--end inner ul-->
</li><!--End of main list-->
</ul><!--End of main ul-->

</div><!--End of navMenu div-->
</div>
<div id="wrapper">
<div id="navMenu">

<ul>
<li><a href="#" style="width:100px">Culture</a>
<ul>

<li><a href="../Cultural Enrichment/Caltural.htm">Cultural Enrichment</a></li>
<li><a href="../Activities/Activities.htm">Activities</a></li>
</ul><!--end inner ul-->
</li><!--End of main list-->
</ul><!--End of main ul-->

</div><!--End of navMenu div-->
</div>
<div id="wrapper">
<div id="navMenu">

<ul>
<li><a href="#" style="width:100px">News</a>
<ul>

<li><a href="../Comming soon/Comming Soon.htm">School Matters</a></li>
<li><a href="../Comming soon/Comming Soon.htm">Notices</a></li>
</ul><!--end inner ul-->
</li><!--End of main list-->
</ul><!--End of main ul-->

</div><!--End of navMenu div-->
</div>
<div id="wrapper">
<div id="navMenu">

<ul>
<li><a href="../Principal/Principal.htm" style="width:100px">Head Master</a>
</li>
</ul><!--End of main ul-->

</div><!--End of navMenu div-->
</div>
<div id="wrapper">
<div id="navMenu">

<ul>
<li><a href="../Security/Security.htm" style="width:100px">Security</a>
</li><!--End of main list-->
</ul><!--End of main ul-->

</div><!--End of navMenu div-->
</div>

</a>
                </td>

[lps]

Hi, no offence but why style the menu yourself when those jobs are already done for you? I have use superfish for quite a long time now and it did a great job in maintain all the alignment in different browser and different resolution.

[JorgeM]

So a few comments...

first, I wouldnt wrap your code within a table. Second, you listed various instances where you used the same ID for different elements. IDs should only be used once within the page. If you need to apply the same style to more than one element, assign a class instead.

Unfortunately, you didnt include your CSS so I see your menu as a typical unordered list.

With regard to lps' suggestion, it is a good one. there are quite a bit of CSS menu samples on-line, superfish being one of the more common ones. take a look at those examples, and just modify the CSS to fit your needs.