jQuery和CSS下拉菜单无法正确堆叠和定位

Question

I have a jQuery & css dropdown menu that I'm having issues with. 我遇到了jQuery＆CSS下拉菜单。 The animation works perfectly on it. 动画可以完美播放。 However, I'm not able to get it to position correctly. 但是，我无法使其正确定位。 It won't adjust itself when the screen size changes. 屏幕尺寸更改时，它不会自行调整。 Another issue I'm having is that I've got the z-index set to stack 'on top' of everything else, yet it's not doing so. 我遇到的另一个问题是，我已经将z-index设置为“堆叠”在所有其他事物的顶部，但事实并非如此。 Can anyone help with these issues? 任何人都可以帮助解决这些问题吗？ The pen I'm including doesn't work correctly for some reason but I'll include it anyway. 我包括的笔由于某种原因不能正常工作，但无论如何我都会把它包括在内。 http://codepen.io/RobbyT15/pen/Dkswt http://codepen.io/RobbyT15/pen/Dkswt

HTML 的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 的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 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();
        })
    })
})

Answer 1

see this demo 看这个演示

im the creator, no js required 我是创作者，不需要js
html: 的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: 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;
}

resize tabs as much as you want, its good 根据需要调整标签的大小，这很好

jQuery和CSS下拉菜单无法正确堆叠和定位

问题描述

1 个解决方案

解决方案1
0

jQuery和CSS下拉菜单无法正确堆叠和定位

问题描述

1 个解决方案

解决方案1 0

解决方案1
0