add sub menu items to css menu?

[Inny]

I will be using this one. I want to add sub items to each category(button) how do I do it but maintain the style?

<style>
#message div.menuBar2,
#message div.menuBar2 a.menuButton {
  font-family: Verdana, Arial, sans-serif;
  font-size: 8pt;
  color: #000000;
}

#message div.menuBar2 {
  background-image: url(http://i14.photobucket.com/albums/a345/Instar/escher_background.gif); 

  padding: 6px 2px 6px 2px;
  text-align: center;
  margin-left:20px;
}

#message div.menuBar2 a.menuButton {
  background-color: transparent;
  border: 1px solid;
  border-color: #f0f0f0 #909090 #909090 #f0f0f0;
  color: #000000;
  cursor: pointer;
  left: 0px;
  margin: 1px;
  padding: 2px 6px 2px 6px;
  xposition: relative;
  text-decoration: none;
  top: 0px;
  z-index: 100;
}

#message div.menuBar a.menuButton:hover {
  background-color: transparent;
  border-color: #909090 #f0f0f0 #f0f0f0 #909090;
  color: #000000;
}
</style>




<center><table><tr><td>
<DIV id="message"><div class="menuBar2">
<a class="menuButton" href="http://herproom.5.forumer.com/index.php?act=home">Home</a>

<a class="menuButton" href="{ibf.script_url}act=Search&CODE=getnew">New Posts</a>
<a class="menuButton" href="{ibf.script_url}act=UserCP&CODE=01">Profile</a>
<a class="menuButton" href="{ibf.script_url}act=UserCP&CODE=04">Settings</a>
<a class="menuButton" href="JavaScript:full()">FullScreen</a>
<a class="menuButton" href="http://herproom.5.forumer.com/index.php?act=ST&f=31&t=1873&st=0#entry6049">Link Us</a>
<a class="menuButton" href="http://herproom.5.forumer.com/index.php?act=ST&f=18&t=932">About Us</a>

</div></div>
</td></tr></table></center>

If you are talking about drop down menu refer to this link....you may alter and get what you want

http://www.daniweb.com/tutorials/tutorial55309.html

[Inny]

Thanks But I dont want to use List tag, I want the drop down menu for each menu link shown above in the same style. Only appears on mouseover. no bullets etc

But why you dont want to use list...it would be better cause it wil be easy to organise it...and yes bullets wont be displayed. And if you dont want to take headache of altering this one, then you see it wont take time. Styles are styles afterall could be reused.

[Inny]

Under each of those menu choices above, I want a dropdown of sub menu items, directly under its parent and only on mouseover, with the same style.

I tried adding <ul> and <li> but sub items appearred below (visible without mouseover) and with ugly black bullets. I want the thing to look neat like the one above.

I will be altering targets of parent items to url of my forums categorys and sub items will be urls of forums within those categorys.

The whole thing should appear as the one above does excepting it will be wider horizontally ofcourse.

[Inny]

see below <ul> <li> example destroys the style

http://www.jmarshall.com/easy/html/testbed.html

<style>
#message div.menuBar2,
#message div.menuBar2 a.menuButton {
  font-family: Verdana, Arial, sans-serif;
  font-size: 8pt;
  color: #000000;
}

#message div.menuBar2 {
  background-image: url(http://i14.photobucket.com/albums/a345/Instar/escher_background.gif); 

  padding: 6px 2px 6px 2px;
  text-align: center;
  margin-left:20px;
}

#message div.menuBar2 a.menuButton {
  background-color: transparent;
  border: 1px solid;
  border-color: #f0f0f0 #909090 #909090 #f0f0f0;
  color: #000000;
  cursor: pointer;
  left: 0px;
  margin: 1px;
  padding: 2px 6px 2px 6px;
  xposition: relative;
  text-decoration: none;
  top: 0px;
  z-index: 100;
}

#message div.menuBar a.menuButton:hover {
  background-color: transparent;
  border-color: #909090 #f0f0f0 #f0f0f0 #909090;
  color: #000000;
}
</style>




<center><table><tr><td>
<DIV id="message"><div class="menuBar2">
<ul id="message"><li>
<a class="menuButton" href="http://herproom.5.forumer.com/index.php?act=home">Home</a><ul>
<li><a href="#">qrayg</a></li>
<li><a href="#">qArcade</a></li>
          <li><a href="#">qLoM</a></li>
          <li><a href="#">qDT</a></li>
        </ul>
      </li>

<a class="menuButton" href="{ibf.script_url}act=Search&CODE=getnew">New Posts</a>
<a class="menuButton" href="{ibf.script_url}act=UserCP&CODE=01">Profile</a>
<a class="menuButton" href="{ibf.script_url}act=UserCP&CODE=04">Settings</a>
<a class="menuButton" href="javascript:full()">FullScreen</a>
<a class="menuButton" href="http://herproom.5.forumer.com/index.php?act=ST&f=31&t=1873&st=0#entry6049">Link Us</a>
<a class="menuButton" href="http://herproom.5.forumer.com/index.php?act=ST&f=18&t=932">About Us</a>

</div></div>
</td></tr></table></center>

For that you will have to alter a bit of styles. Try it yourself and post what you dont get, afterall practice make a man perfect.

[Inny]

If I asked you to try to design an elaborate building where would you start if you were not an architect?
I understand your intention of encouragement mate, but its like me handing you a screwdriver and saying try to make a rocket!
please just give me an idea/example if how to add style for <ul> <li> tags if thats what you say I need.

I did try to add the same styling for #UL and #LI as for menuBar but it did not work.

[MidiMagic]

.listbuster {list-style: none;}
.....

<ul class="listbuster">
 <li>thing 1</li>
 <li>thing 2</li>
</ul>

gets rid of the bullets.

[Inny]

Thanks that gets rid of bullets but the submenu is still visible. do I put submenu style:none or something?

Do that using JavaScript.