html中怎么设置成图中那样的菜单_随笔

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<!--

* { margin:0 padding:0 list-style:none border:none}

div { margin:0 auto}

#Menu { width:600px overflow:hidden font-family:"微软雅黑" font-size:18px line-height:24px}

#Menu li { float:left width:100px height:50px overflow:hidden overflow:hidden text-align:center}

#Menu li p { font-size:12px color:#333}

#Menu li a { margin:0 auto width:80px display:block height:48px overflow:hidden}

#Menu li a:link,#Menu li a:visited { color:#666 text-decoration:none}

#Menu li a:hover { border-bottom:2px solid #00F}

#Menu li a.act { border-bottom:2px solid #00F}

-->

</style>

</head>

<body>

<ul>

<li><a href="#">关于<p>ABOUT</p></a></li>

<li><a href="#">服务<p>SERVIC</p></a></li>

<li><a href="#">招聘<p>CAREER</p></a></li>

</ul>

</div>

</body>

</html>涂鸦之作，希望能帮上你的忙，望采纳

首先需要打开自己电脑上的DW软件，新建一个html页面，然后将其保存在桌面上。

接下来我们需要在body里面添加DIV标签，并在其内使用ul无序列表和li标签制作一个一级菜单栏，代码和浏览器的效果如下面两张图片所示。

因为菜单栏一般都是有链接的，我们就需要为每个li标签添加一个a标签，并增加适当的样式。使得鼠标移到链接上面时有明显的颜色变化。

截止到上一步我们的一级菜单栏已经制作完成，接下来我们需要制作二级菜单栏。我们在有二级菜单栏的一级菜单栏的li标签下面添加ul再添加li标签就可以制作二级菜单了。

关于二级菜单的代码以及css样式，和在浏览器中的显示效果如下图所示。

大家可以看到，这是静态的二级菜单，二级菜单会一直在网页当中显示，那么我们应该怎样让其先隐藏然后鼠标滑过一级菜单后再显示呢？

其实，这只需要我们为二级菜单的ul标签设置display的none和block两个属性就可以。默认情况下设置二级ul的display属性为none；鼠标滑过时dispaly属性为block。

这样一个二级菜单就制作完成了，想让其他的一级菜单下面也有二级菜单显示，我们只需要复制相应的代码就可以了。

制作下拉菜单有2种方法：

使用jquery方法实现；实现方法：首先需要引入jquery的版本，引用toggle()的方法，点击当前的一级导航。用this方法来进行当前包含的二级菜单隐藏与显示。

<!DOCTYPE html>

<html>

<head>

</head>

<style>

*{margin: 0 padding: 0}

ul,li{list-style: none}

a{text-decoration: none}

.menu{width: 1000px margin: 0 auto}

.menu li{float: leftwidth: 100pxline-height: 40px text-align: center}

.menu li a{display: block color:redfont-size: 18px}

.menu-two{display: nonewidth: 100px}

.menu li .menu-two a{font-size: 14pxcolor:#0000FF}

</style>

<body>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</body>

$(function(){

$(".menu > li a").toggle(

function(e){

$(this).siblings().show()//对当前的.menu>li a的兄弟节点menu-two进行显示

e.preventDefault()//阻止冒泡事件.

},function(e){

$(this).siblings().hide()对当前的.menu>li a的兄弟节点menu-two进行隐藏

e.preventDefault()

}

)

})

</script>

</html>

2.使用css的伪类样式hover实现，html结构上面的一样，只需要把二级菜单进行隐藏(display:none)然后在用hover方式，鼠标移上去让当前隐藏的（.menu-tow）进行（display:block）显示，纯css的方式：

<style>

*{margin: 0 padding: 0}

ul,li{list-style: none}

a{text-decoration: none}

.menu{width: 1000px margin: 0 auto}

.menu li{float: leftwidth: 100pxline-height: 40px text-align: center}

.menu li a{display: block color:redfont-size: 18px}

.menu-two{display: nonewidth: 100px}/***隐藏当前的二级菜单***/

.menu li .menu-two a{font-size: 14pxcolor:#000}

.menu li:hover .menu-two{display: block}/**鼠标的hover伪类事件对.menu-tow进行显示**/

</style>

3.2种方式都可以实现想要的下拉菜单效果，jquery的实现方式与纯css的实现方式均可以，如果需要有个缓动的动画效果，可以在当前的jquery方式下进行修改，纯css的实现需要用css3的属性来实现。都是很酷炫的（PS：css3的效果只支持ie9及以上）。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/7684998.html

html中怎么设置成图中那样的菜单

发表评论

评论列表（0条）