您好我正在创建一个网站导航菜单。我已经为我的一个链接实现了一个下拉选项,但它根本没有显示。我相信这是一个简单的解决方案,我忽略了,任何帮助表示赞赏。
我只包含了相关的HTML和CSS代码。谢谢!
HTML:
<nav onmouseout="hide()">
<ul id="navMenu">
<li><a href="homepage.html">Home</a></li>
<li><span onmouseover="show(about)">About Us</span>
<div id="about" onmouseover="show(about)" style="visibilty:hidden;">
<a href="Darwin.html">Darwin</a>
<a href="Alex.html">Alex</a>
</div>
</li>
<li><a href="quote.html">Get a Quote</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #922e2e;
margin-top: 4px;
margin-bottom: 4px;
}
li {
float: left;
}
li a, span {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#navMenu div {
position: absolute;
visibility: hidden;
}
#navMenu div a {
display: block;
width: 500px;
height: 50px;
background-color: #922e2e;
color: black;
text-align: center;
margin-bottom: 0px;
}
#navMenu div:hover {
display: block;
background-color: #7e8182;
}
您可以使用CSS
执行此操作,无需使用javaScript
。查看下面的更新代码段
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #922e2e;
margin-top: 4px;
margin-bottom: 4px;
}
li {
float: left;
}
li a, span {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#navMenu div {
position: absolute;
display: none;
background-color: #7e8182;
}
#navMenu div a {
display: block;
width: 200px;
height: 50px;
background-color: #922e2e;
color: black;
text-align: center;
margin-bottom: 0px;
}
#navMenu li:hover div{
display: block;
}
<nav>
<ul id="navMenu">
<li><a href="homepage.html">Home</a></li>
<li><span>About Us</span>
<div id="about">
<a href="Darwin.html">Darwin</a>
<a href="Alex.html">Alex</a>
</div>
</li>
<li><a href="quote.html">Get a Quote</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
不需要JS,只需要纯CSS。希望这可以帮助 ;)
nav
{
margin-top:15px
}
nav ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
nav ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
nav ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
nav ul li.current-menu-item
{
background:#ddd
}
nav ul li:hover
{
background:#f6f6f6
}
nav ul div
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
nav ul div li
{
float:none;
width:200px
}
nav ul div a
{
line-height:120%;
padding:10px 15px
}
nav ul li:hover > div
{
display:block
}
<nav>
<ul id="navMenu">
<li><a href="homepage.html">Home</a></li>
<li><a>About Us</a>
<div id="about">
<a href="Darwin.html">Darwin</a>
<a href="Alex.html">Alex</a>
</div>
</li>
<li><a href="quote.html">Get a Quote</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>