从现有导航栏下拉菜单

我想将下拉菜单添加到现有水平导航栏中的特定项目。我已经根据我所见过的大多数例子对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; 
}

来源

2016-05-13 Vanisha

首先，你必须重复输入一些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>

来源

2016-05-13 01:18:22

谢谢你，我已经将其更改为类的“下拉”，但CSS的第一部分，我以前编辑过很长一段时间，不要重复项影响下拉菜单？我太累了，无法在模糊的地方收拾东西...... – Vanisha

重复的东西似乎不是因素。但是id很重要，因为你的css指向class而不是id。这就是为什么它不会从显示改变：没有改变;我已经更新了答案，以便drop-nav可以在#dropdown：hover时点击。我没有花太多时间修复定位，但至少已经向您展示了它是如何工作的 –

您的答案对于一个子项目非常适用，但是当我添加更多内容时，主链接不再可点击并且子项目不在直线垂直线，你能建议如何解决这个问题吗？ – Vanisha

首先，使用html select创建下拉。

将一个标签放在它上面并使其可点击。

来源

2016-05-13 01:27:50

从现有导航栏下拉菜单

回答

相关问题