在你还没有学习javascript之前,想通过css方式来实现下拉菜单时,阅读本篇文章可能会给你提供一些思路。单纯用CSS而不需JS来实现下拉菜单其实很简单,在这里我只是简单将一下思路。
首先先上一段html结构代码:
<ul>
<li>
菜单一
<ul>
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
</li>
<li>
菜单二
<ul>
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
</li>
<li>
菜单三
<ul>
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
</li>
</ul>
眼尖的你会发现,li标签下还包含着ul列表,没错,其中的ul列表就是下拉菜单。在写css之前,把class补充完整:
<ul class="nav">
<li class="nav-menu">
菜单一
<ul class="nav-child">
<li class="nav-child-item">选项一</li>
<li class="nav-child-item">选项二</li>
<li class="nav-child-item">选项三</li>
</ul>
</li>
<li class="nav-menu">
菜单二
<ul class="nav-child">
<li class="nav-child-item">选项一</li>
<li class="nav-child-item">选项二</li>
<li class="nav-child-item">选项三</li>
</ul>
</li>
<li class="nav-menu">
菜单三
<ul class="nav-child">
<li class="nav-child-item">选项一</li>
<li class="nav-child-item">选项二</li>
<li class="nav-child-item">选项三</li>
</ul>
</li>
</ul>
然后把导航、菜单的样式写好:
ul,li{
margin:0;
padding:0;
list-style: none;
}
.nav{
width:600px;
margin:100px auto;
}
.nav .nav-menu{
width:200px;
float:left;
background-color: blue;
color:white;
padding:10px 0;
font-size: 20px;
text-align: center;
cursor: pointer;
}
.nav .nav-menu .nav-child{
width:200px;
display: none;
}
.nav .nav-menu .nav-child .nav-child-item{
width:200px;
display: block;
padding:10px 0;
}
.nav .nav-menu .nav-child .nav-child-item:first-child{
margin-top:10px;
}
以上样式请根据你的需求来进行修改。接下来最重要最重要的事情要做了,就是实现下拉的css代码,如下:
.nav .nav-menu:hover .nav-child{
display: block;
}
是不是很神奇,你没有看错,就是一句话。请注意其中的:hover,这个是不是很熟悉,之前常用于a:hover来改变鼠标悬停效果,现在可用于用下拉菜单等等东西了。我简单解释一下,当鼠标悬停在类为nav-menu标签li上时,将nav-menu类下的nav-child有none变为block从而显示出来,是不是感觉很绕,其实只要你稍微用点心仔细看一下代码,就很容易理解了。
最后上完整代码(不确保能兼容所有浏览器,有兼容需求请使用js或jq实现下拉菜单):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul,li{
margin:0;
padding:0;
list-style: none;
}
.nav{
width:600px;
margin:100px auto;
}
.nav .nav-menu{
width:200px;
float:left;
background-color: blue;
color:white;
padding:10px 0;
font-size: 20px;
text-align: center;
cursor: pointer;
}
.nav .nav-menu .nav-child{
width:200px;
display: none;
}
.nav .nav-menu .nav-child .nav-child-item{
width:200px;
display: block;
padding:10px 0;
}
.nav .nav-menu .nav-child .nav-child-item:first-child{
margin-top:10px;
}
.nav .nav-menu:hover .nav-child{
display: block;
}
</style>
</head>
<body>
<ul class="nav">
<li class="nav-menu">
菜单一
<ul class="nav-child">
<li class="nav-child-item">选项一</li>
<li class="nav-child-item">选项二</li>
<li class="nav-child-item">选项三</li>
</ul>
</li>
<li class="nav-menu">
菜单二
<ul class="nav-child">
<li class="nav-child-item">选项一</li>
<li class="nav-child-item">选项二</li>
<li class="nav-child-item">选项三</li>
</ul>
</li>
<li class="nav-menu">
菜单三
<ul class="nav-child">
<li class="nav-child-item">选项一</li>
<li class="nav-child-item">选项二</li>
<li class="nav-child-item">选项三</li>
</ul>
</li>
</ul>
</body>
</html>
由于我写好这篇博客的时候已经是凌晨3点,因为睡不着而起床写的这篇文章,所以脑子不是很清醒,表述的东西可能不清不楚令你感到困惑,在此抱歉,如果有问题请留言,我会详细解答。