creating button drop down in html?_问答_开发者

开发者 https://www.devze.com 2023-01-07 05:36 出处：网络

I am new to web programming. I want to create buttons in html and when you hover over it, it shows a drop down of options for pages you want to go to.

相关专题：

I am new to web programming. I want to create buttons in html and when you hover over it, it shows a drop down of options for pages you want to go to.

Any help is开发者_运维百科 appreciated. Thanks!

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:

#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;
}

<body>
  <div id="button">
    <ul>
      <li class="top">OtherOverflow Sites</li>
      <li class="item"><a href="http://serverfault.com/">Visit serverfault</a></li>
      <li class="item"><a href="http://superuser.com/">Visit superuser</a></li>
      <li class="item"><a href="http://doctype.com/">Visit doctype</a></li>
    </ul>
  </div>
</body>

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/