资源描述
基本功能实现图：
开始之前：
Html body内 关于导航菜单的基本格式
<body>
<div 此标签可自定义>
<ul id = “ass”>
<li><a href = “#”>aaaa</a>
//内部镶嵌的ul标签
<ul>
//二级菜单列表
<li><a href = “#”>1111</a></li>
<li><a href = “#”>2222</a></li>
<li><a href = “#”>3333</a></li>
</ul>
</li>
<li><a href = “#”>bbbb</a>
//内部镶嵌的ul标签
<ul>
//二级菜单列表
<li><a href = “#”>1111</a></li>
<li><a href = “#”>2222</a></li>
<li><a href = “#”>3333</a></li>
</ul>
</li>
//重复部分
…………
</ul>
<div>
</body>
开始编辑 css 二级导航菜单部分的代码：
第一步：
此div标签内部所有 ul 标签样式设置，主要如下
#ass ,#ass ul {
padding: 0; //内边炬设置为0
margin: 0; //外边炬设置为0
list-style: none; //无列表样式
}
第二步：此div标签内部所有 li 标签样式设置，主要如下
#ass li｛
float: left; //左边浮动，实现水平菜单栏，如需竖直菜单栏则设置浮动为none
position: relative; //规定元素定位类型，相对的
margin-right: 1em; //右外边距 导航栏的1%
+ ….. //此处加其他美化修饰语言
｝
第三步：此div标签内部所有a:link、a:visited、a:hover样式设置，主要如下：
#ass a:link, #nav a:visited {
display: block; //规定生成框类型，成块呈现
padding-left: 1em; //左内边距，1%
+…….. //此处加其他美化修饰语言
}
#ass a:hover{
Background-color:red; //鼠标悬停改变背景颜色
}
第四步：内部镶嵌的ul标签的隐藏，主要如下：
#nav ul {
display: none; //规定生成框类型，无
position: absolute; //规定元素定位类型： 绝对
padding-top: 0.5em; //顶部内边距， 0.5%
}
第五步：内部镶嵌的li标签的处理，主要如下：
#nav ul li {
float: none; //浮动类型，无
margin: 0; //外边炬设置为0
padding: 0; //内边炬设置为0
+…….. //此处加其他美化修饰语言
}
第六步：内部镶嵌的ul标签的鼠标悬停触发，主要如下：
#ass li:hover ul {
display: block; //规定生成框类型，成块呈现
}
下面是一个完整的实例：
<!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>
<title>CSS Flyout menus-</title>
<style>
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav li {
float: left;
position: relative;
width: 10em;
border: 1px solid #B0C4DE;
background-color: #E7EDF5;
color: #2D486C;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-right: 1em;
}
#nav a:link, #nav a:visited {
display: block;
text-decoration: none;
padding-left: 1em;
color: #2D486C;
}
#nav ul {
display: none;
position: absolute;
padding-top: 0.5em;
}
#nav ul li {
float: none;
border: 0 none transparent;
border-bottom: 1px solid #E7EDF5;
background-color: #F1F5F9;
font-size: 100%;
margin: 0;
margin-bottom: 0.5em;
padding: 0;
}
#nav li:hover ul {
display: block;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Starters</a>
<ul>
<li><a href="#">Fish</a></li>
<li><a href="#">Fruit</a></li>
<li><a href="#">Soups</a></li>
</ul>
</li>
<li><a href="#">Main courses</a>
<ul>
<li><a href="#">Meat</a></li>
<li><a href="#">Fish</a></li>
<li><a href="#">Vegetarian</a></li>
</ul>
</li>
<li><a href="#">Desserts</a>
<ul>
<li><a href="#">Fruit</a></li>
<li><a href="#">Puddings</a></li>
<li><a href="#">Ice Creams</a></li>
</ul>
</li>
</ul>
</body>
</html>
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
