二级导航菜单使用方法以及常见问题

二级导航菜单

使用css的diaplay属性设置二级菜单的显示情况。

具体思路如下：

1.先制作静态的一级菜单和二级菜单，最好使用ul和li元素,以及a标签和float属性，还有要把二级菜单的位置定好，最好使用绝对定位，不占位置。（）
2.第二步，制作二级菜单不显示。通过设置css样式,使用diaplay:none;就可以实现了。
3.第三步，显示二级菜单，可以通过设置css样式,a标签的伪类选择器(a:hover)实现。

  <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}ul{list-style-type: none;}.contain{width: 900px;height: 100px;margin: 0 auto;}.nav{margin: 10px auto;width: 60px;height: 30px;}a{text-decoration: none;font-size: 12px;color: #999;}/* 当鼠标hover时将一级菜单的字体颜色改为红色 */a:hover{color:#f30213;}/* 隐藏二级菜单*/.nav ul li ul{display: none;}/* 显示二级菜单 */.nav ul li:hover ul{display: block;}  /* 鼠标经过li标签显示二级菜单 */.nav ul li:hover .purchase{display:block;}/* 鼠标hover时一级菜单的背景为白色 */.nav ul li:hover{background-color: white;}/* 为二级菜单的盒子设置宽高，以及边框，将其隐藏起来，用绝对定位脱离文档流 */.purchase{width: 100px;height:100px;position: absolute;;left:auto;display:none;}.purchase ul{float: left;}.purchase ul li{border: 1px solid;padding: 10px;}</style>
</head>
<body><div class="contain"><div class="nav"><ul><!-- 一级菜单 --><li><a href="">水果</a><div class="purchase"><!-- 二级菜单 --><ul><li><a href="">苹果</a></li><li><a href="">香蕉</a></li></ul>   <ul><li><a href="">橘子</a></li><li><a href="">柚子</a></li></ul></div></li>     </div></div>
</body>
</html>

注意的问题:
我在头一次用这个方法时,定位使用了相对定位,导致在显示二级菜单是，二级菜单的位置会占用了一级菜单的位置。后来花了好多时间才发现是定位的问题。

我分析了一下，会出现"占位置"这个bug,是由于我对定位知识点不够熟练,没有意识到,使用相对定位时,元素会占有原来的位置。而使用绝对定位，刚好可以解决这个问题。

另外，在写二级菜单还会遇到以下问题：

1.要使子菜单的所有元素在一行显示
解决办法:直接把子菜单的菜单列的显示方式设置为"inline-block"。

2.二级菜单被页面或者其他内容遮盖
解决办法:需要在顶层同级父元素设置"position:relative;",以及z-index。

二级导航菜单使用方法以及常见问题相关推荐

css二级横向导航条,纯CSS实现的横向二级导航菜单(无js兼容性强)
内容介绍热点排行相关文章下载地址↓ 纯CSS实现,无JavaScript,效果不错,实用性强,兼容各种浏览器! 第一步: 下载源代码及背景图片第二步: 在网页区添加样式定义 [code] /* = ...
一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览源码下载实现的代码. ...
html左侧分级导航,jquery实现无限分级横向导航菜单的方法
本文实例讲述了jquery实现无限分级横向导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 1. jquery插件版本代码如下: (function($){ $.fn.extend({ dro ...
HTML如何实现多级水平导航栏,jQuery+css实现的蓝色水平二级导航菜单效果代码
本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格 ...
jq ajax写二级导航,jQuery实现二级导航菜单的示例
实用JQ实现导航二级菜单效果,导航菜单在网站中非常常见,有的网站可能会出现三级菜单及多级菜单模式,下面我们来简单的实现一个二级菜单的效果. 部分效果截图: 整体代码: 导航菜单案例 *{ paddin ...
Java制作二级导航菜单_纯CSS实现超简单的二级下拉导航菜单代码
本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码.分享给大家供大家参考.具体如下: 这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且 ...
横向的二级导航菜单，在多浏览器下可用
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head ...
html二级菜单的自动宽度,如何使用CSS控制二级导航菜单宽度？_html/css_WEB-ITnose
New Document 首页新闻国际新闻国内新闻体育新闻财经股票市场证券行情基金保险联系我们回复讨论(解决方案) .menu li ul a{ display:block; font ...
【css】纯css实现二级导航菜单
效果: html: <div class="navbar"><div class="nav"><ul><li>& ...

二级导航菜单使用方法以及常见问题

二级导航菜单

使用css的diaplay属性设置二级菜单的显示情况。

具体思路如下：

二级导航菜单使用方法以及常见问题相关推荐

最新文章

热门文章