今天使用ul创建下拉式菜单，菜单中的内容堆在了一起。



这是我的html代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>MyBlog</title>

    <link href="loginMain.css" rel="stylesheet" type="text/css">

</head>

<body>

    <!-- 顶部导航 -->

    <div id="top-div">

        <ul class="top-title-ul">

            <li id="top-title-li-1"><a href="">博客</a>

                <ul class="top-title-ul">

                    <li><a href="">java</a></li>

                    <li><a href="">html</a></li>

                    <li><a href="">css</a></li>

                    <li><a href="">js</a></li>

                </ul>

            </li>

            <li id="top-title-li-2"><a href="">项目</a>

                <ul class="top-title-ul">

                    <li><a href="">java</a></li>

                </ul>

            </li>

        </ul>

    </div>

</body>

</html>

这是我的css代码

.top-title-ul{

    list-style-type:none;

    margin: 0;

    padding: 0;

}

#top-title-li-1{

    display: inline-block;

    position: relative;

}

#top-title-li-1 li{

    display: none;

    position: absolute;

}

#top-title-li-1:hover li{

    display: block;

}

#top-title-li-2{

    display: inline-block;

    position: relative;

}

#top-title-li-2 li{

    display: none;

    position: absolute;

}

#top-title-li-2:hover li{

    display: block;

}

根据堆叠情况可以判断出是position的问题，absolute表示元素使用绝对位置，元素之间可以重叠，正好是上边的情况，果断改用relative，但是第一个下拉菜单又会影响之后下拉菜单的位置，这说明思路不对，之后继续分析，通过查找堆叠元素的共同点，发现都是li标签内容。这才明白css中应该指定ul的位置是absolute。

通过修改css文件，问题解决。

.top-title-ul{

    list-style-type:none;

    margin: 0;

    padding: 0;

}

#top-title-li-1{

    display: inline-block;

    position: relative;

}

#top-title-li-1 ul{

    display: none;

    position: absolute;

}

#top-title-li-1:hover ul{

    display: block;

}

#top-title-li-2{

    display: inline-block;

    position: relative;

}

#top-title-li-2 ul{

    display: none;

    position: absolute;

}

#top-title-li-2:hover ul{

    display: block;

}

下拉式菜单中的内容堆叠（ul型）的更多相关文章

  1. Web前端开发实战1：二级下拉式菜单之CSS实现

    二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...

  2. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  3. Web前端开发实战2：二级下拉式菜单之JS实现

    上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的.我们这一篇来用JavaScript脚本实现下拉菜单的显 示和隐藏. 使用 JavaScript方法实现我们须要用的知识有: 1)JS事件:on ...

  4. 为下拉式菜单(DropDownList)添加第一个选项

    很多方法可以为为下拉式菜单(DropDownList)添加第一个选项,下面是Insus.NET小结了几个方法,仅供参考: Html code: <body>    <form id= ...

  5. 用JavaScript+css制作下拉式菜单

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. Android入门（七）：Spinner下拉式菜单组件

    对于手机和平板电脑的应用程序来说,打字是非常不方便的操作方式,比较好的方式就是列出一组选项让用户挑选,这样就可以避免打字的麻烦.使用Spinner下拉菜单组件需要完成以下几个步骤: 1.建立选项列表, ...

  7. html基础——下拉式菜单

    一个网站能否让用户容易使用该网站往往是由菜单栏体现出来,因为它为网页的大多数页面提供功能入口.一个轻轻的点击以后,即可显示出菜单项,将网站的大部分页面和功能显示出来让用户清楚了解从而用户节约一定的时间 ...

  8. iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

    当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动 ...

  9. 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

随机推荐

  1. ionic + asp.net core webapi + keycloak实现前后端用户认证和自动生成客户端代码

    概述 本文使用ionic/angular开发网页前台,asp.net core webapi开发restful service,使用keycloak保护前台页面和后台服务,并且利用open api自动 ...

  2. DPDK Hash Library原理（学习笔记）

    0 前言 本文主要翻译至DPDK的官方编程指南,在谷歌翻译的基础上根据自己的理解做了一些修改.网上搜索的很多中文翻译大多是翻译后直接黏贴上来,有时候连语句都读不通.希望本文能够对你有所帮助. 1 介绍 ...

  3. hdu2093 考试排名（还需完善）

    下面代码是借鉴的.好多的知识点等着完善 #include <iostream> #include <string> #include <algorithm> usi ...

  4. SQL——SQL约束

    SQL约束 - 用于限制加入表的数据的类型    可以在创建表时规定约束(通过 CREATE TABLE 语句),或者在表创建之后也可以(通过 ALTER TABLE 语句).    NOT NULL ...

  5. Java——动态创建Class(不写入文件，直接从内存中创建class)

    原文:https://blog.csdn.net/zhao_xinhu/article/details/82499062#commentsedit 参考:https://www.cnblogs.com ...

  6. 14.Java连接Redis_Jedis_主从模式

    redis的主从模式之前提到过,这里我们使用redis来实现主从模式. 首先在VMware虚拟机中的Linux中打开两个终端,一个是用户jack,一个是newuser: 然后我们jack作为主机,re ...

  7. 应小姐姐要求，整理常用Git操作命令，她都学会了，你确定不收藏

    前言 因为个人原因,转化了部门之后已经很久没有接触过开发层级的东西了,好多东西基本都忘记了,但是新的部门有时候会用到相应的研发部的代码和文档手册,所以耳边就充斥这一句话 这个为什么下载不了?这个为什么 ...

  8. Vulnerability of SSL to Chosen-Plaintext Attack 读书报告

    这篇文章讲述了在SSL上的选择明文攻击.我想分四个部分讲讲我对这篇文章的理解. 1.CPA的定义: 2.文章讲述SSL相关基本概念漏洞: 3.对SSL的CPA攻击的过程: 4.实现这种攻击的可能性以及 ...

  9. HTTP 冷知识 | HTTP 请求中，空格应该被编码为 %20 还是 + ？

    HTTP 请求中,空格应该被编码为什么?今天我们走进 RFC 文档和 W3C 文档,了解一下这个「史诗级」大坑. 1.%20 还是 + ? 开始讲解前先看个小测试,在浏览器里输入 blank test ...

  10. Spring boot Sample 004之spring-boot-configuration-yaml

    一.环境 1.1.Idea 2020.1 1.2.JDK 1.8 二.目的 通过yaml文件配置spring boot 属性文件 三.步骤 3.1.点击File -> New Project - ...