JavaScript Flyout Menu CSS Stylesheet

Discussion in 'JavaScript' started by Fix Johnson, Mar 31, 2008.

  1. #1
    This is the type of menu I would like to have on my site. I dont have know how to create a stylesheet to make this run...is there any programs out there that will allow me to create my own fly out menu, similar to one below?

    Regards

    Roger

    <!-- Start Navigation -->
    <div id="sidebar">
    <h2 class="accessibility">Navigation</h2>
    <div id="menuwrapper">
    <ul id="primary-nav">
    <li class="menuactive"><a class="menuactive"
    href="home.htm" ><dfn>1: </dfn>Home</a> </li>
    <li class="menuparent"><a class="menuparent"
    ><dfn>2: </dfn>About Us</a>
    <ul>
    <li><a
    href="about-us.htm" ><dfn>2.1: </dfn>About The Company</a> </li>
    <li><a
    href="areas-served.htm" ><dfn>2.2: </dfn>Areas We Serve</a> </li>
    <li><a
    href="service-bilingue.htm" ><dfn>2.3: </dfn>Fair Pricing Policy</a> </li>
    <li><a
    href="f-a-q-s.htm" ><dfn>2.4: </dfn>Frequently Asked Questions</a> </li>
    <li><a
    href="my-promise.htm" ><dfn>2.5: </dfn>Expect The Best</a> </li>
    <li><a
    href="standards.htm" ><dfn>2.6: </dfn>Standards of Practice</a> </li>
    <li><a
    href="what-i-inspect.htm" ><dfn>2.7: </dfn>What&#39;s Inspected</a> </li>
    </ul>
    </li>
    <li class="menuparent"><a class="menuparent"
    ><dfn>3: </dfn>Homeowners</a>
    <ul>
    <li><a
    href="air-quality.htm" ><dfn>3.1: </dfn>Air Quality</a> </li>
    <li><a
    href="conserve-energy.htm" ><dfn>3.3: </dfn>Conserve Energy</a> </li>
    <li><a
    href="home-insurance-tips.htm" ><dfn>3.6: </dfn>Home Insurance Tips</a> </li>
    <li><a
    href="lead.htm" ><dfn>3.7: </dfn>Lead</a> </li>
    <li><a
    href="maintenance-tips.htm" ><dfn>3.8: </dfn>Maintenance Tips</a> </li>
    <li><a
    href="mold.htm" ><dfn>3.9: </dfn>Mould Information</a> </li>
    <li><a
    href="mold-and-moisture.htm" ><dfn>3.10: </dfn>Mould and Moisture</a> </li>
    <li><a
    href="plumbing.htm" ><dfn>3.11: </dfn>Plumbing</a> </li>
    <li><a
    href="private-wells.htm" ><dfn>3.12: </dfn>Private Wells</a> </li>
    <li><a
    href="roofing.htm" ><dfn>3.14: </dfn>Roofing</a> </li>
    <li><a
    href="septic-systems.htm" ><dfn>3.15: </dfn>Septic Systems</a> </li>
    </ul>
    </li>
    <li class="menuparent"><a class="menuparent"
    ><dfn>4: </dfn>Home Buyers</a>
    <ul>
    <li><a
    href="closing-process.htm" ><dfn>4.1: </dfn>Closing Process</a> </li>
    <li><a
    href="what-really-matters.htm" ><dfn>4.3: </dfn>What Really Matters</a> </li>
    <li><a
    href="3-deadly-mistakes.htm" ><dfn>4.4: </dfn>3 Mistakes</a> </li>
    </ul>
    </li>
    <li class="menuparent"><a class="menuparent"
    ><dfn>5: </dfn>Home Sellers</a>
    <ul>
    <li><a
    href="pre-listing-inspections.htm" ><dfn>5.1: </dfn>Pre-listing Inspections</a>
    </li>
    <li><a
    href="ten-tips.htm" ><dfn>5.2: </dfn>Tips For A Trouble Free Inspection</a> </li>
    </ul>
    </li>
    <li class="menuparent"><a class="menuparent"
    ><dfn>6: </dfn>Home Safety</a>
    <ul>
    <li><a
    href="child-safety.htm" ><dfn>6.1: </dfn>Child Safety</a> </li>
    <li><a
    href="electrical-safety.htm" ><dfn>6.2: </dfn>Electrical Safety</a> </li>
    <li><a
    href="holiday-safety.htm" ><dfn>6.3: </dfn>Safety Tips For the Holidays</a> </li>
    <li><a
    href="wildlife-control.htm" ><dfn>6.6: </dfn>Wildlife Control</a> </li>
    <li><a
    href="things-to-look-for.htm" ><dfn>6.7: </dfn>Things To Look For</a> </li>
    <li><a
    href="asbestos.htm" ><dfn>6.8: </dfn>Asbestos</a> </li>
    </ul>
    </li>
    <li class="menuparent"><a class="menuparent"
    ><dfn>7: </dfn>Home Building</a>
    <ul>
    <li><a
    href="ww.htm" ><dfn>7.1: </dfn>Building Your Home</a> </li>
    <li><a
    href="energy-efficiency.htm" ><dfn>7.2: </dfn>Energy Efficient Homes</a> </li>
    </ul>
    </li>
    <li class="menuparent"><a class="menuparent"

    ><dfn>8: </dfn>Contact</a>
    <ul>
    <li><a
    href="contact.htm" ><dfn>9.1: </dfn>Contact Information</a> </li>
    <li><a
    href="contact-form.htm" ><dfn>9.2: </dfn>Contact Form</a> </li>
    </ul>
    </li>
    </ul>
    <div class="clearb"></div>
    </div>

    <hr class="accessibility" />
     
    Fix Johnson, Mar 31, 2008 IP