网页导航菜单制作

谁借莪１个温暖的怀抱￠ 2022-09-30 09:42 230阅读 0赞

![Image 1][]

**导航部分可分为三部分：**

**第一部分：登陆/注册**

![Image 1][]

**第二部分：导航，无序列表部分**

![Image 1][]

**第三部分：图标部分**![Image 1][]

具体步骤：

1.先新建一个div容纳整个导航部分的内容

2.再新建p标签包含第一部分内容，左浮（p标签本为行级元素不能设置宽高，但左浮后，变成行块元素可以设置宽高），再设置height与line-height值相同，则可上下居中。

3.导航部分右边属于一个无序列表，要实现该效果，先写出一个无序列表，再对li使用li\{ float:right\}属性，再对齐宽高进行设置，使之居中。

4.无序列表下拉框的实现：

![Image 1][]

<li class="lie"><a href="">客户服务<i class="icon-list-bt"></i></a>|
        
        <ul class="nav-2-1-1">
            <li><a href="">包裹跟踪</a></li>
            <li><a href="">常见问题</a></li>
            <li><a href="">在线投诉</a></li>
            <li><a href="">配送范围</a></li>
        </ul>
    </li>

在需要新建下拉框的无序列表部分，添加子无序列表（如上）。

此时子无序列表并不会隐藏，我们需要的是当鼠标放在“客户服务”选项上时，下拉框自动弹出来，否则则隐藏。为了达到此效果：

a.先设置一下整个子无序列表的高，例如160px。

b.给“客户服务”所在无序列表一个属性overfloat:hidden;

c.再定义鼠标移上去的效果

.lie:hover{
        height: 160px;
        border: 1px solid #5e5e5e;
    }

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript（js）网页--下拉菜单制作

JavaScript（js）网页–下拉菜单制作在网页的设计中，经常会出现二级下拉菜单，当鼠标经过时，显示二级菜单，鼠标离开时隐藏。例如新浪网 ![在这里插入图片描述]

梦里梦外;/ 2022年12月22日 11:09/ 0 赞/ 211 阅读

相关利用jQuery制作的导航下拉菜单效果

利用jQuery制作的导航下拉菜单效果，其实利用css同样可以实现导航下拉菜单效果，但自从学习了jQuery后，感觉还是jQuery做起来效果更好。jQuery制作导航下拉菜单

曾经终败给现在/ 2022年11月09日 12:49/ 0 赞/ 209 阅读

相关 jquery导航菜单

{ margin: 0; padding: 0; } ul{ width: 800px;

末蓝、/ 2022年10月02日 09:54/ 0 赞/ 221 阅读

相关网页导航菜单制作

![Image 1][] 导航部分可分为三部分：第一部分：登陆/注册 ![Image 1][] 第二部分：导航，无序列表部分 ![Image 1][]

谁借莪１个温暖的怀抱￠/ 2022年09月30日 09:42/ 0 赞/ 231 阅读

相关纯css实现固定在网页底部菜单导航

原文：[纯css实现固定在网页底部菜单导航][css] [源代码下载地址][css] ![20140502223118727.jpg][] [css]: http:/

悠悠/ 2022年09月21日 13:23/ 0 赞/ 181 阅读

相关网页顶部横向导航栏的制作(最最基本的导航栏)

注意：该文章实现的导航效果是最基本的那种，没有加任何的js代码，纯粹使用html标签+css样式实现的。 html代码： <div class=

小咪咪/ 2022年06月17日 01:39/ 0 赞/ 282 阅读

相关 css 导航菜单

body部分，创建一个外部大盒子，里面有一个存放logo的盒子，还有一个存放菜单的盒子 <body> <div id="top"> <div id="logo"><i

曾经终败给现在/ 2022年06月14日 06:29/ 0 赞/ 258 阅读

相关如何制作网页的快捷导航栏部分？

本文笔记基于「千古壹号」的GitHub项目：[https://github.com/qianguyihao/web][https_github.com_qianguyihao_

快来打我*/ 2021年12月13日 22:17/ 0 赞/ 359 阅读

相关 html+js制作侧边下拉导航栏菜单

有其他的方法可以一起交流学习n(\≧▽≦\)n 效果图：css样式自己设置哟 ![2019081317092342.png][]

你的名字/ 2021年10月23日 10:47/ 0 赞/ 803 阅读

相关网页定位导航

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页导航特...

红太狼/ 2021年05月03日 09:50/ 0 赞/ 537 阅读