- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我有一个与子菜单一起使用的 CSS 手册。我想知道如何向它添加子子菜单。例如,我将鼠标悬停在主菜单项上并弹出子菜单,然后我将鼠标悬停在子菜单项上并弹出另一个子菜单。这是我现在使用的 JS Fiddle:
http://jsfiddle.net/PrinceofVegas/Dg3yQ/4/
这是我使用的 CSS:
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
}
.menu ul{
background:#006633;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#006633 url("../images/seperator.gif") bottom right no-repeat;
color:#ffffff;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #003f20 url("../images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#006633;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('../images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:30px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#003f20 url('../images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
这是我正在使用的 HTML:
<div class="menu">
<ul>
<li><a href="#" target="_self" >Main Item 1</a></li>
<li><a href="#" target="_self" >Main Item 2</a>
<ul>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
</ul>
</li>
<li><a href="#" target="_self" >Main Item 3</a></li>
<li><a href="#" target="_self" >Main Item 4</a>
<ul>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
</ul>
</li>
</ul>
</div>
最佳答案
以下是我将如何处理您正在寻找的内容:http://jsfiddle.net/Dg3yQ/26/
我对 CSS 进行了一些修改。修改后的 CSS 将代码减少了几百个字符,我相信它达到了您的预期。我希望这会有所帮助。
已编辑:添加了一个简化的代码示例,其中包含对如何实现这些子菜单的答案的评论。
#nav {
list-style:none inside;
margin:0;
padding:0;
text-align:center;
}
#nav li {
display:block;
position:relative;
float:left;
background: #006633; /* menu background color */
}
#nav li a {
display:block;
padding:0;
text-decoration:none;
width:200px; /* this is the width of the menu items */
line-height:35px; /* this is the hieght of the menu items */
color:#ffffff; /* list item font color */
}
#nav li li a {font-size:80%;} /* smaller font size for sub menu items */
#nav li:hover {background:#003f20;} /* highlights current hovered list item and the parent list items when hovering over sub menues */
/*--- Sublist Styles ---*/
#nav ul {
position:absolute;
padding:0;
left:0;
display:none; /* hides sublists */
}
#nav li:hover ul ul {display:none;} /* hides sub-sublists */
#nav li:hover ul {display:block;} /* shows sublist on hover */
#nav li li:hover ul {
display:block; /* shows sub-sublist on hover */
margin-left:200px; /* this should be the same width as the parent list item */
margin-top:-35px; /* aligns top of sub menu with top of list item */
}
<ul id="nav">
<li><a href="#">Main Item 1</a></li>
<li><a href="#">Main Item 2</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">SUB SUB LIST »</a>
<ul>
<li><a href="#">Sub Sub Item 1</a>
<li><a href="#">Sub Sub Item 2</a>
</ul>
</li>
</ul>
</li>
<li><a href="#">Main Item 3</a></li>
</ul>
关于html - 使用 Sub-Menus 将 Sub-Sub-Menus 添加到 CSS 菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6537270/
我在产品类别和子类别网站上工作,可以创建的子类别数量是无限的,这意味着我们可以自己拥有子类别的子类别。一切正常,我只是有一个问题:假设“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 字幕文件)。
我是一名优秀的程序员,十分优秀!