creating button drop down in html?
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/
加载中,请稍侯......
精彩评论