Win a copy of Beginning Java 17 Fundamentals: Object-Oriented Programming in Java 17 this week in the Java in General forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • Ron McLeod
  • Liutauras Vilda
  • Jeanne Boyarsky
Sheriffs:
  • Junilu Lacar
  • Rob Spoor
  • Paul Clapham
Saloon Keepers:
  • Tim Holloway
  • Tim Moores
  • Jesse Silverman
  • Stephan van Hulst
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Piet Souris
  • Frits Walraven

CSS navigation Menu

 
Ranch Hand
Posts: 469
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I want to use multiple navigation menu using same css in same page. Somehow it is not working i mean it will work only one menu but rest are not working or using functionality of CSS. Why??? Here is the HTML code:
<HTML>
<HEAD>
<meta http-equiv="Content-Language" content="en-us">

<TITLE>index</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<script type="text/javascript" src="javascripts/expandingMenu.js"></script>
<link rel="stylesheet" type="text/css" href="css/machines.css">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (index.psd) -->
<TABLE WIDTH=1003 BORDER=0 CELLPADDING=0 CELLSPACING=0 height="558">
<TR>
<TD ROWSPAN=2 height="99">
<IMG SRC="images/index_01.jpg" WIDTH=453 HEIGHT=99 ALT=""></TD>
<TD COLSPAN=4 height="76">
<IMG SRC="images/index_02.jpg" WIDTH=550 HEIGHT=76 ALT=""></TD>
</TR>
<TR>
<TD height="23">
<IMG SRC="images/index_03.jpg" WIDTH=225 HEIGHT=23 ALT=""></TD>
<TD height="23">
<IMG SRC="images/index_04.jpg" WIDTH=82 HEIGHT=23 ALT=""></TD>
<TD height="23">
<IMG SRC="images/index_05.jpg" WIDTH=113 HEIGHT=23 ALT=""></TD>
<TD height="23">
<IMG SRC="images/index_06.jpg" WIDTH=130 HEIGHT=23 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=5 height="459">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1" height="439">
<tr>
<td width="18%" height="110" align="center">
<font color="#FFFFFF"><span style="background-color: #000080"><B>MACHINES</B>
</span></font>
<ul id="menu">
<li>Saws
<ol>
<li><a href="saw_machines.html">Rock Rascal</a></li>
<li><a href="hi_ball.html">Hi Ball</a></li>
<li><a href="#">Tagit</a></li>
<li><a href="#">All in one unit</a></li>
</ol>
</li>
<li>Grinders
<ol>
<li><a href="grinders.html">Rock Rascal</a></li>
</ol>
</li>
<li>Combination Units
<ol>
<li><a href="#">Rock Rascal</a></li>
</ol>
</li>
<li>Tumblers
<ol>
<li><a href="gy_roc.html">Gyroc</a></li>
<li><a href="#">Lorton</a></li>
<li><a href="#">Thumbler</a></li>
<li><a href="#">Import</a></li>
</ol>
</li>
<li>Casting Machines
<ol>
<li><a href="#">Ney Craft</a></li>
</ol>
</li>
<li>Ultrasonic Cleaner
<ol>
<li><a href="#">Rock Rascal</a></li>
</ol>
</li>
<li>Lapping Machines
<ol>
<li><a href="#">Lapping Machines</a></li>
</ol>
</li>
<li>Dop Pot
<ol>
<li><a href="dop_pot.html">Rock Rascal</a></li>
</ol>
</li>
</ul>



</td>
<td width="61%" height="439" rowspan="4">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" height="417">
<tr>
<td width="33%" height="68">
<p align="center">
<img border="0" src="images/front_unknown.jpg" width="106" height="132"></td>
<td width="33%" height="68">
<p align="center">
<img border="0" src="images/front_diamond_tool.jpg" width="130" height="78"></td>
<td width="34%" height="68">
<p align="center">
<img border="0" src="images/front_pro_slicer.jpg" width="130" height="150"></td>
</tr>
<tr>
<td width="33%" height="97">
<p align="center">
<img border="0" src="images/front_dop_pot.jpg" width="130" height="133"></td>
<td width="33%" height="97">
<p align="center">
<img border="0" src="images/front_vibrators.jpg" width="130" height="149"></td>
<td width="34%" height="97">
<p align="center">
<img border="0" src="images/front_saws.jpg" width="130" height="124"></td>
</tr>
<tr>
<td width="33%" height="113">
<p align="center">
<img border="0" src="images/adhesives.jpg" width="130" height="145"></td>
<td width="33%" height="113">
<p align="center">
<img border="0" src="images/tumbling_supplies.jpg" width="130" height="138"></td>
<td width="34%" height="113">
<p align="center">
<img border="0" src="images/grit_kits.jpg" width="130" height="171"></td>
</tr>
<tr>
<td width="33%" height="136">
<p align="center">
<img border="0" src="images/front_abrasives.jpg" width="156" height="150"></td>
<td width="33%" height="136">
<p align="center">
<img border="0" src="images/front_grinding_wheels.jpg" width="130" height="135"></td>
<td width="34%" height="136">
<p align="center">
<img border="0" src="images/display_product.jpg" width="130" height="136"></td>
</tr>
</table>
</td>
<td width="21%" height="110" align="center">
<font color="#FFFFFF"><span style="background-color: #000080"><B>Abrasives / Polishing Supplies</B>
</span></font>
<ul id="menu">
<li>Grit Kits
<ol>
<li><a href="#">Grit Kits</a></li>
</ol>
</li>
<li>Grits
<ol>
<li><a href="#">Grits</a></li>
</ol>
</li>
<li>Polishes
<ol>
<li><a href="#">Polishes</a></li>
</ol>
</li>
<li>Medias
<ol>
<li><a href="#">Medias</a></li>
</ol>
</li>
<li>WD Belts
<ol>
<li><a href="#">WD Belts</a></li>
</ol>
</li>
<li>Diamond Belts
<ol>
<li><a href="#">Diamond Belts</a></li>
</ol>
</li>
<li>Leather Discs
<ol>
<li><a href="#">Leather Discs</a></li>
</ol>
</li>
<li>Micro Finishing Belts
<ol>
<li><a href="#">Micro Finising Belts</a></li>
</ol>
</li>
</ul>
</td>
</tr>
<tr>
<td width="18%" height="110" align="center">
<font color="#FFFFFF"><span style="background-color: #000080"><B>DIAMOND TOOLS</B>
</span></font>
<ul id="menu">
<li>Saw Blades
<ol>
<li><a href="#">Saw Blades</a></li>
</ol>
</li>
<li>Drills
<ol>
<li><a href="drills.html">Drills</a></li>
</ol>
</li>
<li>Grinding Wheels
<ol>
<li><a href="#">Grinding Wheels</a></li>
</ol>
</li>
<li>Resin Bond Belts
<ol>
<li><a href="#">Resin Bond Belts</a></li>
</ol>
</li>
<li>Metal Bond Belts
<ol>
<li><a href="#">Metal Bond Belts</a></li>
</ol>
</li>
<li>Burrs
<ol>
<li><a href="#">Burrs</a></li>
</ol>
</li>
</ul>
</td>
<td width="21%" height="110" align="center">
<font color="#FFFFFF"><span style="background-color: #000080"><B>Display Products</B>
</span></font>
<ul id="menu">
<li>Trays
<ol>
<li><a href="#">Trays</a></li>
</ol>
</li>
<li>Flocke Tray
<ol>
<li><a href="#">Flocke Tray</a></li>
</ol>
</li>
<li>Tray Liners
<ol>
<li><a href="#">Tray Liners</a></li>
</ol>
</li>
<li>Perky Boxes
<ol>
<li><a href="#">Perky Boxes</a></li>
</ol>
</li>
<li>Round Jars
<ol>
<li><a href="#">Round Jars</a></li>
</ol>
</li>
<li>Necklace Stands
<ol>
<li><a href="#">Necklance Stands</a></li>
</ol>
</li>
<li>Ring Trays
<ol>
<li><a href="#">Ring Trays</a></li>
</ol>
</li>
<li>Magnifying Boxes
<ol>
<li><a href="#">Magnifying Boxes</a></li>
</ol>
</li>
<li>Storage Boxes
<ol>
<li><a href="#">Storage Boxes</a></li>
</ol>
</li>
</ul>
</td>
</tr>
<tr>
<td width="18%" height="110" align="center">
<font color="#FFFFFF"><span style="background-color: #000080"><B>GLUES</B>
</span></font>
<ul id="menu">
<li>Hot Stuff
<ol>
<li><a href="#">Hot Stuff</a></li>
</ol>
</li>
<li>FDA
<ol>
<li><a href="#">FDA</a></li>
</ol>
</li>
<li>Tarnishield
<ol>
<li><a href="#">Tarnishield</a></li>
</ol>
</li>
<li>NCF
<ol>
<li><a href="#">NCF</a></li>
</ol>
</li>
</ul>
</td>
<td width="21%" height="110" align="center">
<font color="#FFFFFF"><span style="background-color: #000080"><B>Misc. Products</B>
</span></font>
<ul id="menu">
<li>Lube Cool
<ol>
<li><a href="#">Lube Cool</a></li>
</ol>
</li>
<li>Flocke Tray
<ol>
<li><a href="#">Flocke Tray</a></li>
</ol>
</li>
<li>Tray Liners
<ol>
<li><a href="#">Tray Liners</a></li>
</ol>
</li>
</ul>

</td>
</tr>
<tr>
<td width="18%" height="109" align="center">
<font color="#FFFFFF"><span style="background-color: #000080"><B>Rockhounding supplies</B>
</span></font>
<ul id="menu">
<li>Estwing
<ol>
<li><a href="#">Estwing</a></li>
</ol>
</li>
</ul>

</td>
<td width="21%" height="109" align="center">
<font color="#FFFFFF"><span style="background-color: #000080"><B>Jewelry Tools</B>
</span></font><P>
<font color="#FFFFFF"><span style="background-color: #000080"><B>Beading Tools</B>
</span></font>


</td>
</tr>
</table>
</TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
---------------------------------------------------------------------------
Here is CSS CODE:
ul#menu {
width: 100px;
list-style-type: none;
border-top: solid 1px #b9a894;
margin: 0;
padding: 0;
}

ul#menu ol {
display: none;
text-align: right;
list-style-type: none;
margin: 0;
padding: 5px;
}

ul#menu li,
ul#menu a {
font-family: verdana, sans-serif;
font-size: 11px;
color: #785a3c;
}

ul#menu li {
border-bottom: solid 1px #b9a894;
line-height: 15px;
}

ul#menu ol li {
border-bottom: none;
}

ul#menu ol li:before {
content: "- ";
}

ul#menu a {
text-decoration: none;
outline: none;
}

ul#menu a:hover {
color: #539dbc;
}

ul#menu a.active {
color: #be5028;
}
l#tools {
width: 100px;
list-style-type: none;
border-top: solid 1px #b9a894;
margin: 0;
padding: 0;
}

ul#tools ol {
display: none;
text-align: right;
list-style-type: none;
margin: 0;
padding: 5px;
}

ul#tools li,
ul#tools a {
font-family: verdana, sans-serif;
font-size: 11px;
color: #785a3c;
}

ul#tools li {
border-bottom: solid 1px #b9a894;
line-height: 15px;
}

ul#tools ol li {
border-bottom: none;
}

ul#tools ol li:before {
content: "- ";
}

ul#tools a {
text-decoration: none;
outline: none;
}

ul#tools a:hover {
color: #539dbc;
}

ul#tools a.active {
color: #be5028;
}
 
Ranch Hand
Posts: 413
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
it may have something to do that the elements should not really have same ids. try ti use a class attribute instead
 
Angela D'souza
Ranch Hand
Posts: 469
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Originally posted by Yuriy Fuksenko:
it may have something to do that the elements should not really have same ids. try ti use a class attribute instead



i am sorry but where should i use class attribute? Can you give me example?
 
Yuriy Fuksenko
Ranch Hand
Posts: 413
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
instead of <ul id="menu">
use <ul class="menu">

and in CSS definition replace "#" with ".", i.e. ul.menu
 
WHAT is your favorite color? Blue, no yellow, ahhhhhhh! Tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
reply
    Bookmark Topic Watch Topic
  • New Topic