使用HTML设计网页
html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="header">
<div class="menu">
<ul class="first">
<li class="first">
<a href="#" class="current">首页</a>
</li>
<li class="first">
<a href="#">产品中心</a>
<div>
<ul class="second">
<li class="second"><a href="#">企业版</a></li>
<li class="second"><a href="#">工作流</a></li>
<li class="second"><a href="#">移动应用</a></li>
<li class="second"><a href="#">云服务</a></li>
</ul>
</div>
</li>
<li class="first">
<a href="#">案例中心</a>
<div>
<ul class="second">
<li class="second"><a href="#">人工智能</a></li>
<li class="second"><a href="#">互联网</a></li>
<li class="second"><a href="#">移动支付</a></li>
<li class="second"><a href="#">金融证券</a></li>
<li class="second"><a href="#">医疗保险</a></li>
</ul>
</div>
</li>
<li class="first">
<a href="#">服务支持</a>
<div>
<ul class="second">
<li class="second"><a href="#">服务流程</a></li>
<li class="second"><a href="#">服务内容</a></li>
<li class="second"><a href="#">服务宗旨</a></li>
</ul>
</div>
</li>
<li class="first">
<a href="#">关于我们</a>
<div>
<ul class="second">
<li class="second"><a href="#">公司介绍</a></li>
<li class="second"><a href="#">公司荣誉</a></li>
<li class="second"><a href="#">新闻中心</a></li>
<li class="second"><a href="#">招纳贤士</a></li>
<li class="second"><a href="#">联系我们</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="slide-container">
<div class="slide">
<img src="img/20180907001.jpg" height="100%" width="100%"/>
<div>
</div>
</body>
</html>
使用浏览器浏览该网页
没有进行CSS样式处理的效果：
menu0908_01.gif
给菜单设置样式
一级菜单的CSS样式代码如下：
li.first{
display:inline-block;
width:19.5%;
text-align:center;
height:80px;
line-height:80px;
border:1px solid red;
}
二级菜单层使用绝对定位，默认隐藏不显示。CSS代码如下：
li div{
display:none;
background:url(img/menubg.png) repeat;
height: 56px;
line-height: 52px;
left: 0;
position: absolute;
top: 90px;
width: 100%;
text-align: center;
}
当鼠标移至一级菜单上方时，菜单背景色变为橙色，字体颜色变为白色，并且显示对应的二级菜单层。CSS代码如下：
li.first:hover{
background-color:#e95a1a;
}
li.first:hover > a{
color:#fff;
}
li.first:hover div{
display:block;
}
二级菜单（子菜单）的CSS样式代码如下：
li.second{
display:inline-block;
text-align:center;
margin-right:2px;
border:1px solid red;
}
CSS完整代码如下：
<style>
.menu{
height:80px;
margin-bottom:3px;
}
a{
text-decoration:none;
font-size:20px;
color:black;
}
a.current{
color:#fff;
}
ul.first{
list-style-type:none;
margin-top:0;
padding-left:0;
height:80px;
}
ul.second{
list-style-type:none;
margin-top:0;
padding-left:0;
}
li.first{
display:inline-block;
width:19.5%;
text-align:center;
height:80px;
line-height:80px;
border:1px solid red;
}
li.first:nth-child(1){
background-color:#e95a1a;
}
li.first:hover div{
display:block;
}
li.first:hover > a{
color:#fff;
}
li.first:hover{
background-color:#e95a1a;
}
li.second{
display:inline-block;
text-align:center;
margin-right:2px;
border:1px solid red;
}
li.second a{
padding:0 55px;
}
li.second a:hover{
color:#e95a1a;
}
li div{
display:none;
background:url(img/menubg.png) repeat;
height: 56px;
line-height: 52px;
left: 0;
position: absolute;
top: 90px;
width: 100%;
text-align: center;
}
</style>
再次浏览该页面
引入CSS样式处理代码之后的效果：
menu0908_02.gif
image.png
网友评论