我正在尝试学习网页开发,我正在为我的某个网站开发布局。
我已经按照有关使用HTML和CSS构建广告下拉菜单的教程,因为我还没有真正进入JS,除了一个问题之外它工作得很好。
当我点击下拉菜单中的链接时,它会关闭下拉菜单(这很好),但它不会转到新页面。这是我的页面和代码。
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rich Producer | Rich Sound</title>
<meta name="Keywords" content="How to make beats, hip hop music production, rap music production, trap music production, download drum kits, download trap drums, massive presets, massive sound bank, trap sample pack, music production tutorials">
<meta name="Description" content="Only the best drum kits, loop packages, massive presets, tutorials, and more for hip hop and trap music producers.">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="body-background">
<nav class="container" id="nav">
<div class="row">
<div class="col-12 no-pad">
<a href="index.html" id="logolink"><div id="logo"><h1>Rich Producer</h1><h5 id="slogan">When Only the Best Will Do. . .</h5></div></a>
<ul id="navlist" class="nav">
<li class="nav-item dropdown">
<a href="#"> Drum Kits </a>
<div class="dropdown-container">
<div class="dropdown-inner">
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
<a href="#">808 & Trap Kits</a>
</li>
</ul>
</div><!-- END DROP INNER -->
</div><!-- END DROP CONTAINER -->
</li>
<li class="nav-item dropdown">
<a href="#"> Presets & Loops </a>
<div class="dropdown-container">
<div class="dropdown-inner">
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
<a href="#">Ni Massive Presets</a>
</li>
<li class="dropdown-menu-item">
<a href="#">Loop Packs</a>
</li>
</ul>
</div><!-- END DROP INNER -->
</div><!-- END DROP CONTAINER -->
</li>
<li class="nav-item dropdown">
<a href="#"> Motivation </a>
<div class="dropdown-container">
<div class="dropdown-inner">
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
<a href="beat-making-videos.html">Beat Making Videos</a>
</li>
<li class="dropdown-menu-item">
<a href="#">Producer Interviews</a>
</li>
<li class="dropdown-menu-item">
<a href="#">Music Production Tutorials</a>
</li>
</ul>
</div><!-- END DROP INNER -->
</div><!-- END DROP CONTAINER -->
</li>
<li class="nav-item"><a href="#"> Contact </a></li>
</ul>
</div><!--END NAVCOLUMN -->
</div><!-- END ROW 1 (NAVIGATION) -->
</nav>
<div class="container content">
<div class="row">
<div class="col-8">
<h1 class="text-center">Music Production Drum Kits, Synth Presets, Sound Packs, Tutorials and More!</h1>
<hr>
<p class="mainpagepitch">From sounds to video tutorials, to the best producers making beats, Rich Producer has it all.<br>
Did we mention that we only post the best stuff?<br> That way you don't have to search through junk sounds and videos.<br>
Take a look around the site and find out more.<br>
With our help, you don't have to be a rich producer to sound like one.<br>
</p><hr>
</div><!-- END COLUMN 1 of ROW 2 (Main Content)-->
<div class="col-4">
<h3 class="text-center">No spam - Ever!</h3>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//learncalculusfree.us12.list-manage.com/subscribe/post?u=56d231ceb905ccf52ff5b6d5b&id=b623db0c1c" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Enter your email and Rich Producer will send you:
</label><br>
<img src="img/LoudPackCover-thumb.png" alt="50 Free Massive Patches and Massive Presets" class="img-responsive img-center">
<ul id="signup-list" class="text-center">
<li>-50 Free Massive Presets (delivered instantly) </li>
<li>-In depth, high quality tutorials and beat breakdowns </li>
<li>-Free drum kits so hot they'll burn your finger tips! </li>
</ul>
<div class="text-center">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_56d231ceb905ccf52ff5b6d5b_b623db0c1c" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Submit" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div><!-- END CENTER FOR BUTTON AND INPUT -->
</div>
</form>
</div><!--End mc_embed_signup-->
</div><!-- end signup column -->
</div><!--END ROW 2 (CONTENT) -->
</div><!-- END CONTAINER -->
</div><!--END BODY-BACKGROUND -->
</body>
</html>
CSS
body{
/*smin-height: 900px;*/
}
#body-background{
background-image: url("../img/studiobg.jpg");
background-size: 100%;
min-height: 1916px;
background-attachment: fixed;
}
.container{
width: 100%;
max-width: 1200px;
margin: auto;
background-color: rgba(255,255,255,.9);
}
/* PUSHES CONTENT DOWN TO MAKE GAP FROM NAV BAR */
.content{
margin-top: 12px;
}
.text-center{
text-align: center;
}
.row::before, .row::after{
content: "";
display: table;
clear: both;
}
[class*='col-'] {
float: left;
min-height: 1px;
width: 8.33%;
/*-- our gutter --*/
padding: 12px;
}
.no-pad{
padding: 0px;
}
.col-1{width: 8.33%;}
.col-2{ width: 16.66%;}
.col-3{ width: 21.99%;}
.col-4{ width: 33.32%;}
.col-5{ width: 41.65%;}
.col-6{ width: 49.98%;}
.col-7{ width: 58.31%;}
.col-8{ width: 66.64%;}
.col-9{ width: 74.97%;}
.col-10{width: 83.3%;}
.col-11{width: 91.63%;}
.col-12{width: 100%;}
.container *{
box-sizing: border-box;
}
@media all and (max-width: 800px){
.col-1{ width: 16.66%;}
.col-2{ width: 33.32%;}
.col-3{ width: 66.64%;}
.col-4{ width: 100%;}
.col-5{ width: 100%;}
.col-6{ width: 100%;}
.col-7{ width: 100%;}
.col-8{ width: 100%;}
.col-9{ width: 100%;}
.col-10{ width: 100%;}
.col-11{ width: 100%;}
.col-12{ width: 100%;}
}
@media all and (max-width: 650px){
.col-1{width: 50%;}
.col-2{width: 100%;}
.col-3{width: 100%;}
.col-4{width: 100%;}
.col-5{width: 100%;}
.col-6{width: 100%;}
.col-7{width: 100%;}
.col-8{width: 100%;}
.col-9{width: 100%;}
.col-10{width: 100%;}
.col-11{width: 100%;}
.col-12{width: 100%;}
}
/************
STLYE NAVIGATION LOGO
************/
div#logo{
text-align: center;
color: #333;
}
#logolink{
font-family: 'Alfa Slab One', cursive;
font-size: 2em;
text-decoration: none;
color: black;
display: block;
padding: 20px 0px 20px;
}
#slogan{
font-size: .8em;
font-family: 'Shadows Into Light Two', cursive;
}
/************
START NAV LINK GROUP
*************/
#navlist {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0;
overflow: hidden;
background-color: #333;
}
#navlist>li{
float: left;
}
#navlist li a{
display: block;
color: #ddd;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#navlist li:last-child{
border-right: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
/* Sets active link color to #111 (black) */
.active{
background-color: #111;
}
/* DROP STYLING */
.dropdown-container{
position: absolute;
max-height: 0;
overflow: hidden;
background: #333;
}
ul.dropdown-menu{
list-style-type: none;
margin: 0;
padding: 0;
}
.dropdown-menu li a{
display: inline-block;
min-width: 200px;
border-bottom: 1px solid #111;
}
.dropdown a:focus{
background-color: #111;
}
.dropdown a:focus ~ .dropdown-container{
max-height: 500px;
transition: max-height 0.5s ease-in;
-webkit-transition: max-height 0.5s ease-in;
-mox-transition: max-height 0.5s ease-in;
}
/*END NAV STYLING*/
.mainpagepitch{
line-height: 200%;
}
#signup-list{
list-style-type: none;
padding: 0;
line-height: 170%;
}
#signup-list li{
margin-left: 8px;
}
h1, h2, h3, h4, h5, h6, p, ul, label{
color: #333;
}
/****************
RESPONSIVE IMG
****************/
.img-responsive{
max-width: 100%
height: auto;
}
.img-center{
display: block;
margin-left: auto;
margin-right: auto;
}
https://jsfiddle.net/fy0cmkmt/
**目前我只链接到Motivation&gt;下的页面击败制作视频,但我认为你甚至可以告诉它甚至不打算打开链接。
答案 0 :(得分:0)
是的,它不起作用,因为当您按下鼠标时,它会触发onmousedown
事件,这会使“动机”<a>
标记失焦,使下拉菜单崩溃,隐藏所需内容链接。该链接仅在您可以在其上完成mousedown 和鼠标事件(合并到mousepress事件)时才有效。
简而言之,单击时无法使用纯CSS下拉菜单。我建议尝试一下:悬停菜单。