CSS导航条以及简单下拉菜单实现

以京东导航条来练习，导航条的制作可以采用浮动或者弹性布局，这里采用浮动，要注意高度塌陷的问题。这里简单仿写一下

下面实现鼠标移动到江苏实现下拉菜单的实现，首先要有一个下拉菜单，设置好宽高，把他隐藏起来，开启定位调整他的位置。

<div class="left"><div class="city1"><a href="">江苏</a></div> <div class="city"></div></div>.city{width: 200px;height: 400px;display: none;position: absolute;left: 30px;top: 30px;}

接下来设置鼠标经过整个left这个div显示下拉菜单，但是下拉菜单显示后，鼠标在下拉菜单停留的时候下拉菜单也应该显示，所以要同时把下面的子元素city一同设置这个效果。加点边框阴影修饰一下。仅仅是想移动到江苏两个字上显示，那就选择a同时设置兄弟元素city

 .left:hover .city{display: block;border: 1px solid grey;box-shadow: 5px  5px  black;}

这个时候我们发现下面的下拉菜单会盖住上面，如图

这里我们可以利用开启定位后的z-index,使得上面的元素覆盖住下拉菜单，

.city1{position: relative;padding-bottom: 5px;z-index: 1;/* 盖住下面的边框 */}

这里我们还要考虑一个问题，就是下拉菜单下面如果还有元素，会不会把下拉菜单盖住，所以我们可以把下拉菜单的优先级设置高一些。这里没有其他元素就不设置了。

最后附上整体源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>ul{list-style: none;}ul li{margin: 0 10px;line-height: 10px;}.top{height: 40px;width: 100%;background-color: grey;border-bottom: 2px solid black;position: relative;}.left,ul li{float: left;}.right{float: right;}a{text-decoration: none;}a:hover,.left>a{color: red;}.right :nth-child(2)>a, .right :nth-child(6)>a {color: red;}.city{width: 200px;height: 400px;display: none;position: absolute;left: 30px;top: 30px;}.city1{position: relative;padding-bottom: 5px;z-index: 1;/* 盖住下面的边框 */}.left:hover .city{display: block;border: 1px solid grey;box-shadow: 5px  5px  black;background-color: azure;/* city的层级要设置一下以防下面的元素盖住它，弹窗的层级要设置高些，这里下面没有其他元素就不设置了 */}.left{width: 60px;/* height: 10px; */margin: 10px  30px;}.city1 a{margin-left: 10px;}.left:hover .city1{background-color: azure;}.clearfix::after, .clearfix::before{content:'';display: table;clear: both;}.out{width: 1px;height: 15px;background-color: antiquewhite;float: left;}.icon{width: 10px;height: 10px;background-color: brown;}</style>
<body>
<div class="top clearfix"><div class="left"><div class="city1"><a href="">江苏</a></div> <div class="city"></div></div><ul class="right"><li><a href="">你好，请登录</a> </li>   <li><a href="">免费注册</a></li><div class="out"></div><li><a href="">我的订单</a></li><div class="out"></div><li><a href="">我的京东</a></li><div class="out"></div><li><a href="">京东会员</a></li><div class="out"></div><li><a href="">企业采购</a></li><div class="out"></div><li><a href="">客户服务</a></li><div class="out"></div><li><a href="">网站导航</a></li><div class="out"></div><li><a href="">手机京东</a></li><div class="out"></div><li><a href="">网站无障碍</a></li></div></body>
</html>

CSS导航条以及简单下拉菜单实现相关推荐

HTML下拉菜单怎么做成横向,css导航条横向带下拉菜单
css+div导航下拉二级菜单竖排效果如何改为横排? ,在"下一站"有三个二级竖排菜单,如何能变为横排?困扰了我一天了,让二级菜单变成一行,只需要在竖排的效果上,让二级菜单都浮动起 ...
Bootstrap导航条鼠标悬停下拉菜单
Bootstrap导航条鼠标悬停下拉菜单 Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹 ...
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
html左侧导航栏点击下拉菜单,HTML+CSS实现下拉菜单
HTML+CSS实现简单下拉菜单 HTML+CSS实现简单的下拉列表 1.下拉列表实例代码如下: *{ margin:0; padding:0; text-decoration:none; list ...
简单下拉菜单html,JavaScript简单下拉菜单实例代码
本文实例讲述了JavaScript简单下拉菜单实例代码.分享给大家供大家参考.具体如下: 这是一款JavaScript实现的下拉菜单演示代码,带渐变效果的CSS+jQuery菜单,向下滑出型的菜单,最 ...
[css] 请使用css写一个多级的下拉菜单
[css] 请使用css写一个多级的下拉菜单 <!DOCTYPE html> <html lang="en"><head><meta ch ...
关于MUI框架中，“侧滑导航“之“div模式下拉菜单“的a标签（超链接）的失效问题？
关于MUI框架中,"侧滑导航"之"div模式下拉菜单"的a标签(超链接)的失效问题? 截图和讲解图片的顺序如下所示: 图1 图2 · 官方的截图图3 · 官方 ...
仿安居客首页导航栏及二级下拉菜单Html+Css+JavaScript
这次仿写的是安居客的首页导航栏,要求实现二级下拉菜单首先,这是原网页的效果接下来是html部分 <div class="box1"><ul id=" ...
html+css简单下拉菜单制作
额,今天心血来潮做了个简单的下拉菜单,不过用的css操作的,啧! 最终效果: 代码: <!DOCTYPE html> <html> <head><title& ...

CSS导航条以及简单下拉菜单实现

CSS导航条以及简单下拉菜单实现相关推荐

最新文章

热门文章