html - 相同的 CSS 代码适用于一个按钮,但不适用于另一个按钮
问题描述
我有一个正在构建的网站,其中有一些下拉菜单。我确信这不是以最有效的方式完成的,但我很好奇为什么会这样。对于这些下拉菜单,我有完全相同的 CSS 代码,但其中一个嵌套在主导航下方,另一个位于移动菜单下方(就像所有内容都在按钮下方一样)。
该代码有点工作,因为当我将显示更改为除无之外的任何内容时,样式都可以正常工作。但由于某种原因,我只是不知道为什么移动菜单下拉菜单不起作用,但主要导航栏之一是。
这是主导航栏下拉菜单的代码:
#menu .dropdown {
top: -1px;
position: relative;
display: inline-block;
z-index: 9999;
margin-left: -6px;
margin-right: -7px;
}
#menu .dropbtn {
background-color: transparent;
color: white;
border: none;
font-family: 'chivolight';
font-size: 1em;
font-weight: 600;
letter-spacing: 1px;
}
#menu .dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 10em;
box-shadow: relative rgba(0, 0, 0, 0.2);
margin-top: -0.2em;
margin-left: 0.35em;
top: 2.8em;
z-index: 99;
}
#menu .dropdown-content a {
background: white;
padding: 0.4em 1em;
text-decoration: none;
display: block;
}
#menu .dropdown-content a:hover {
background-color: #ddd;
}
#menu .dropdown:hover .dropdown-content {
display: block;
}
#menu .dropdown:hover .dropbtn {
background-color: transparent;
}
```
<div id="menu" class="chivolight">
<ul>
<li>
<div class="dropdown">
<button class="dropbtn"><a href="pageholder.html" accesskey="2" title="" class="hvr-underline-reveal">About Us</a></button>
<div class="dropdown-content">
<a href="pageholder.html" class="hvr-underline-reveal">Capabilties</a>
<a href="certifications.html" class="hvr-underline-reveal">Certifications</a>
<a href="pageholder.html" class="hvr-underline-reveal">History</a>
<a href="pageholder.html" class="hvr-underline-reveal">Quality</a>
</div>
</div>
</li>
</ul>
</div>
以及移动菜单下拉菜单的代码:
#menuicon .icon-dropbtn {
background-color: white;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
#menuicon .icon-dropdown {
position: relative;
display: inline-block;
}
#menuicon .icon-dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right: 0;
}
#menuicon .icon-dropbtn:hover {
opacity: 0.8;
transition: 0.3s;
}
#menuicon .icon-dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#menuicon .icon-dropdown-content a:hover {
background-color: #f1f1f1
}
#menuicon .icon-dropbtn:hover .icon-dropdown-content {
display: block;
}
#menuicon .icon-dropdown:hover .icon-dropbtn {
background-color: #3e8e41;
}
<div id="menuicon">
<div class="icon-dropdown">
<button class="icon-dropbtn" style="font-size: 0.8em;"><font color=black><i class="fa fa-bars"></i></font></button>
<div class="icon-dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
</div>
</div>
</div>
解决方案
选择移动显示类:
#menuicon .icon-dropdown .icon-dropbtn{
//CSS for mobile display
}
或者
为两个按钮添加相同的类:
喜欢
主要的:
<div id="menu" class="chivolight">
<ul>
<li>
<div class="dropdown">
<button class="dropbtn someclass"><a href="pageholder.html" accesskey="2" title="" class="hvr-underline-reveal">About Us</a></button>
<div class="dropdown-content">
<a href="pageholder.html" class="hvr-underline-reveal">Capabilties</a>
<a href="certifications.html" class="hvr-underline-reveal">Certifications</a>
<a href="pageholder.html" class="hvr-underline-reveal">History</a>
<a href="pageholder.html" class="hvr-underline-reveal">Quality</a>
</div>
</div>
</li>
</ul>
</div>
移动的:
<div id="menuicon">
<div class="icon-dropdown">
<button class="icon-dropbtn someclass" style="font-size: 0.8em;"><font
color=black>
<i class="fa fa-bars"></i></font></button>
<div class="icon-dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
</div>
</div>
</div>
现在对给定的类使用 CSS:
.someclass{
//Now both buttons have same class
//Add CSS
}
推荐阅读
- javascript - 为什么没有发送到谷歌火力基地?
- php - 如何将 URL(带有查询字符串)重定向到主页(index.php)
- python - 如何使用 Python 3.7 pdf2image 库解决 MemoryError?
- javascript - 嵌套文档上的 Mongoose $inc 操作错误
- php - 如何获取所有选定选项的值
- gcc - GCC 处理 const 字符串的过程是什么?
- ios - CBCentralManager.retrieveConnectedPeripherals() 返回什么设备?
- html - 以“vscode:”开头的 HTML 链接,用于在 Visual Studio Code 中打开文件
- angularjs - 量角器中的元素不可点击
- node.js - 如何在 mongodb 中显示特定列?