HTML5-网页标栏的下拉菜单
/*
*Copyright (c) 2017，烟台大学计算机学院
All rights reserved.
*文件名称：关于HTML的练习
*作 者：张晴晴
*完成日期：201711月5日
*版 本 号：v1.0 *
*问题描述：HTML5的新特性
*输入描述： 无
*程序输出： 无
*/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页横栏-下拉列表</title>
<style>
body{
font-size:16px;
font-family:"仿宋";/*body里面设置字体*/
}
#nav{
line-height:40px;
list-style-type:none;
padding:0px;
width:100%;
}
#nav ul{
line-height:40px;
position:absolute;
left:-100000px;
padding:0px;/*定义元素边框和元素内容之间的距离*/
}
#nav li{
float:left;
/*display:inline;*//*使之在一行上显示*/
background-color:red;
width:100px;
}
#nav a{
padding:10px 30px;/*一层网络连接的相对位置*/
color:yellow;/*链接本来的颜色*/
text-decoration:none;
}
#nav a:hover{/*hover设置鼠标移动到a上面时的样式*/
color:white;/*鼠标指向链接显示的颜色*/
background-color:blue;/*鼠标指示背景显示颜色*/
list-style-type:none;
}
#nav li:hover ul{/*指定下拉列表出现的位置*/
left:auto; /*left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。*/
} #nav ul li{/*下拉子菜单中所有内容*/
background-color:green;
list-style-type:none;
clear:left;/*规定哪一侧不允许浮动元素*/
}
#nav ul a{/*二层下拉列表中的样式*/
text-decoration:none;
padding:5px;
color:black;}/*链接本来的颜色*/
</style>
</head><body><ul id="nav">
<li><a href="">c++</a>
<ul>
<li><a href="">子菜单1-1</a></li>
<li><a href="">子菜单1-2</a></li>
<li><a href="">子菜单1-3</a></li>
<li><a href="">子菜单1-4</a></li>
</ul>
</li> <li> <a href="">java</a>
<ul>
<li><a href="">子菜单1-1</a></li>
<li><a href="">子菜单1-2</a></li>
<li><a href="">子菜单1-3</a></li>
<li><a href="">子菜单1-4</a></li>
</ul>
</li>
<li> <a href="">c</a>
<ul>
<li><a href="">子菜单1-1</a></li>
<li><a href="">子菜单1-2</a></li>
<li><a href="">子菜单1-3</a></li>
<li><a href="">子菜单1-4</a></li>
</ul>
</li>
<li> <a href="">c#</a>
<ul>
<li><a href="">子菜单1-1</a></li>
<li><a href="">子菜单1-2</a></li>
<li><a href="">子菜单1-3</a></li>
<li><a href="">子菜单1-4</a></li>
</ul>
</li>
<li> <a href="">html</a>
<ul>
<li><a href="">子菜单1-1</a></li>
<li><a href="">子菜单1-2</a></li>
<li><a href="">子菜单1-3</a></li>
<li><a href="">子菜单1-4</a></li>
</ul>
</li>
<li><a href="">ar</a>
<ul>
<li><a href="">子菜单1-1</a></li>
<li><a href="">子菜单1-2</a></li>
<li><a href="">子菜单1-3</a></li>
<li><a href="">子菜单1-4</a></li>
</ul>
</li>
</ul>
</body>
</html>
运行结果：
