我的css菜单有这个html：
<nav class="clearfix">
<ul class="clearix">
<li><a href="http://www.domain.co.uk/">Homepage</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/project-gallery">Project Gallery</a></li>
<li><a href="/contact-us">Contact Us</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
nav {
height: 50px;
width: 100%;
background: #F00;
font-size: 14pt;
font-family: Arial;
position: relative;
border-bottom: 5px solid #FFFFFF;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 100%;
height: 50px;
text-align: center;
}
nav li {
display: inline;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav a {
color: #FFFFFF;
display: inline-block;
width: auto;
text-align: center;
text-decoration: none;
line-height: 50px;
}
nav li a {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
padding-left: 10px;
padding-right: 10px;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #000000;
color:#FFFFFF;
}
nav a#pull {
display: none;
}
@media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
@media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
color:#FFFFFF;
background-color: #F00;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
rightright: 15px;
top: 10px;
}
}
@media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #FFFFFF;
}
}
我正在寻找一种方法来添加子菜单，然后在第一个菜单上添加第二个子菜单，但仍保持其响应性。
我该怎么做？
答案 0 :(得分：3)
JSFIDDLE DEMO 的 逻辑很简单，并且有这个代码
#submenu,#submenu2,#submenu3{
visibility:hidden; /*turn all the submenus visibility hidden */
}
#top_menu li.first:hover #submenu,#submenu li.second:hover #submenu2,#submenu2 li.second:hover #submenu3{
visibility:visible; /*On hover turn on visibility visible */
}
完整代码：
HTML：
<div id="top_menu"> <!--MAIN MENU -->
<ul>
<li class="first">menu1
<div id="submenu"> <!--First Submenu -->
<ul class="abc">
<li class="second">item1
<div id="submenu2"> <!--Second Submenu -->
<ul class="abc">
<li class="second">item1_1
<div id="submenu3"> <!--Third Submenu -->
<ul class="abc">
<li class="second">item1_1_1</li>
<li class="second">item1_1_2</li>
<li class="second">item1_1_3</li>
</ul>
</div> <!--third Submenu Ends here-->
</li>
<li class="second">item1_2</li>
<li class="second">item1_3</li>
</ul>
</div> <!--Second Submenu Ends here-->
</li>
<li class="second">item2
<div id="submenu2">
<ul class="abc">
<li class="second">item2_1</li>
<li class="second">item2_2</li>
<li class="second">item2_3</li>
</ul>
</div>
</li>
<li class="second">item3
<div id="submenu2">
<ul class="abc">
<li class="second">item3_1</li>
<li class="second">item3_2</li>
<li class="second">item3_3</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="first">menu2
<div id="submenu">
<ul class="abc">
<li class="second">item1</li>
<li class="second">item2</li>
<li class="second">item3</li>
<li class="second">item4</li>
</ul>
</div>
</li>
</ul>
</div>
CSS：
ul{
padding:10px;
padding-right:0px;
}
li.first{
display:block;
display:inline-block;
padding:5px;
padding-right:25px;
padding-left:25px;
cursor:pointer;
}
li.second{
list-style:none;
margin:0px;
padding:5px;
padding-right:25px;
margin-bottom:5px;
cursor:pointer;
}
#submenu li.second:hover{
background:red;
border-radius:5px;
}
#submenu2 li.second:hover{
background:green;
border-radius:5px;
}
/*********MAIN LOGIC***************/
#submenu,#submenu2,#submenu3{
visibility:hidden;
}
#top_menu li.first:hover #submenu,#submenu li.second:hover #submenu2,#submenu2 li.second:hover #submenu3{
visibility:visible;
}
/**********STYLING SUBMENUS**************/
#submenu{
padding-right:0px;
text-align:left;
position:absolute;
background:white;
box-shadow:0px 0px 5px;
border-radius:5px;
}
#submenu2{
text-align:left;
position:absolute;
left:70px;
top:0px;
background:red;
box-shadow:0px 0px 5px;
border-radius:5px;
}
#submenu3{
text-align:left;
position:absolute;
left:80px;
top:0px;
background:green;
box-shadow:0px 0px 5px;
border-radius:5px;
}
只需了解此代码背后的逻辑，您就可以根据需要创建任意数量的子菜单。
答案 1 :(得分：2)
有很多方法可以解决这个问题。
我通常使用ul隐藏子菜单display: none，并使用position: absolute将其带出内容流。给包含子菜单li的{{1}}以便子菜单相对于其直接父项，然后使用position: relative，top定位子菜单， right和bottom属性。最后，通过left或其他任何方式将子菜单更改为display: block。
以下是一个简单的例子：
标记：
:hoverCSS：
<nav>
<ul>
<li><a>Link</a>
<ul>
<li><a>Sub link</a></li>
<li><a>Sub link</a></li>
<li><a>Sub link</a></li>
</ul>
</li>
</ul>
</nav>
Here's a pen with this example。它看起来像废话，但你得到了演习。
您可以继续嵌套更多子菜单，但您可能希望对次级菜单的二级和更低级别使用不同的定位。
但请注意，移动浏览器并不真正支持nav li {
position: relative;
}
nav li > ul {
position: absolute;
top: 100%;
display: none;
}
nav li:hover > ul {
display: block;
}
。至少他们不会对待它。您不应仅在:hover上访问子菜单。考虑在点击时使用javascript添加某种类名称切换。
答案 2 :(得分：2)
如果您询问如何使ID菜单具有菜单功能或只是主导航的子菜单，我不能100％确定。
如果它与您的主导航的子菜单有关，那么这将正常工作。如果是移动菜单，请告诉我，我会为您解决问题。 （已解决）
这个小提琴有子菜单工作，但仍然在整个时间响应。您可以根据自己的需要设计样式，但这是一个坚实的开始。
nav ul li ul {
display: none;
position: absolute;
width: 100%;
top: 100%;
background: #000;
color: #fff;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
display: block;
-webkit-transition: .6s ease;
-moz-transition: .6s ease;
-ms-transition: .6s ease;
-o-transition: .6s ease;
}
nav ul li ul li:hover {
background: #c1c1c1;
color: #2b2b2b;
}
<强> JSFIDDLE
<强> JSFIDDLE with relative sized sub menu
这是移动导航工作，最大的问题是你没有为小提琴选择jQuery库。
<强> Mobile Nav
<强> HTML
<div id="pull"><span>Menu</span>
</div>
<强> CSS
div span {
color: #FFFFFF;
display: inline-block;
width: auto;
text-align: center;
text-decoration: none;
line-height: 50px;
padding-left: 10px;
padding-right: 10px;
}
我将id pull更改为div，因为当它是一个锚标记时，所有导航都会丢失文本颜色。
我已经做了一个下拉列表，同时还有响应！在这个jsfiddle上达到顶峰。
答案 3 :(得分：2)
在css中使用hover，如：
a:hover
或者你的div id是“div1”：
#div1:hover
答案 4 :(得分：2)
这是我的看法：http://codepen.io/teodragovic/pen/rmviJ
<强> HTML
<nav>
<input type="checkbox" id="nav-toggle-1" />
<label for="nav-toggle-1" class="pull sub"><a>Menu</a></label>
<ul class="lvl-1">
<li><a href="http://www.domain.co.uk/">Homepage</a></li>
<li>
<input type="checkbox" id="nav-toggle-2" />
<label for="nav-toggle-2" class="sub"><a>Services</a></label>
<ul class="lvl-2">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li>
<input type="checkbox" id="nav-toggle-3" />
<label for="nav-toggle-3" class="sub"><a>Service 3</a></label>
<ul class="lvl-3">
<li><a href="#">Service 3 a</a></li>
<li><a href="#">Service 3 b</a></li>
</ul>
</li>
<li><a href="#">Service 4</a></li>
</ul>
</li>
<li><a href="/project-gallery">Project Gallery</a></li>
<li><a href="/contact-us">Contact Us</a></li>
</ul>
</nav>
<强> CSS
@import "compass";
/* globals */
* {box-sizing:border-box;}
ul {
margin: 0;
padding: 0;
}
input {
position: absolute;
top: -99999px;
left: -99999px;
opacity: 0;
}
nav {
height: 50px;
background: #F00;
font: 16px/1.5 Arial, sans-serif;
position: relative;
}
a {
color: #FFFFFF;
display: inline-block;
text-decoration: none;
line-height: 50px;
padding: 0 20px;
&:hover,
&:active {
background-color: #000000;
color:#FFFFFF;
}
}
/* nav for +600px screen */
ul.lvl-1 {
text-align: center;
@include pie-clearfix;
li {
display: inline;
}
}
ul.lvl-2,
ul.lvl-3 {
position: absolute;
width: 100%;
background: lighten(red, 15%);
display:none;
}
ul.lvl-3 {background: lighten(red, 30%);}
#nav-toggle-2:checked ~ ul.lvl-2,
#nav-toggle-3:checked ~ ul.lvl-3 {
display: block;
}
.pull {display: none;}
/* arrow thingy - crappy positioning, needs tinkering */
.sub {
position: relative;
cursor: pointer;
&:after {
position: absolute;
top: 40%;
right: 0;
content:"";
width: 0;
height: 0;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-top: 6px solid white;
}
}
/* medium-ish nav */
@media screen and (max-width: 600px) {
nav {height: auto;}
a {
text-align: left;
width: 100%;
text-indent: 25px;
border-bottom: 1px solid #FFFFFF;
}
ul > li {
width: 50%;
float: left;
&:nth-of-type(odd) {
border-right: 1px solid white;
}
}
li:nth-of-type(even) ul.lvl-2,
li:nth-of-type(even) ul.lvl-3 {
position: relative;
width: 200%;
left: -100%;
}
li:nth-of-type(odd) ul.lvl-2,
li:nth-of-type(odd) ul.lvl-3 {
position: relative;
width: 200%;
left: 1px;
}
ul.lvl-2 li {background: lighten(red, 15%);}
ul.lvl-3 li {background: lighten(red, 30%);}
}
/* small-ish nav */
@media only screen and (max-width : 480px) {
.pull {
display: block;
width: 100%;
position: relative;
}
ul {
height: 0;
> li {
width: 100%;
&:nth-of-type(odd) {
border-right: none;
}
}
}
#nav-toggle-1:checked ~ ul.lvl-1 {
height: auto;
}
#nav-toggle-2:checked ~ ul.lvl-2,
#nav-toggle-3:checked ~ ul.lvl-3 {
//reverting stuff from previous breakpoint
left: 0;
width: 100%;
}
}
Markup几乎没有从原始版本修改，因为我发现使用类比使用常规选择器更容易，尤其是在嵌套列表时。
它只是CSS（我正在使用SASS +指南针）。 :checked伪类用于打开和关闭菜单。我删除了服务链接，假设它只用于打开子菜单（内容方面，如果你想在导航中保留该页面，你总是可以在子菜单中添加类似“所有服务”的内容）。
最大的挑战是造型中断点。根据父列表项的位置（奇数或偶数），子列表被拉伸到200％（因为父级是50％宽）并且定位为从左侧浮动。第3级出现关于列表宽度的小错误，导致边缘出现颜色渗色。
另外，display: block和display:none选择器可以替换为max-height以添加一些很酷的css动画效果