我想将下拉菜单添加到现有水平导航栏中的特定项目。我已经根据我见过的大多数示例对html和css做了一些剪裁,但是菜单仍然没有出现......如何让子菜单链接出现在下面一个特定的主菜单链接,我能够保持主菜单链接可点击吗? (它在http://www.pure-ly.com)
HTML
<div class='nav'>
<ul class='menu' id='menu'>
<li id='dropdown'>
<a href='#'>Main Item </a>
<ul class='drop-nav' id='drop-nav'>
<li><a href='#'>Sub Item</a></li>
</ul>
</li>
</ul>
</div>
CSS
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:101%;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
display: inline;
width:auto;
line-height:36px;
padding:0 37px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:center;
display:inline;
left:205px;
width:auto;
}
.menu li {
position:relative;
float:center;
display:inline;
left:205px;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.dropdown {
position:relative;
}
.drop-nav {
position:absolute;
display:none;
}
.drop-nav li {
border-bottom: 1px solid rga(255,255,255,.2);
}
.dropdown:hover > .drop-nav{
display:block;
}
答案 0 :(得分:1)
首先,您有一些css元素的重复条目。
其次,您已使用ID作为“下拉列表”而不是类
}
.nav {
width:101%;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
}
.menu {
width:auto;
list-style:none;
text-align:center;
margin:0 auto;
display: inline;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
display: inline;
width:auto;
line-height:36px;
padding:0 37px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:center;
display:inline-block;
left:205px;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu > ul{
display:block;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu > ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu > ul li a:hover{
background:#fdfdfd;
color:#777;
}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
#dropdown {
position:relative;
}
.drop-nav {
position:absolute;
top: 0;
left: -100%;
padding-top: 30px;
display:none;
padding-left: 0;
margin-left: 0;
}
.drop-nav li {
border-bottom: 1px
solid rga(255,255,255,.2);
}
#dropdown:hover > .drop-nav{
display:block;
}
<div class='nav'>
<ul class='menu' id='menu'>
<li id='dropdown'>
<a href='#'>Main Item </a>
<ul class='drop-nav' id='drop-nav'>
<li><a href='#'>Sub Item</a></li>
</ul>
</li>
</ul>
</div>
答案 1 :(得分:1)
首先,使用html select创建下拉列表。
在其上方放置一个标签并使其可点击。