Win a copy of Mastering Corda: Blockchain for Java Developers this week in the Cloud/Virtualization 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 all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Bear Bibeault
  • Liutauras Vilda
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Junilu Lacar
Saloon Keepers:
  • Tim Moores
  • Tim Holloway
  • Stephan van Hulst
  • Jj Roberts
  • Carey Brown
Bartenders:
  • salvin francis
  • Frits Walraven
  • Piet Souris

CSS navigation Menu

 
Ranch Hand
Posts: 469
  • Mark post as helpful
  • send pies
  • 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
  • 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
  • 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
  • Quote
  • Report post to moderator
instead of <ul id="menu">
use <ul class="menu">

and in CSS definition replace "#" with ".", i.e. ul.menu
 
It was the best of times. It was the worst of times. It was a tiny ad.
the value of filler advertising in 2020
https://coderanch.com/t/730886/filler-advertising
reply
    Bookmark Topic Watch Topic
  • New Topic