我有一个 jQuery 和 css 下拉菜单，但我遇到了问题。动画在其上完美运行。但是，我无法将其正确定位。当屏幕尺寸改变时，它不会自行调整。我遇到的另一个问题是我已经将 z-index 设置为堆叠在其他所有内容的“顶部”，但它并没有这样做。任何人都可以帮助解决这些问题吗？由于某种原因，我包含的笔不能正常工作，但我还是会包含它。 http://codepen.io/RobbyT15/pen/Dkswt
HTML
<body>
<div id="wrapper">
<header>
<nav>
<ul class="mainMenu">
<li><a href="index.html">Home / About Me</a></li>
<li><a href="work.html">Work Experience</a>
<ul class="subMenu">
<li><a href="#">Army(Active Duty)</a></li>
<li><a href="#">Army(Reserves)</a></li>
<li><a href="#">Geogria Southern</a></li>
<li><a href="#">The Weather Channel</a></li>
<li><a href="#">Flight Safety</a></li>
<li><a href="#">Freelance</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
</header>
<div id="content">
<div id="imageHolder">
<div id="imageBorder"></div>
<img src="images/me.jpg" />
</div>
<h2>About Me</h2>
<p>I have been in the Web Development/Web Design field for a little over two years. I am currently a student at Georgia Southern University, enrolled in their online Information Technology program and I'm scheduled to graduate in May 2014. Before starting my college career, I served nine years in the U.S. Army where I earned two Good Conduct Medals, two Army Commendation Medals, an Army Reserve Components Achievement Medal, and two Honorable Discharges.</p>
<p>My experience with Web Development spans both the professional field and freelance. I worked for Georgia Southern University for two years as their student Web Developer where I was responsible for developing new applications for the school's new template and integrating existing sites into the new design while making the content look visually appealing and developing both front end and back end functionality. I also worked briefely for The Weather Channel as their Contracted Android Designer where I was responsible for designing an updated version of the tablet app as well as numerous other design projects. I am currently working as a contracted front end web developer with FlightSafety International.</p>
<p>I have experience working in most Web Design and Development languages including HTML, HTML5, CSS3, Javascript, jQuery, jQuery Mobile, and XML. I also have experience working with the Java programming language and limited experience with AJAX and JSON.</p>
<h2>Hobbies</h2>
<p>While I was in the Army, I received my PADI Advanced Open Water dive certification. After not diving for a few years, I realized that I missed participating in the underwater adventures and decided to begin diving again. I plan on continuing to advance my interest in this hobby and would like to, one day, achieve my Master Scuba Diver Certification.</p>
<p>I also enjoy coaching little league soccer and baseball when I have the opportunities to do so. As a child, I played both sports as a little leaguer and in high school, and club baseball while in college. After getting injured and realizing that I had been away from the sports for too long between high school and college, I decided to focus on teaching rather than play them.</p>
</div>
</div>
</body>
CSS
body{
background-color: #757575;
color: #FFFFFF;
}
header{
position: absolute;
background-color: #000000;
height: 65px;
top: -68px;
left: 0;
right: 0;
border-bottom: 3px inset #DDAA00;
font-size: 14px;
z-index: 0;
}
img{
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
nav{
position: absolute;
height: 55px;
top: 5px;
left: 0;
right: 0;
bottom: 5px;
color: #DDAA00;
}
nav ul{
text-align: center;
margin-top: 13px;
font-size: 1.25em;
}
nav ul li{
display: inline;
list-style: none;
padding-right: 50px;
text-decoration: none;
}
nav ul li a{
text-decoration: none;
}
nav ul li a:link{
color: #DDAA00;
}
nav ul li a:visited{
color: #757575;
}
nav .subMenu{
position: absolute;
display: none;
margin: 0;
padding: 0;
padding-top: 5px;
left: 35%;
right: 0;
width: 160px;
background-color: #000000;
z-index: 99;
}
nav .subMenu li{
position: relative;
float: left;
margin: 0;
padding: 0;
color: #FFFFFF;
width: 100%;
font-size: .8em;
border-bottom: 3px inset #DDAA00;
z-index: 99;
}
#wrapper{
position: absolute;
top: 68px;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
#content{
position: absolute;
float: left;
top: 75px;
left: 15%;
right: 20%;
font-size: 16pt;
z-index: 0;
}
#imageHolder{
position: relative;
float: left;
width: 150px;
height: 200px;
padding-right: 25px;
border-radius: 25px;
z-index: 0;
}
#imageBorder{
position: absolute;
float: left;
width: 150px;
height: 200px;
border-radius: 25px;
box-shadow: 0px 2px 50px 10px #757575 inset;
z-index: 1;
}
#imageHolder img{
border-radius: 25px;
width: 150px;
}
#content p{
text-align: justify;
}
.example{
position: relative;
display: inline-block;
float: left;
margin: 25px;
width: 110px;
height: 145px;
font-size: 0.5em;
z-index: 0;
}
.example img{
position: relative;
float: left;
display: block;
width: 100%;
height: 75%;
}
.example p{
position: relative;
float: left;
display: block;
cursor: pointer;
}
#popup{
position: absolute;
display: none;
top: 10%;
left: 25%;
right: 25%;
bottom: 10%;
background-color: #757575;
border-radius: 25px;
box-shadow: 15px 15px 25px #000000;
z-index: 10;
}
#mask{
position: absolute;
display: none;
top: -68px;
left: 0;
right: 0;
bottom: 0;
background-color: #FFFFFF;
opacity: 0.75;
z-index: 9;
}
.popImgHolder{
position: absolute;
top: 0;
left: 25%;
width: 50%;
height: 45%;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.popImgHolder img{
width: 100%;
height: 100%;
border-radius: 25px;
}
.popTxtHolder{
position: absolute;
top: 45%;
left: 0;
width: 100%;
height: 55%;
text-align: justify;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
.popTxtHolder p{
font-size: 1.15em;
padding-left: 25px;
padding-right: 25px;
}
.description{
display: none;
}
JavaScript
$(document).ready(function(){
$('#wrapper').append('<div id="mask"></div>');
$('#wrapper').append('<div id="popup"><div class="popImgHolder"></div><div class="popTxtHolder"></div></div>');
$('.example').append('<p>Click here to read about my experience<p>');
$("html").niceScroll();
var popTxtHolder = $('.popTxtHolder');
$('.example p').on('click', function(){
var text = $(this).prev('.description').find('p');
var images = $(this).parents('.example').find('img:first-child');
images.clone().appendTo('.popImgHolder');
text.clone().appendTo('.popTxtHolder');
$('#popup, #mask').show();
popTxtHolder.niceScroll({cursorwidth: '2px'});
})
$('#popup, #mask').click(function(){
$('#popup, #mask').hide();
$('.popTxtHolder, .popImgHolder').children().remove();
})
$('.mainMenu li').on('mouseover', function(){
$('.subMenu').show();
$(this).on('mouseout', function(){
$('.subMenu').hide();
})
})
})
最佳答案
看这个demo
我是创造者，
不需要 js
HTML:
<body>
<ul class="menu">
<li><a href="#">My Dashboard</a>
<ul>
<li><a href="#" class="learn">Learn</a>
</li>
<li><a href="#" class="teach">Teach</a>
</li>
<li><a href="#" class="Mylibrary">My Library</a>
</li>
</ul>
</li>
<li><a href="#">Likes</a>
<ul>
<li><a href="#" class="Pics">Pictures</a>
</li>
<li><a href="#" class="audio">Audio</a>
</li>
<li><a href="#" class="Videos">Videos</a>
</li>
</ul>
</li>
<li><a href="#">Views</a>
<ul>
<li><a href="#" class="documents">Documents</a>
</li>
<li><a href="#" class="messages">Messages</a>
</li>
<li><a href="#" class="signout">Videos</a>
</li>
</ul>
</li>
<li><a href="#">account</a>
<ul>
<li><a href="#" class="SI">Sign In</a>
</li>
<li><a href="#" class="Reg">Register</a>
</li>
<li><a href="#" class="Deactivate">Deactivate</a>
</li>
</ul>
</li>
<li><a href="#">Uploads</a>
<ul>
<li><a href="#" class="Pics">Pictures</a>
</li>
<li><a href="#" class="audio">Audio</a>
</li>
<li><a href="#" class="Videos">Videos</a>
</li>
</ul>
</li>
<li><a href="#">Videos</a>
<ul>
<li><a href="#" class="Add">Add</a>
</li>
<li><a href="#" class="delete">Delete</a>
</li>
</ul>
</li>
<li><a href="#">Documents</a>
<ul>
<li><a href="#" class="Add">Upload</a>
</li>
<li><a href="#" class="delete">Download</a>
</li>
</ul>
</li>
</ul>
</body>
CSS:
.menu, .menu ul, .menu li, .menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
body {
max-width:110%;
margin-left:0;
}
.menu {
height: 40px;
width:110%;
margin-left:-4px;
margin-top:-10px;
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
.menu li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a {
border-left: none;
}
.menu li:last-child a {
border-right: none;
}
.menu li:hover > a {
color: #8fde62;
}
.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul {
opacity: 1;
}
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a {
border: none;
}
随心所欲地调整标签的大小，这很好
关于javascript - jQuery 和 CSS 下拉菜单无法正确堆叠和定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23896687/