assistance needed building Horizontal CSS or Javascript menu

ST3VO
ST3VO used Ask the Experts™
on
Hi all,

I have been asked on an existist website to change the top nav button to be a dropdown nav menu.

How could I convert the code below so it's a dropdown menu please?

Hope someone can help.

please see code attached.

thx

st3vo

<table width="780" height="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="75" align="center" valign="middle"><a href="#" class="topmenubar">Home</a></td>
            <td width="2" align="center" valign="middle"><img src="images/divider.gif" width="2" height="57"></td>
            <td width="120" align="center" valign="middle"><a href="#" class="topmenubar">services</a></td>
            <td width="2" align="center" valign="middle"><img src="images/divider.gif" width="2" height="57"></td>
            <td width="108" align="center" valign="middle"><a href="#" class="topmenubar">who we are</a></td>
            <td width="2" align="center" valign="middle"><img src="images/divider.gif" width="2" height="57"></td>
            <td width="104" align="center" valign="middle"><a href="#" class="topmenubar">locations</a></td>
            <td width="2" align="center" valign="middle"><img src="images/divider.gif" width="2" height="57"></td>
            <td width="80" align="center" valign="middle"><a href="#" class="topmenubar">blog</a></td>
            <td width="2" align="center" valign="middle"><img src="images/divider.gif" width="2" height="57"></td>
            <td width="90" align="center" valign="middle"><a href="#" class="topmenubar">News</a></td>
            <td width="2" align="center" valign="middle"><img src="images/divider.gif" width="2" height="57"></td>
            <td width="80" align="center" valign="middle"><a href="#" class="topmenubar">About Us</a></td>
            <td width="2" align="center" valign="middle"><img src="images/divider.gif" width="2" height="57"></td>
            <td width="96" align="center" valign="middle"><a href="#" class="topmenubar">Contact</a></td>
          </tr>
        </table>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
use a spry menu

insert spry menu horizontal from the insert menu

then in your code view you'll see
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
        <ul>
          <li><a href="#">Item 3.1.1</a></li>
          <li><a href="#">Item 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3.2</a></li>
      <li><a href="#">Item 3.3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 4</a></li>
</ul>
<script type="text/javascript">


you see in the first element the drop down has 3 drop dows on its menu and so does element 3
see one of my last designs, http://www.up2youmobiles.co.uk/

<div id="centre">
    <div id="menu">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="index.html">Home</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
        <li><a href="phonerepair.html">Phone Repair</a></li>
        <li><a href="phoneunlock.html">Phone Unlock</a></li>
      </ul>
    </div>

Author

Commented:
So, how do I add that code to my code attached?  

Author

Commented:
I need to add menus to the code I already have attached. How can I do this please, it's very urgent :o(
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Bought a DW plugin from WebAssist.

Author

Commented:
thanks

Commented:
you didn't need to buy a plugin
you needed to insert a spry menu (horizontal)
and then copy all your elements into the menu elements so
div id="centre">
    <div id="menu">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="index.html">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="whoweare.html">Who we are</a></li>
        <li><a href="locations.html">Locations</a></li>
        <li><a href="blogs.html">Blogs</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="aboutus.html">About Us</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>

thats not hard is it

Commented:
oh and keep you class as well

so it will be
<li><a href="locations.html">Locations</a> class="topmenu" </li>
and probably keep the images as well

What plugin was it anyway

Author

Commented:
A DW plugin from WebAssist but now turned out to come with IE issues and I've paid $99 for it and it's going to the bin :o(

Never mind

Commented:
so follow my earlier comment about how to do a spry menu for your needs

Author

Commented:
I need a fool proof menu with can use hover images which nas no IE issues

Author

Commented:
Done.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial