[英]Modify CSS dropdown menu to add sub-menu option to it
Good day to all! 祝大家有美好的一天!
I need help to modify a CSS navigation menu with dropdowns to add sub-menu to it. 我需要帮助来修改带有下拉菜单的CSS导航菜单,以向其添加子菜单。
For example, I have menu options "You" -> "Plan". 例如,我有菜单选项“您”->“计划”。 I need to add a sub-menu into "Plan", so when user hovers the cursor over "Plan", a sub-menu with other options appears - just like when he hovers over "You" option. 我需要在“计划”中添加一个子菜单,因此,当用户将光标悬停在“计划”上时,会出现带有其他选项的子菜单,就像他将鼠标悬停在“您”选项上一样。
HTML: HTML:
<nav>
<ul>
<li><a href="#">View</a></li>
<li class="drop">
<a href="#">You</a>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Plan</li>
<li>Account Settings</li>
<li>Switch Account</li>
<li>Sign Out</li>
</ul>
</div>
</div>
</li>
<li><a href="#">Help</a></li>
</ul>
</nav>
CSS: CSS:
body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
}
a {
text-decoration: none;
}
/*---------- Wrapper --------------------*/
nav {
width: 100%;
height: 80px;
background: #222;
}
ul {
text-align: center;
}
ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
line-height: 80px;
padding: 0 20px;
height: 80px;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
Any help would be appreciated! 任何帮助,将不胜感激!
You just need to add another ul
for your subnav set to position:absolute
and display: none
and then show it when you hover over .dropOut ul li
您只需要为设置为position:absolute
subnav添加另一个ul
并display: none
,然后将鼠标悬停在.dropOut ul li
上.dropOut ul li
显示它
.subnav{
display:none;
background: black;
position: absolute;
left: 100%;
top: 0;
}
.dropOut ul li:hover .subnav{
display: block;
}
Just be sure to set .dropOut ul li
to position: relative
so that it will contain your subnav: 只需确保将.dropOut ul li
设置为position: relative
,这样它将包含您的子导航:
.dropOut ul li {
position: relative; //add
text-align: left;
float: left;
width: 125px;
....
HTML HTML
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Plan
<ul class="subnav">
<li>menu 1</li>
<li>menu 1</li>
<li>menu 1</li>
</ul>
</li>
<li>Account Settings</li>
<li>Switch Account</li>
<li>Sign Out</li>
</ul>
</div>
</div>
You shouldn't use opacity
to do this use display
instead i have did this using opacity
but that leaves some space use display
property to avoid this http://jsfiddle.net/k2rjkdxy/ This one with display
http://jsfiddle.net/k2rjkdxy/1/ 你不应该使用opacity
要做到这一点使用display
,而不是我这个没有使用opacity
,但留下一定的空间,使用display
属性来避免这种http://jsfiddle.net/k2rjkdxy/这一个带有display
http://jsfiddle.net / k2rjkdxy / 1 /
body { text-align: center; background: #e0e0e0; padding-bottom: 200px; } a { text-decoration: none; } /*---------- Wrapper --------------------*/ nav { width: 100%; height: 80px; background: #222; } ul { text-align: center; } ul li { font: 13px Verdana, 'Lucida Grande'; cursor: pointer; -webkit-transition: padding .05s linear; -moz-transition: padding .05s linear; -ms-transition: padding .05s linear; -o-transition: padding .05s linear; transition: padding .05s linear; } ul li.drop { position: relative; } ul > li { display: inline-block; } ul li a { line-height: 80px; padding: 0 20px; height: 80px; color: #777; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; } ul li a:hover { color: #eee; } .dropOut .triangle { width: 0; height: 0; position: absolute; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid white; top: -8px; left: 50%; margin-left: -8px; } .dropdownContain { width: 160px; position: absolute; z-index: 2; left: 50%; margin-left: -80px; /* half of width */ top: -400px; } .dropOut { width: 160px; background: white; float: left; position: relative; margin-top: 0px; opacity: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15); -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15); box-shadow: 0 1px 6px rgba(0,0,0,.15); -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; } .dropOut ul { float: left; padding: 10px 0; } .dropOut ul li { text-align: left; float: left; width: 125px; padding: 12px 0 10px 15px; margin: 0px 10px; color: #777; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: background .1s ease-out; -moz-transition: background .1s ease-out; -ms-transition: background .1s ease-out; -o-transition: background .1s ease-out; transition: background .1s ease-out; } .dropOut ul li:hover { background: #f6f6f6; } ul li:hover a { color: white; } ul li:hover .dropdownContain { top: 65px; } ul li:hover .underline { border-bottom-color: #777; } ul li:hover .dropOut { opacity: 1; margin-top: 8px; } .d{ opacity:0; } ul li ul li:hover .d{ opacity:1; }
<nav> <ul> <li><a href="#">View</a></li> <li class="drop"> <a href="#">You</a> <div class="dropdownContain"> <div class="dropOut"> <div class="triangle"></div> <ul> <li>Plan <ul class="d"><li>text</li> <li>text</li> <li>text</li> </ul></li> <li>Account Settings</li> <li>Switch Account</li> <li>Sign Out</li> </ul> </div> </div> </li> <li><a href="#">Help</a></li> </
This one with display
property 这个具有display
属性
body { text-align: center; background: #e0e0e0; padding-bottom: 200px; } a { text-decoration: none; } /*---------- Wrapper --------------------*/ nav { width: 100%; height: 80px; background: #222; } ul { text-align: center; } ul li { font: 13px Verdana, 'Lucida Grande'; cursor: pointer; -webkit-transition: padding .05s linear; -moz-transition: padding .05s linear; -ms-transition: padding .05s linear; -o-transition: padding .05s linear; transition: padding .05s linear; } ul li.drop { position: relative; } ul > li { display: inline-block; } ul li a { line-height: 80px; padding: 0 20px; height: 80px; color: #777; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; } ul li a:hover { color: #eee; } .dropOut .triangle { width: 0; height: 0; position: absolute; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid white; top: -8px; left: 50%; margin-left: -8px; } .dropdownContain { width: 160px; position: absolute; z-index: 2; left: 50%; margin-left: -80px; /* half of width */ top: -400px; } .dropOut { width: 160px; background: white; float: left; position: relative; margin-top: 0px; display:none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15); -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15); box-shadow: 0 1px 6px rgba(0,0,0,.15); -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; } .dropOut ul { float: left; padding: 10px 0; } .dropOut ul li { text-align: left; float: left; width: 125px; padding: 12px 0 10px 15px; margin: 0px 10px; color: #777; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: background .1s ease-out; -moz-transition: background .1s ease-out; -ms-transition: background .1s ease-out; -o-transition: background .1s ease-out; transition: background .1s ease-out; } .dropOut ul li:hover { background: #f6f6f6; } ul li:hover a { color: white; } ul li:hover .dropdownContain { top: 65px; } ul li:hover .underline { border-bottom-color: #777; } ul li:hover .dropOut { display:block; margin-top: 8px; } .d{ display:none; } ul li ul li:hover .d{ background:skyblue; position:absolute; display:block; }
<nav> <ul> <li><a href="#">View</a></li> <li class="drop"> <a href="#">You</a> <div class="dropdownContain"> <div class="dropOut"> <div class="triangle"></div> <ul> <li>Plan <ul class="d"><li>text</li> <li>text</li> <li>text</li> </ul></li> <li>Account Settings</li> <li>Switch Account</li> <li>Sign Out</li> </ul> </div> </div> </li> <li><a href="#">Help</a></li> </
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.