advanced_CSS_5_7-优快云博客

本文介绍了一种使用纯CSS实现的下拉导航菜单的方法，包括样式设置和隐藏显示的技巧，并提供了一个简单的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<html5>
<head>
</head>

<style type="text/css">
/*
Suckerfish drop-downs
*/
/*
As with all the navigation examples in this chapter, you first need to zero down the margin and
padding as well as remove the default bullets. As this is going to be a horizontal navigation, you
then need to give your list items a width and float them all left. For stylistic reasons, I want to give
my navigation lists a border and background color. However, because the enclosed list items are
all floated, they take up no space, forcing the lists to collapse in on themselves. To get around
this problem, I’ve decided to float the lists as well.
*/
ul.nav, ul.nav ul {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
border: 1px solid #486B02;
background-color: #8BD400;
}
ul.nav li {
float: left;
width: 8em;
background-color: #8BD400;
}
/*
To ensure the items in the drop-down menus stack up vertically, you need to set the width of the
list to be the same as the width of the enclosed list items. The drop-down menu is now starting to
take shape.
To hide the actual drop-downs until they are activated, we need to set their position to absolute
and then hide them off the left-hand side of the screen.
*/
ul.nav li ul {
width: 8em;
position: absolute;
left: -999em;
}
/*
Now, this is where the magic happens. By adding a hover pseudo-selector to the parent list item,
we can make the drop-down list reappear by changing its position back to its regular starting
position.
*/
.nav li:hover ul {
left: auto;
}
/*
These last few styles set the navigation links to behave like block-level elements and then change
the appearance of the list, giving the items background colors and beveled borders.
*/
ul.nav a {
display: block;
color: #2B3F00;
text-decoration: none;
padding: 0.3em 1em;
border-right: 1px solid #486B02;
border-left: 1px solid #E4FFD3;
}
ul.nav li li a {
border-top: 1px solid #E4FFD3;
border-bottom: 1px solid #486B02;
border-left: 0;
border-right: 0;
}
/*remove unwanted borders on the end list items*/
ul.nav li:last-child a {
border-right: 0;
border-bottom: 0;
}
ul a:hover,
ul a:focus {
color: #E4FFD3;
background-color: #6DA203;
}
/*And there you have it, a simple drop-down navigation bar that uses pure CSS. This technique
works in most modern browsers but fails in older version of Internet Explorer, which don’t support
the :hover pseudo-class of nonanchor elements. To get around this issue, you can use a few
lines of JavaScript or a .htc behavior file to enable this functionality.
The JavaScript code for the drop-down navigation fix in Internet Explorer is
beyond the scope of this book, but you can find out more details at
http://htmldog.com/articles/suckerfish/dropdowns/.*/
</style>

<body id="home">
<ul class="nav">
<li><a href="/home/">Home</a></li>
<li><a href="/products/">Products</a>
<ul>
<li><a href="/products/silverback/">Silverback</a></li>
<li><a href="/products/fontdeck/">Font Deck</a></li>
</ul>
</li>
<li><a href="/services/">Services</a>
<ul>
<li><a href="/services/design/">Design</a></li>
<li><a href="/services/development/">Development</a></li>
<li><a href="/services/consultancy/">Consultancy</a></li>
</ul>
</li>
<li><a href="/contact/">Contact Us</a></li>
</ul>
</body>
</html5>

转载于:https://my.oschina.net/LosersAFC/blog/213279