Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorianisth
    • CommentTimeJan 25th 2010
     permalink
    I have made my own buttons in photoshop but i'd also like a drop down menu for the buttons dose anybody know how i'd go about creating a drop down menu?
  1.  permalink
    You need to use <ul> and <li> commands to create the dropdown.
    <ul> to open the menu </ul> to close.
    In the middle you open an <li> tag, add the menu names but unlike standard menu's, do not close the <li> until you get to the end of the dropdown menu item. Here is an example from one of our sites:

    <ul>
    <li><a href="#">TV / Audio</a>

    <ul>
    <li><a href="tvs/televisions.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Televisions</a></li>
    <li><a href="audio-hifi/players-radios.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Audio & Hifi</a></li>
    <li><a href="tvs/televisions.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2#dvdplayers">DVD Recorders</a></li>
    <li><a href="audio-hifi/players-radios.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2#homecinemas">Home Cinemas</a></li>
    <li><a href="tvs/televisions.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2#stands">TV Stands</a></li>
    </ul>

    </li>
    </ul>

    <ul>
    <li><a href="#">Home Appliances</a>
    <ul>
    <li><a href="washers-dryers/washerdryer.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2#washingmachines">Washing Machines</a></li>
    <li><a href="washers-dryers/washerdryer.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2#tumbledryers">Tumble Dryers</a></li>

    <li><a href="washers-dryers/washerdryer.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2#dishwashers">Dishwashers</a></li>
    <li><a href="fridges-freezers/fridgefreezer.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2#fridges">Fridges</a></li>
    <li><a href="fridges-freezers/fridgefreezer.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2#freezers">Freezers</a></li>
    <li><a href="fridges-freezers/fridgefreezer.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2#fridgefreezers">Fridge-Freezers</a></li>
    <li><a href="vacuum-cleaners/vacuums.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Vacuum Cleaners</a></li>
    <li><a href="cookers-microwaves/ovens.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Cookers</a></li>

    <li><a href="cookers-microwaves/ovens.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2#microwaves">Microwaves</a></li>

    </ul>
    </li>
    </ul>
    You can obviously attach a class to the menu with the CSS having your background so that it is styled as you would wish.

    Hope that helps.
    • CommentAuthorBlackHawk
    • CommentTimeFeb 1st 2010
     permalink
    Hi

    but this drop down menu not help in IE6 and IE7. Its not work in IE6 and IE7. What is the solution? Hope will get the solution early.

    Thanks
Add your comments
    Username Password
  • Format comments as (Help)