html - 进一步推出子子菜单-6ren

html - 进一步推出子子菜单

转载作者：行者123 更新时间：2023-11-28 12:26:18

25

4

我需要你的帮助。

我的子子菜单似乎与子菜单重叠，这很好，但我想将它向右推出一些，以便子菜单文本不会被截断。

这是正在发生的事情的图片:

enter image description here

这是我的 HTML 和 CSS 标记:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>List of Frequently Used Templates for Road Safety</title>
<style type="text/css">
#navigation {
    width: 150px;
    font-size: 0.75em;
}
#navigation ul {
    margin: 0px;
    padding: 0px;
}

ul.top-level {
    background: #666;
}

#navigation li {
    list-style: none;
}
ul.top-level li {
    border-bottom: #fff solid;
    border-top: #fff solid;
    border-width: 1px;
}

#navigation a {
    color: #fff;
    cursor: pointer;
    display:block;
    height:25px;
    line-height: 25px;
    text-indent: 10px;                  
    text-decoration:none;
    width:100%;
}
#navigation a:hover{ 
    text-decoration:underline;
}
#navigation li:hover {
    background: #f90;
    position: relative;
}
ul.sub-level {
    display: none;
}
li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;
}
ul.sub-level li {
    border: none;
    float:left;
    width:150px; 
}

#navigation .sub-level {
    background: #999;
}
#navigation .sub-level .sub-level {
    background: #09C;
}

li:hover .sub-level .sub-level {
    display:none;
}

.sub-level li:hover .sub-level {
    display:block;
}   
</style>
</head>
    <body>
        <div id="navigation">
            <ul class="top-level">
                <li><a href="#">Home</a>
                    <ul class="sub-level">
                        <li><a href="#">Sub Menu Item 1</a>
                        </li>
                        <li>
                            <a href="#">Sub Menu Item 2</a>
                            <ul class="sub-level">
                                <li><a href="#">Sub Sub Menu Item 1</a></li>
                                <li><a href="#">Sub Sub Menu Item 2</a></li>
                                <li><a href="#">Sub Sub Menu Item 3</a></li>
                                <li><a href="#">Sub Sub Menu Item 4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sub Menu Item 3</a></li>
                        <li><a href="#">Sub Menu Item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li>
                    <a href="#">FAQ</a>
                    <ul class="sub-level">
                        <li><a href="#">Sub Menu Item 1</a></li>
                        <li>
                            <a href="#">Sub Menu Item 3</a>
                            <ul class="sub-level">
                                <li><a href="#">Sub Sub Menu Item 1</a></li>
                                <li><a href="#">Sub Sub Menu Item 2</a></li>
                                <li><a href="#">Sub Sub Menu Item 3</a></li>
                                <li><a href="#">Sub Sub Menu Item 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">News</a>
                    <ul class="sub-level">
                        <li><a href="#">Sub Menu Item 1</a>
                            <ul class="sub-level">
                                <li><a href="#">Sub Sub Menu Item 1</a></li>
                                <li><a href="#">Sub Sub Menu Item 2</a></li>
                                <li><a href="#">Sub Sub Menu Item 3</a></li>
                                <li><a href="#">Sub Sub Menu Item 4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sub Menu Item 2</a></li>
                        <li><a href="#">Sub Menu Item 3</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

最佳答案

调整您的代码以匹配以下内容。工作样本:http://codepen.io/BJack/full/Cflem

你的

的宽度是 150px，所以绝对定位时将 left 属性偏移 150px。

li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 150px;
    top: 0px;
}

.sub-level li:hover .sub-level {
  display:block;
  position: absolute;
  left: 150px;
}

关于html - 进一步推出子子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18517504/

25

4

0

文章推荐： html - 更改屏幕分辨率时 LI 元素乱序

文章推荐： css - Adobe Dreamweaver CS6 设计 View 中的 HTML 页脚

文章推荐： arrays - 如何从数组中删除特定对象？

文章推荐： javascript - 如何制作每10秒刷新一次的jquery表？

deployment - 推出 MSI 文件
我有一个传统上作为 MSI 文件提供的产品。它由我们的各种客户通过某种形式的 SMS 推送部署到数千个桌面。我们用来创建这些安装程序的软件正在使用中，我们正在寻找替换它。由于我们支持许多操作系统，我们
JaCoCo 推出 Android Coverage
我们有一个使用 Gradle/Android Studio 构建的 Android 应用程序，并使用 JaCoCo 为我们的单元测试生成代码覆盖率报告；这很好用。我们也有兴趣能够为手动测试生成覆盖率报
sql - 数据库修改脚本 - 推出/回滚最佳实践？
我正在寻找有关数据库脚本修改的最佳实践的见解，这些修改与软件系统的其他代码更改一起进行。我曾经在一家公司工作，该公司坚持每次推出都要准备好回滚，以防出现问题。这听起来很合理，但在我看来，通过脚本部署
Android 推出 Twitter Intent
我使用下面的代码通过 Intent 启动 Twitter，但它不起作用。我的手机上安装了 twitter 应用程序。 Intent shareIntent = new Intent(android.c
macos - AppleScript 推出 1Password mini
我用 1Password存储我的密码，以及 fluid.app创建一些特定于站点的应用程序/浏览器虽然 1Password与 Chrome、Safari 和其他浏览器很好地集成，它不能很好地与 Fl
Android 推出 google maps transit
我如何启动 google maps transit get directions，以便当我按坐标或地点名称输入源和目的地时，google maps 会建议公交(公交路线)方向。这是骑自行车的代码，但我
android - 推出 SDK OTA 更新
我已经为 Android 应用程序开发了一个 SDK。我们有很多客户在应用程序中使用这个 SDK。现在我已经更新了我的 SDK。我正在寻找一种方法可以在应用程序中反射(reflect)这些更改，而无需
html - Flex Growth 应该只占用可用空间并防止将长文本的 child 推出
我有一个带 child 的 flex 容器，每个 child 都有一些内容(没有固定宽度的)，并且在一个 child 上我使用 flex-grow: 1;将其填充到剩余的可用空间。有时，正在成长的
java - 推出 java web start 客户端
我们即将推出使用 java web start 构建的客户端服务器应用程序。我们的主服务器位于欧洲的一个国家，第一天就会有许多用户从世界各地下载我们的客户端。由于客户端应用程序相当大(MB)，因此我们
jquery - HTML Mouseover image over image 推出
我已经尝试了很多组合，而这个是最接近我需要的组合。我需要的是一个图像 (img1)，上面有另一个(较小的)图像 (img2)，当我翻转 img1 时，我希望它淡入(并在滚出时淡出)，而 img2 保
推出 AR 眼镜前，苹果或将先推出一款 VR 头戴设备
北京时间 1 月 21 日晚间消息，知情人士今日称，苹果公司的首款 VR/AR(虚拟现实 / 增强现实)头显将是一款昂贵的小众产品，有望于 2022 年推出。这款产品主要为了将来更主流的 “AR
ios - Swift/iOS 推出 Apple Pay 特定支付通行证
搜索 Apple Pay/Passkit/Wallet 文档，我发现代码示例很少，文档也很差。我们尝试提供我们已配置的支付通行证，而不仅仅是使用 openPaymentSetup() 启动钱包。根据
Android 动画 View 进入屏幕，将当前全屏 View 推出
我需要这个用于 API11 之前的项目。我正在寻找一种从右侧添加 View 的方法，这将导致当前全屏 View 向左移出，以便在屏幕中显示新 View 。新 View 大约是屏幕宽度的 1/3，这
electron - Spectron 推出 10 个窗口； 10 次尝试后客户端初始化失败，挂起并失败
Electron v1.8.2 Spectron v3.8.0 添加光谱测试，但即使是非常基本的测试也会失败。尝试运行: const { Application } = require('spect
javascript - 翻转链接 == 更改类。推出 div == 改回类。不工作。帮助
这是我最简单的问题。让我试着把它弄清楚。我有一个 div，在本例中称为 "testdiv"，它附加了一个类名 "menulink"。 div 中有一个链接。当我滚动链接时，我希望 div 类更改为
jquery - 单击时将 li 元素展开 100% 宽度并将 sibling 推出
我想将 li 元素排列在任意数量的列中。 Yellow Block Red Block Green
html - 试图将 child 推出 parent ，但 parent 获得滚动条
我试图将 child 推到 parent 的盒子外面，但是，似乎 parent 只是在长度上扩展并获得一个滚动条，所以 child 留在里面，并且在 parent 外面不可见。 .parent {
c# - 推出 Beta 版时的 Google Play 游戏服务 : ERROR_NOT_AUTHORIZED,
Google Play 游戏服务:SIGN_IN 状态:ERROR_NOT_AUTHORIZED，推出 Beta 版时。还有这个:- W Auth : [GetToken] GetToken f
android - 编写 : wrap text in Row layout, 而不是将 sibling 推出
我正在尝试使用 Jetpack Compose，但我对 Row 的行为感到困惑。我在图标按钮旁边有一个文本，我希望图标按钮锚定在最小宽度为 48dp 的一侧，并在其周围环绕文本。像这样: 但是文本没有
javascript - 神秘(对我来说) "object doesn' t 支持此属性或方法错误 - JavaScript HTML 推出
我从第四行的字符 1 中收到上述错误...不知道是什么抛出了它？我确信这是我看不到的简单事情...... out = out + "Select Box Information The name of

首页

博学

6Ren·AI

商城

html - 进一步推出子子菜单