简单的下拉菜单与导航栏中的CSS

我想创建一个简单的下拉菜单（只有CSS）在一个导航栏中有多个链接，问题是下拉菜单将显示每个链接，而不仅仅是所需的一个。下面是代码：简单的下拉菜单与导航栏中的CSS

HTML CSS &

ul { 
 
    list-style: none; 
 
} 
 

 
.topNav { 
 
    background-color: #ff66b3; 
 
    overflow: hidden; 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
 
    position: relative; 
 
} 
 

 
.topNav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 8px; 
 
    text-decoration: none; 
 
    font-size: 14px; 
 
} 
 

 
.topNav a:hover { 
 
    background-color: #ffb3d9; 
 
    color: black; 
 
} 
 

 
.dropDown { 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 1; 
 
    min-width: 160px; 
 
} 
 

 
.dropDown a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.topNav .mainLink:hover .dropDown { 
 
    display: block; 
 
}

<div class="topNav" id="myTopnav"> 
 
    <a class="mainLink" id="menuIcon" href="#home">&#9776</a> 
 
    <a class="mainLink" href="#home">NerdBook</a> 
 
    <div class="dropDown"> 
 
    <a href="#news">News</a> 
 
    <a href="#contact">Contact</a> 
 
    <a href="#about">About</a> 
 
    </div> 
 
</div>

下拉将只显示在 “menuIcon” 链接。

来源

2017-04-11 Simone

将'.mainLink：hover'更改为'#menuIcon：hover' ...但实际上，当我将代码放入代码段时，您的代码无效，下拉式代码不会将链接的子代更改为'#menuIcon：悬停〜.dropDown' – DaniP

@ DaniP已经完成了，并没有工作。 – Simone

@DaniP好吧，那有点作品，但当你移动指针时，菜单会淡出，并且它也是内联而不是下拉 – Simone

您已经在要触发:hover的<a>标签上有一个ID，因此可以将其用作参考选择器。此外，您的代码不起作用，因为.dropDown ins't你的链接的子更改以匹配的兄弟姐妹：

#menuIcon：悬停〜.dropDown

ul { 
 
    list-style: none; 
 
} 
 
.topNav { 
 
    background-color: #ff66b3; 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
 
    position: relative; 
 
} 
 
.topNav:after { 
 
    content:""; 
 
    display:table; 
 
    clear:both; 
 
} 
 
.topNav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 8px; 
 
    text-decoration: none; 
 
    font-size: 14px; 
 
} 
 
.topNav a:hover { 
 
    background-color: #ffb3d9; 
 
    color: black; 
 
} 
 
.dropDown { 
 
    background:#e1e1e1; 
 
    display: none; 
 
    position: absolute; 
 
    top:100%; 
 
    z-index: 1; 
 
    min-width: 160px; 
 
} 
 

 
.dropDown a { 
 
    float:none; 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
#menuIcon:hover ~ .dropDown, .dropDown:hover { 
 
    display: block; 
 
}

<div class="topNav" id="myTopnav"> 
 
    <a class="mainLink" id="menuIcon" href="#home">&#9776</a> 
 
    <a class="mainLink" href="#home">NerdBook</a> 
 
    <div class="dropDown"> 
 
    <a href="#news">News</a> 
 
    <a href="#contact">Contact</a> 
 
    <a href="#about">About</a> 
 
    </div> 
 
</div>

来源

2017-04-11 14:26:06 DaniP

我已经回答你了 – Simone

是@@@@@imim检查现在编辑的代码段正在对你CSS – DaniP

确定它比我想要的更可能。但链接仍然是内联的，不像下拉菜单。 – Simone

简单的下拉菜单与导航栏中的CSS

回答

相关问题