This week's giveaway is in the Android forum.
We're giving away four copies of Android Security Essentials Live Lessons and have Godfrey Nolan on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes CSS navigation Menu Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "CSS navigation Menu" Watch "CSS navigation Menu" New topic
Author

CSS navigation Menu

Angela D'souza
Ranch Hand

Joined: Jan 16, 2002
Posts: 469
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;
}
Yuriy Fuksenko
Ranch Hand

Joined: Feb 02, 2001
Posts: 413
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

Joined: Jan 16, 2002
Posts: 469
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

Joined: Feb 02, 2001
Posts: 413
instead of <ul id="menu">
use <ul class="menu">

and in CSS definition replace "#" with ".", i.e. ul.menu
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: CSS navigation Menu
 
Similar Threads
problem incrementing loop in jstl
CSS menu bug in IE6 - select drop down appears on top of menu
Page displaying in IE6 and older versions but not in Higher versions, chrome and firefox also.
Absolute Position in IE
Problem with struts-menu for second level submenu