个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
31
4
我创建了一个带有 2 级子菜单的简单导航。我正在寻找“sub sub”选项以显示在其父项的右侧而不是下方。对于 CSS 的任何帮助，我将不胜感激。下面是 html 和 css 以及 JS fiddle 链接。
提前谢谢大家，
HTML
<body>
<header>
<h1><a href="http://www.test.com/demo">Test Website</a></h1>
Just another WordPress site <form role="search" method="get" id="searchform" action="http://www.test.com/demo/" >
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form> <div class="nav-bar">
<nav class="main-nav"><ul id="menu-main-nav" class="menu"><li id="menu-item-238" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-236 current_page_item menu-item-238"><a href="http://www.test.com/demo/">Home</a></li>
<li id="menu-item-241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-241"><a href="http://www.test.com/demo/second-page/">Second Page</a>
<ul class="sub-menu">
<li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-243"><a href="http://www.test.com/demo/sub-option-page-1/">Sub Option Page 1</a></li>
<li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245"><a href="http://www.test.com/demo/sub-option-page-2/">Sub Option Page 2</a>
<ul class="sub-menu">
<li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247"><a href="http://www.test.com/demo/sub-sub-option-1/">Sub Sub Option 1</a></li>
</ul>
</li>
</ul>
</li>
</ul></nav> </div>
</header>
</body>
CSS
ul, li{ margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
.nav-bar {
background: #008752;
height: 50px;
box-shadow: 2px 2px 3px #333;
}
.main-nav ul, .main-nav li{
display: inline
}
.main-nav a {
padding: 0 20px 0 20px;
text-decoration: none;
line-height: 50px;
color: white;
display: block;
}
.main-nav a:hover {
background:#00FFFB;
color: black;
}
.main-nav ul li {
position: relative;
float: left;
}
.main-nav ul ul {
position: absolute;
top: -99999px;
left: 0;
opacity: 0;
background: #037A5A;
text-align: left;
box-shadow: 2px 2px 3px #BFBFBF;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.main-nav ul ul a {
width: 135px;
line-height: 40px;
padding: 0 20px;
display:block;
}
.main-nav ul li:hover > ul {
position: absolute;
top: 100%;
opacity: 1;
z-index: 99999;
}
.main-nav ul ul ul {
background:#830002;
text-align: left;
}
.main-nav ul ul ul a {
width: 135px;
line-height: 40px;
padding: 0 20px;
display: block;
}
.main-nav ul ul ul a:hover {
background:#1041A3;
color: white;
}
.main-nav ul ul li:hover > ul {
position: absolute;
top: 100%;
left: 170px;
}
最佳答案
您只需要在 .main-nav ul ul li:hover > ul 上调整几个样式。
.main-nav ul ul li:hover > ul {
position: absolute;
top: 0;
left: 100%;
}
这会将其设置在其父级左侧的 100%，并与其父级的顶部内联。
关于html - 简单的 "Sub Sub"选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20624948/
31
4
0
我在产品类别和子类别网站上工作，可以创建的子类别数量是无限的，这意味着我们可以自己拥有子类别的子类别。一切正常，我只是有一个问题:假设“PRODUCT 1”属于“SUB SUB CATEGORY 1”
我正在学习OCaml，并在代码2022的到来中努力工作。。但似乎读取input.txt文件会导致一些问题。。我收到了这个奇怪的错误，它来自于函数分数。尤其是那个叫得分手HD的表达。不过，当我手动将LI
我有一个奇怪的行为(对于 Python 程序员)子例程，它简化如下: use strict; use Data::Dumper; sub a { my @x; sub b { push @x,
在此页上 http://bit.ly/T3yJIH , drupal 的 Nice Menu 模块不能正确显示子子菜单。如果转到菜单中的第一项，然后转到子菜单中的第一项，就可以看到它。 (Facili
我需要在我的站点内创建一个子结构，我在其中拥有: 实际上我是通过 Javascript 来完成的(伪代码):SUB_Content.height = ParentDiv.height - Sub_He
我有一个与子菜单一起使用的 CSS 手册。我想知道如何向它添加子子菜单。例如，我将鼠标悬停在主菜单项上并弹出子菜单，然后我将鼠标悬停在子菜单项上并弹出另一个子菜单。这是我现在使用的 JS Fiddle
我有一个关于 navmenu 的问题我不能选择导航菜单的 sub sub ul，如果我会做什么它会影响 3.ul。这是一个 wordpress 菜单我没有机会使用类或菜单的 ID。提前感谢您的帮助。
我创建了一个带有 2 级子菜单的简单导航。我正在寻找“sub sub”选项以显示在其父项的右侧而不是下方。对于 CSS 的任何帮助，我将不胜感激。下面是 html 和 css 以及 JS fiddle
我对 VBA、这个论坛和编程很陌生。我有一个工作表，我已经设法根据我的要求谷歌并调整某些代码行。 我的问题是我总共有三个潜艇，必须逐步运行每个 VBA 脚本。我希望将所有三个 VBA 脚本合二为一。
我使用 sub 调用作为另一个 sub 的参数。示例代码: test(isInString(), 'second parameter', 'third parameter'); sub test {
我想使用 HTML ui->FresBox->setText("fres"); 但它在 QCheckbox 中不起作用。如果您使用标签，它会很好用。有什么不同以及如何在 QCheckbox 中使用 H
我没有遇到这个问题，但在处理相关问题时想到了这个问题。让我们: logging = 'something' # bad naming decision import logging as lg
我正在查看 Redis pubsub，消费者是 2-4 节点自动缩放组的一部分(HA 原因) 也许我遗漏了一些明显的东西，但是 Redis pubsub 中是否有某种机制可以管理订阅者/消费者收到的重
对你们来说应该是一个快速和简单的，为什么这不起作用？ 代码限制用户只能在文本框中输入文本。 它工作正常，但我有大约 50 个文本框，所以会更干净，更容易调用。 但是，这样做，限制不再起作用 Priva
(编辑)TL; DR :我的问题是，尽管Win32 API定义的是真实的整数常量(如平台SDK header 中一样)，而Win32 Perl包装器将它们定义为subs。从而引起一线解析的误解。 在单
我有一个使用 Jersey 实现 REST API 的 Web 应用程序。 Web 容器 id Tomcat 以下是 API 的摘要: /rest/patients 获取患者元数据列表。 /rest/
我与 Czech 一起工作Python 3.4 中的重音文本。 调用 re.sub()用正则表达式对重音句子进行替换效果很好，但使用用 re.compile() 编译的正则表达式然后调用regex.s
对于我的一个新项目，我必须创建一个包含主类别、子类别和子子类别的类别页面。例如； 互联网 互联网 > 发展 互联网 > 开发 > 移动应用 在此类别中，您可以找到有关这些内容的网站。我必须为每个网站提
表1 - 客户数据 c_id(整数) 名称(varchar) 表2 - account_data a_id(整数) c_id (int) -> 使用customer_data。c_id plan_id
我有一些位图文件(jpeg、png、...)，我想编写一个 C++ 程序，将这些位图文件连接到 pes 流(mpeg-2 格式)，然后创建一个子文件(.sub/. idx:vobsub 字幕文件)。
我是一名优秀的程序员,十分优秀！