纯html+css制作下拉菜单

最新推荐文章于 2024-03-27 14:34:45 发布

佰草

最新推荐文章于 2024-03-27 14:34:45 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/weixin_44007570/article/details/108025340

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航栏 </title>
<style type="text/css">
/* common styling */
/* set up the overall width of the menu div, the font and the margins
建立菜单的div的宽度，字体和边距 */
.menu {
font-family: 黑体, 宋体; 
width:950px; 
margin:0; 
margin:50px 0;
}
/* remove the bullets and set the margin and padding to zero for the unordered list 
取出子弹，并设置为无序列表的margin和padding为零*/
.menu ul {
padding:0; 
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item 
将该清单浮动，以便该项目处于一个直线及其位置，以便将下拉列表显示在每个列表项下面的正确位置上*/
.menu ul li {
float:left; 
position:relative;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size.风格是104px宽30高一上和右边框的链接。设置背景颜色和字体大小。 */
.menu ul li a, .menu ul li a:visited {
display:block; 
text-align:center; 
text-decoration:none; 
width:104px; 
height:30px; 
color:#000; 
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7; 
line-height:30px; 
font-size:11px;
}
/* make the dropdown ul invisible 使下拉菜单隐形 */
.menu ul li ul {
display: none;
}
/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#fff; 
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item 使子菜单 ul在主菜单位置可见*/
.menu ul li:hover ul {
display:block; 
position:absolute; 
top:31px; 
left:0; 
width:105px;
}
/* style the background and foreground color of the submenu links
风格的子菜单链接的背景和前景颜色 */
.menu ul li:hover ul li a {
display:block; 
background:#faeec7; 
color:#000;
}
/* style the background and forground colors of the links on hover
风格的背景和前景颜色的链接悬停 */
.menu ul li:hover ul li a:hover {
background:#dfc184; 
color:#000;
}
.clear{clear:both;}
</style>
 
</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="#">第一栏</a>
    <ul>
    <li><a href="#" title="The zero dollar ads page">第一项</a></li>
    <li><a href="#" title="Wrapping text around images">第二项</a></li>
    </ul>
</li>
<li><a class="hide" href="#">第二栏</a>
    <ul>
    <li><a href="#" title="a coded list of spies">spies menu</a></li>
    <li><a href="#" title="a horizontal vertical menu">vertical menu</a></li>
    <li><a href="#" title="circular links">circular links</a></li>
    </ul>
</li>
<li><a class="hide" href="#">第三栏</a>
    <ul>
    <li><a href="#" title="Cross browser fixed layout">Fixed 1</a></li>
    <li><a href="#" title="Cross browser fixed layout">Fixed 2</a></li>
    <li><a href="#" title="Cross browser fixed layout">Fixed 3</a></li>
    </ul>
 
</li>
<li><a class="hide" href="#">第四栏</a>
    <ul>
    <li><a href="#" title="a coded list of spies">spies menu</a></li>
    <li><a href="#" title="a horizontal vertical menu">vertical menu</a></li>
    </ul>
</li>
<li><a class="hide" href="#">第五栏</a>
    <ul>
    <li><a href="#" title="A drop down menu">drop down menu</a></li>
    <li><a href="#" title="Two tone headings">two tone headings</a></li>
    <li><a href="#" title="Shadow text">shadow text</a></li>
    </ul>
</li>
</ul>
<div class="clear"> </div>
</div>
</body>
</html>