CSS 下拉菜单不起作用？
[英]CSS Dropdown menu not working?
问题描述
我一直在关注这个关于如何使用 css 创建下拉菜单的在线视频。 我跟着它，我的网站上没有任何下拉菜单的迹象。 这太令人沮丧了，因为我想克服它，所以我现在可以专注于后端开发。 希望大家能解决这个问题。
html代码：
<!DOCTYPE>
<html lang="en">
<head>
<title>MUSIC STORE</title>
<script src="js/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="jquery.bxslider.css"/>
<link rel="stylesheet" href="styles.css"/>
<link rel="shortcut icon" type="image/png" href="../Music Store/img/rockSign.png"/>
</head>
<body>
<div id="wrapper">
<header id="main_header">
<div id="callout">
<h2>☎ 111222333</h2>
<p>Michigan State Kawasaki Iceland</p>
</div>
<h1>MUSIC STORE</h1>
</header>
<div class="clearfix"></div>
<nav id="nav_menu">
<ul id="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">INSTRUMENTS</a>
<ul class="sub-menu">
<li><a href="#">ELECTRIC GUITARS</a></li>
<li><a href="#">BASS GUITARS</a></li>
<li><a href="#">DRUMS</a></li>
</ul>
</li>
<li><a href="#">AMPLIFIERS</a></li>
<li><a href="#">ACCESSORIES</a></li>
<li><a href="#">FEATURED ARTISTS</a></li>
</ul>
</nav>
<script src="js/jquery.bxslider.min.js"></script><!--For Image Slider-->
<div class="slide-wrap">
<div class="slider">
<ul class="slider1">
<li><img src="../Music Store/img/ibanez.jpg"/></li>
<li><img src="../Music Store/img/raven.jpg"/></li>
<li><img src="../Music Store/img/metallica.jpg"/></li>
</ul>
</div>
</div>
<script type="text/javascript">
$('.slider1').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
});
$('.slider2').bxSlider({
pager:false,
captions: true,
maxSlides: 3,
minSlides: 1,
slideWidth: 230,
slideMargin: 10
});
$('.slider3').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
controls:false,
});
</script>
<section class="one-third">
<div class="border_section">
<h3>NEW BASS AMPS THIS YEAR</h3>
<img src="../Music Store/img/fender_amps_bassbreaker.jpg"/>
<p>We would like to proudly announce the new shipment of fender bass amps that you all have been
waiting for. It will provide you that rich rock and roll tone like no other. Please check
out our bass amp section for more details.</p>
</div>
</section>
<section class="one-third">
<div class="border_section">
<h3>NEW FEATURE ARTIST</h3>
<img src="../Music Store/img/feature_markHolcomb.jpg"/>
<p>Behold Mark Holcomb from Periphery is in the house! Check out his info and new signature guitar
at our feature artists section. He will also be having a 20-minute guitar clinic on Oct 8 2016 right
here at Music Store.</p>
</div>
</section>
<section class="one-third">
<div class="border_section">
<h3>ATTENTION VOCALISTS!</h3>
<img src="../Music Store/img/GoMic.jpg"/>
<p>Check out the new Samson Go Mic Connect. It has a top-notch noise cancellation feature that can
definitely minimize the annoying sound that your dog makes while your recording. For more details,
Go to Accessories section.</p>
</div>
</section>
<div class="clearfix"></div>
<footer>
<p>©All Rights Reserved</p>
</footer>
</div>
</body>
</html>
CSS 代码：
@import url(http://fonts.googleapis.com/css?family=Black+Ops+One:400,700); /*--- Header --*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); /*--- Navigation --*/
*
{
margin: 0;
border: 0;
padding: 0;
}
body
{
background-image: url('../Music Store/img/background.png');
background-repeat: repeat-x;
}
.clearfix
{
clear:both;
}
#wrapper
{
margin: 0 auto;
max-width: 1120px;
overflow: auto;
border: 1px solid black;
}
#main_header
{
width: 100%;
font-family: 'Black Ops One', sans-serif;
background-color: black;
border: 1px solid black;
color: white;
}
#main_header h1
{
float: left;
font-size: 380%;
margin: -10% 0 0 2%;
}
#callout
{
margin: 50px 20px 0 0;
}
#callout h2{
text-align: right;
color: white;
}
#callout p{
text-align: right;
padding: 0%;
color: grey;
font-size: 20px;
margin-bottom: 3px;
}
#nav_menu
{
width: 100%;
height: 10%;
background-color: white;
}
#nav_menu li
{
display: inline-block;
margin: 20px 20px 20px 63px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bold;
}
#nav_menu li a
{
text-decoration: none;
color: black;
}
#nav_menu li a:hover
{
color: grey;
}
.sub-menu
{
position: absolute;
background-color: black;
list-style-type: none;
width: 124px;
padding-left: 0px;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
.sub-menu li
{
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
#nav_menu li:hover .submenu
{
opacity: 1;
}
.sub-menu li:hover
{
color: green;
background-color: yellow;
}
/*--- Start Image Slider --*/
.slider{
max-width: 1120px;
box-shadow: 1% 2% 5% 0 rgba(0, 0, 0, 0.07);
}
.slider1 img{
width: 100%;
margin: 0 auto;
}
.slider .bx-wrapper .bx-controls-direction a{
outline: 0 none;
position: absolute;
text-indent: -9999px;
top: 40%;
height: 71px;
width: 40px;
z-index: -1;
transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a{
z-index: 5;
}
.slider .bx-wrapper .bx-prev{
background: url("../Music Store/img/arrow_left.png") no-repeat 7px 9px;
left: 0px;
}
.slider .bx-wrapper .bx-prev:hover{
background: url("../Music Store/img/arrow_left.png") no-repeat 8px 15px;
}
.slider .bx-wrapper .bx-next{
background: url("../Music Store/img/arrow_right.png") no-repeat 10px 12px;
right: 0px;
}
.slider .bx-wrapper .bx-next:hover{
background: url("../Music Store/img/arrow_right.png") no-repeat 10px 17px;
}
/*--- End Image Slider --*/
.one-third img{
text-align: center;
max-width: 100%;
height: auto;
opacity: 0.9;
}
.border_section p{
font-family: 'Lato', sans-serif;
padding: 2%;
color: white;
text-align: justify;
}
.border_section h3
{
font-family: 'Open Sans', sans-serif;
text-align: center;
color: white;
text-transform: uppercase;
letter-spacing: 1%;
}
.border_section
{
border: 1px solid black;
background-color: black;
}
.one-third{
width: 27.35%;
float: left;
margin: 2% 0 3% 4.5%;
text-align: center;
background-color: white;
}
footer{
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
width: 100%;
height: 6%;
background-color: black;
overflow: auto;
}
footer p
{
margin-top: 1%;
color: white;
}
1 个解决方案
解决方案1
1 已采纳 2016-10-10 13:35:10
将此添加到您的 CSS 中：它将帮助您获得想要的结果。 当然，您仍然需要根据您的喜好进行调整。
/* Without this line, the submenu elements are black on black background */
#nav_menu .sub-menu li a {
color: #fff;
}
/* With this line you will remove the opacity:0; of the submenu when you hover the parent li */
#nav_menu li:hover .sub-menu {
opacity: 1;
}
/* Don't set a width so you have a better output */
#nav_menu li .sub-menu {
width: auto;
}
/* This lines make the submenu li dislay verticaly and not inline */
#nav_menu li .sub-menu li {
display: block;
}
编辑：
您应该使用display属性而不是更改opacity属性来显示/隐藏子菜单。 目前，子菜单只是透明的，但总是打开的。 如果您的菜单高度较大，您可以通过将鼠标悬停在幻灯片上打开时的位置来打开它。 通过使用display属性，您实际上是在隐藏它，并且只有当您将鼠标悬停在菜单元素上时才会打开它（应该如此）。
为此，您必须替换opacity: 0; 在您的.sub-menu类中： display: none;
然后更改代码opacity: 1; 在#nav_menu li:hover .sub-menu by : display: block; （在我之前给你的代码中）。
它将比使用opacity处理它更干净。
CSS的下拉菜单不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.