如何添加一个响应CSS菜单的子菜单
问题描述：
我有这个网站对于我的CSS菜单：如何添加一个响应CSS菜单的子菜单
<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;
}
}
我正在寻找一种方法来添加子菜单，然后第二子菜单上的第一个，但仍然保持它的响应，因为它是。
我该怎么做？
答
有很多方法来继续这个问题。
我通常隐藏子菜单ul s与display: none并从position: absolute带出内容流。给li包含子菜单position: relative，使子菜单是相对于他们的直接父母，然后定位子菜单，但请使用top,right,bottom和left属性。最后，通过:hover或其他任何方式将子菜单更改为display: block。
下面是这一个最基本的例子：
标记：
<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>
CSS：
nav li {
position: relative;
}
nav li > ul {
position: absolute;
top: 100%;
display: none;
}
nav li:hover > ul {
display: block;
}
Here's a pen with this example。它看起来像废话，但你得到演习。
您可以继续嵌套更多的子菜单，但是您可能想要为子菜单的二级和更低级别使用不同的定位。
但请注意，手机浏览器并不真正支持:hover。至少他们不会这样对待它。您不应让您的子菜单仅在:hover上可访问。考虑添加某种类的名称切换点击与JavaScript代替。
+0
对于谁低估了这一点：请留下评论，为什么你认为这是一个不好的答案。 –
答
我不是100％确定如果你问如何使ID菜单有一个菜单功能或只是一个子菜单为您的主要导航。
如果它属于主导航的子菜单，那么这将工作得很好。如果是用于移动菜单，请告诉我，我会为您解决问题。 （求助）
这个小提琴的子菜单工作，同时仍然响应整个时间。您可以根据自己的需求设计款式，但这是一个坚实的开始。
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 with relative sized sub menu
这里是移动导航工作，最大的问题是你有选择的小提琴断的运行没有jQuery库。
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拉来一个div因为当它是一个锚标记的所有资产净值的会失去他们的文字颜色。
我做了一个下拉式下拉式下拉菜单，同时仍然响应！在这个jsfiddle处找个高峰。在如CSS
答
使用悬停：
a:hover
，或者如果你的div id为 “DIV1”：
#div1:hover
答
这是我的看法：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%;
}
}
标记的小由原来的修改，因为我觉得它更容易使用类比一般的选择，尤其是嵌套列表时。
它只是CSS（我使用SASS +指南针）。 :checked伪类用于打开和关闭菜单。我删除了服务的链接，假设它只是用于打开子菜单（内容方面，如果要在导航中保留该页面，则可以在子菜单中添加“所有服务”）。
最大的挑战是设计中间断点。根据父列表项的位置（奇数或偶数），子列表被拉伸到200％（因为父母的宽度为50％），并且定位使它从左侧漂浮。小错误出现在3级关于导致边缘颜色流血的列表宽度。
Additionaly，display: block和display:none选择可以用max-height代替，以添加一些很酷的CSS动画效果
答
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;
}
才明白这段代码背后的逻辑，当你想，你可以做尽可能多的子菜单。
你能画出你想要的样子吗？子菜单应该在哪里渲染？ –
我想通了，至少我认为这是你想要的，http://jsfiddle.net/Josh_Powell/EYjnG/8/。 –