ansaurus

Question

Answer 1

A:

Sounds like you're looking for some simple CSS-based dropdowns - I recommend what's called a "Suckerfish" style dropdown. This link uses several items for a horizontal menu, but it can easily be adapted to one link.

http://htmldog.com/articles/suckerfish/dropdowns/

derekerdmann 2010-07-11 20:06:47

Answer 2

A:

Here's a very basic example of what you're trying to achieve. It's actually not a button, but a styled list. Since you're new to HTML, I'll post the entire code, so that you can copy and paste it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <head>
    <title>Simple drop down</title>

    <style type="text/css">
      #button {  /* Box in the button */
        display: block;
        width: 190px;
      }

      #button a {
        text-decoration: none;  /* Remove the underline from the links. */
      }

      #button ul {
        list-style-type: none;  /* Remove the bullets from the list */
      }

      #button .top {
        background-color: #DDD;  /* The button background */
      }

      #button ul li.item {
        display: none;  /* By default, do not display the items (which contains the links) */
      }  

      #button ul:hover .item {  /* When the user hovers over the button (or any of the links) */
        display: block;
        border: 1px solid black;
        background-color: #EDC;
      }
    </style>
  </head>
  <body>
    <div id="button">
      <ul>
        <li class="top">OtherOverflow Sites</li>
        <li class="item"><a href="http://serverfault.com/"&gt;Visit serverfault</a></li>
        <li class="item"><a href="http://superuser.com/"&gt;Visit superuser</a></li>
        <li class="item"><a href="http://doctype.com/"&gt;Visit doctype</a></li>
      </ul>
    </div>
  </body>
</html>

Gert G 2010-07-11 20:35:14

ansaurus

tags:

views:

answers:

creating button drop down in html?

related questions