文档章节

css 菜单

猫生神-神生天猫
 猫生神-神生天猫
发布于 2015/10/26 21:04
字数 697
阅读 89
收藏 3

css菜单

css主要分为一级菜单、二级菜单和多级菜单,而且基本都是用列表来写

1、一级菜单:一级菜单可以分为水平方向的,又可以分为纵向的如 1.1水平横向菜单:这种菜单的写法一般有两种,一种是将列表的li标签的display属性设置为display:inline-block;而另外一种则是 直接使用浮动float属性,设置为 float: left;或者 float: right;

输入图片说明 代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>一级横向菜单方法一</title>
    <!-- 做法是将li的浮动属性设置成向左或者向右方向-->
    <style type="text/css" rel="stylesheet">
        nav ul{
            list-style-type: none;
        }
        nav ul li{
            float: left;
            margin-right: 5px;
        }
        nav ul li  a{
            text-decoration: none;
            background-color: aquamarine;
        }
        nav ul li  a:hover{
            background-color: lime;
        }
    </style>
</head>
<body>
<nav>
    <ul>
        <li><a href="#" >招聘兼职</a></li>
        <li ><a href="#">房子租赁</a></li>
        <li ><a href="#">日常用品</a></li>
        <li><a href="#" >招聘兼职</a></li>
        <li ><a href="#">房子租赁</a></li>
        <li ><a href="#">日常用品</a></li>
    </ul>
</nav>
</body>
</html>
1.2一级纵向菜单:这个最简单,直接使用列表即可
(https://static.oschina.net/uploads/img/201510/26205935_iLsd.png )

2、二级菜单和多级菜单也可以分为水平方向的,又可以分为纵向的,二级菜单的写法主要是先将二级菜单设置成display:none;然后当鼠标移动经过时将二级菜单设置为可见的就可以了。

输入图片说明 代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>一级横向,二级纵向菜单</title>

    <!--此种方法为则是将先li的float属性设置成 left即可
      然后设置它的二级菜单的display属性为none不可见,但是当鼠标移动到一级菜单时
      则将二级菜单的display设置成可见显示 并且将li的float设置为inherit
    -->
    <style type="text/css" rel="stylesheet">
        *{
            margin: 0;
            padding: 0;
        }
        nav{
            width: 300px;
            margin:0 auto;
        }
        ul{
            list-style-type: none;
        }
        li{
            float:left;
            margin-right: 5px;
        }
        ul li ul{
            display: none;
        }
        a{
            text-decoration: none;
            background-color: antiquewhite;
        }
        a:hover{
            background-color: #ff9900;
            display: block;
        }

        ul li:hover ul{
            display: block;
            position: absolute;
        }
        ul li:hover ul li{
            float: inherit;
        }

    </style>
</head>
<body>
<nav>
    <ul>
        <li><a href="#" >招聘兼职</a>
            <ul class="twonav">
                <li><a href="#" >招聘兼职</a></li>
                <li ><a href="#"  >房子租赁</a></li>
                <li ><a href="#"  >日常用品</a></li>
            </ul>
        </li>
        <li ><a href="#" >房子租赁</a>
            <ul class="twonav">
                <li><a href="#"  >招聘兼职</a></li>
                <li ><a href="#"  >房子租赁</a></li>
                <li ><a href="#"  >日常用品</a></li>
            </ul>
        </li>
        <li ><a href="#" >日常用品</a>
            <ul class="twonav">
                <li><a href="#"   >招聘兼职</a></li>
                <li ><a href="#"  >房子租赁</a></li>
                <li ><a href="#"  >日常用品</a></li>
            </ul>
        </li>
        <li><a href="#" >招聘兼职</a>
            <ul class="twonav">
                <li><a href="#"    >招聘兼职</a></li>
                <li ><a href="#" >房子租赁</a></li>
                <li ><a href="#" >日常用品</a></li>
            </ul>
        </li>

    </ul>
</nav>
</body>
</html>

© 著作权归作者所有

猫生神-神生天猫
粉丝 0
博文 9
码字总数 1797
作品 0
广州
私信 提问
推荐7个 CSS3 制作的创意下拉菜单效果

使用 jQuery 和 CSS3 制作向下滑动的导航菜单 在线演示 源码下载 2. CSS3 简约风格导航菜单 在线演示 源码下载 3. CSS3 动画下拉菜单 在线演示 源码下载 4. 纯 CSS3 制作的两级菜单 在线演示...

rin9958
2016/06/30
44
0
12款超强CSS3应用集锦下载

CSS3非常强大,它可以渲染很多你意想不到的特效,而且目前浏览器对CSS3的支持也逐渐放开了,所以利用CSS3可以制作一些即美观又实用的网页应用,下面12款CSS3应用集锦分享给大家,有源代码下载...

Lunaqi
2017/11/20
0
0
关于网站二级联动菜单前台不能正常显示的问题

在做网站的时候遇到一个二级联动菜单不显示的问题,我是想用css直接控制二级导航菜单,但是二级菜单不能现实,下边是二级联动菜单的html部分: <div class="menu"><ul class="wrapper"> <di......

肖登天
2013/02/27
357
1
一个二级联动菜单的问题,高手帮忙

在做网站的时候遇到一个二级联动菜单不显示的问题,我是想用css直接控制二级导航菜单,但是二级菜单不能现实,下边是二级联动菜单的html部分: 控制二级联动菜单的CSS样式表代码如下: 现在的...

肖登天
2013/02/27
575
2
[译] 仅使用 HTML 和 CSS 创建多级嵌套弹出式导航菜单

原文地址:Creating a multi-level hierarchical flyout navigation menu using only HTML and CSS 原文作者:Abhishek Ghosh 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-......

掘金翻译计划
07/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Mybatis Plus删除

/** @author beth @data 2019-10-17 00:30 */ @RunWith(SpringRunner.class) @SpringBootTest public class DeleteTest { @Autowired private UserInfoMapper userInfoMapper; /** 根据id删除......

一个yuanbeth
今天
4
0
总结

一、设计模式 简单工厂:一个简单而且比较杂的工厂,可以创建任何对象给你 复杂工厂:先创建一种基础类型的工厂接口,然后各自集成实现这个接口,但是每个工厂都是这个基础类的扩展分类,spr...

BobwithB
今天
5
0
java内存模型

前言 Java作为一种面向对象的,跨平台语言,其对象、内存等一直是比较难的知识点。而且很多概念的名称看起来又那么相似,很多人会傻傻分不清楚。比如本文我们要讨论的JVM内存结构、Java内存模...

ls_cherish
今天
4
0
友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
5
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部