下拉菜单和悬停菜单(子菜单) [英] Dropdown Menu and Hover Menu (Sub Menu)
本文介绍了下拉菜单和悬停菜单(子菜单)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
伊斯坦布尔区域下拉一个悬停菜单我该怎么做?
Istanbul section right pulldown a hover menu how do I do it?
<li class="dropdown" data-toggle="collapse" data-target="#navbar-collapse-1">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Otoparklar <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a aria-controls="overview" role="tab" data-toggle="tab" href="#istanbul">İstanbul</a></li>
<li><a aria-controls="overview" role="tab" data-toggle="tab" href="#eskisehir">Eskişehir</a></li>
<li><a aria-controls="overview" role="tab" data-toggle="tab" href="#aydin">Aydın</a></li>
</ul>
</li>
推荐答案
您需要的代码是:
HTML:
<nav id="main_nav">
<ul>
<li>
<a href="">Dropdown</a>
<ul>
<li>
<a href="">example</a>
<ul>
<li><a href="">example1</a></li>
<li><a href="">example2</a></li>
<li><a href="">example3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
CSS:
* {
margin: 0;
padding: 0;
}
body {
font: 300 15px/1.5 "Helvetica Neue", helvetica, arial, sans-serif;
background: #333;
margin: 15px;
}
article {
width: 600px;
margin: 0 auto;
background: #000;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 15px 2px #666;
}
section {
clear: left;
}
h1 {
font-size: 45px;
font-weight: 100;
letter-spacing: 15px;
text-align: center;
}
h1, #main_content, #dog_link {
padding: 15px;
}
p {
margin: 15px 0;
}
a {
color: #06c;
}
#main_nav ul {
background: white;
float: left;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav li {
float: left;
position: relative;
width: 150px;
list-style: none;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav > ul > li > a, h1 {
text-transform: uppercase;
}
#main_nav a {
display: block;
text-decoration: none;
padding: 5px 15px;
color: #000;
}
#main_nav ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
opacity: 0;
}
#main_nav ul ul ul {
left: 100%;
top: 0;
}
#main_nav li:hover, #main_nav li:hover li {
background: #ddd;
}
#main_nav li li:hover, #main_nav li li:hover li {
background: #bbb;
}
#main_nav li li li:hover {
background: #999;
}
#main_nav li:hover > ul {
visibility: visible;
opacity: 1;
}
JSFiddle: https://jsfiddle.net/szs4Lapn/1/
JSFiddle: https://jsfiddle.net/szs4Lapn/1/
在我看来,我给你的链接对此评论说得很好。其实我想出了这个解决方案,看完这篇文章后。请留言,让我知道如果我有帮助。 :)
In my opinion, the link I gave you on the comment explains it very well. In fact I came up with this solution, after reading that post. Please leave a comment to let me know if I was helpful. :)
链接:
http://www.htmldog.com/examples/dropdowns3/
这篇关于下拉菜单和悬停菜单(子菜单)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文