我的下拉菜单未显示

时间：2018-01-16 15:12:19

标签： html css

我正在尝试在HTML和CSS中创建一个下拉菜单，它不能正常运行，因为我期待它。我不知道它有什么问题。

我试图让菜单在悬停时显示父项<ul>标记中的项目子集，但它无法正常工作。儿童物品根本不显示（仅显示父物品）或子物品以奇怪的方式遍布整个页面。

我的HTML，CSS和JavaScript代码：

What I'm trying to create（不是我的视频）。

＆＃13;
＆＃13; 
function copyText(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    try {
        document.execCommand("copy");
    } catch(err) {
        console.log(err);
    }
    $temp.remove();
}

function copyMessage() {
    console.log("Triggered change");
    $("#note").fadeIn("fast");
    $("#note").fadeOut("slow");
}
＆＃13; 
 @import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Raleway', sans-serif;
    text-align: center;
}

img {
    max-width: 100% height: auto;
}

.container {
    width: 95%;
    margin: 0 auto;
}

/* Typography
========*/

.title {
    font-size: 2.5rem;
    color: #b21acs;
}

.title span {
    font-size: 3.75rem;
    font-weight: 300;
    display: block;
}

.title span2 {
    font-size: 2rem;
    font-weight: 300;
    display: block
}

.title span3 {
    display: none;
}

.note {
    display: none;
    color: #b21acd;
}

/*button 
======== */

.button {
    display: inline-block;
    font-size: 1.15rem;
    text-decoration: none;
    text-transform: uppercase;
    border-width: 5px;
    border-style: solid;
    padding: .5em 1.75em;
    border-color: #b21acd;
    color: #FFF;
    background-color: transparent;
}

/*Header
======== */

header {
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 0em;
}

nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    text-align: center;
    background-color: transparent;
    display: inline-block;
}

nav ul li ul {
    border-bottom: none;
    height: 86px;
    line-height: 86px;
    font-size: 14px;
    display: inline-block;
    float: left;
    margin: 0 auto;
}

nav ul li ul li {
    display: none; 
    padding: 0px;
    margin: 0px;
    opacity: .8;
    list-style: none;
    background-color: black;
    float: left;
    line-height: 40px;
    text-align: center;
    font-size: 12px;
    position: absolute;
    z-index: 1;     
}

nav ul li ul li a{
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: #000
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin: 1em;
}

nav a {
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    font-size: .8rem;
    padding: .5em;
    color: #FFF;
}

nav a:hover,
nav a:focus {
    color: #b21acd;
}

nav ul li ul:hover nav ul li ul li {
    display: inline-block;
}

nav .current {
    color: #b21acd;
}

/* home-hero
======= */

.home-hero {
    background-image: url(../assets/home-hero_background.png);
    padding: 10em 0;
    font-weight: 700;
    background-color: #000;
    color: #FFF;
}

/* Footer
========= */

footer {
    background-color: #b21acd;
    color: #FFF;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width-device-width, initial-scale=1">
        <title>TrigonMC | Home</title>
        <link href="css/styles.css" rel="stylesheet" type="text/css">
        <link rel="shortcut-icon" href="assets/favicon.ico" type="image/x-icon">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/copyAndChange.js"></script>
    </head>
    <body>
        <header>
            <img src="assets/logo_transparent.png" alt="TrigonMC Network Logo" class="logo">
            <nav>
                <ul>
                    <li><a class="current" href="#">Home</a></li>
                    <li><a href="./forums">Forums</a>
                        <ul>
                            <li><a href="#">Reports</a></li>
                        </ul>
                    </li>
                    <li><a href="./bans">Punishments</a>
                        <ul>
                            <li><a href="#">Warnings</a></li>
                            <li><a href="#">Mutes</a></li>
                            <li><a href="#">Kicks</a></li>
                            <li><a href="#">Bans</a></li>
                            <li><a href="#">Temp-Mutes</a></li>
                            <li><a href="#">Temp-Bans</a></li>
                            <li><a href="#">IP-Bans</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Apply</a>
                        <ul>
                            <li><a href="#">Apply For Staff</a></li>
                            <li><a href="#">Apply For Builder</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Videos</a>
                        <ul>
                            <li><a href="#">ExZiByte's Livestream</a></li>
                            <li><a href="#">GameWolf's Livestream</a></li>
                            <li><a href="#">Placeholder 1</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
        <section class="home-hero">
            <div class="container">
                <h1 class="title">TrigonMC Network
                    <span>We Support</span>
                    <span2>Versions 1.8 - 1.12.2</span2>
                    <span3 id='ip'>play.trigonmc.com</span3>
                </h1>
                <button id='ipButton' class="button button-accent" onclick="copyText('#ip'); copyMessage();">Copy the IP of the server!</button>
                <div class="note">
                    <p>Copied!</p>
                </div>
            </div>
        </section>
        <section class="home-servers">
            <div class="home-servers-textbox">
                <h1>Servers we have</h1>
                <h3>Creative</h3>
                <h5>Coming Soon</h5>
                <h3>Prison</h3>
                <h5>Coming Soon</h5>
                <h3>Skyblock</h3>
                <h5>Coming Soon</h5>
                <h3>Survival</h3>
                <h5>Coming Soon</h5>
                <h3></h3>
            </div>
        </section>
        <footer>
            <p>TrigonMC Gaming Group Copyright © 2018</p>
            <p>All images Copyright © of respectful owners</p>
        </footer>
    </body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

这是你的css的问题

nav ul li ul:hover nav ul li ul li {
   display: inline-block;
}

基本上你的布局是这样的：

nav -> ul -> li -> ul -> li...

您告诉浏览器的内容是这样的：

nav -> ul -> li -> ul -> nav -> ul -> li -> ul -> li...

哪个肯定不匹配。因此，子菜单仍然是隐藏的。

那么，该怎么做。只需用这个

替换那一点规则 
nav ul li:hover ul li{
  display: block;
}

此外，将链接文本的颜色更改为不会与背景混合的内容

nav ul li ul li a{
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: #fff
}

尝试围绕类编写样式表。它将帮助您在将来避免此类问题。

function copyText(element){
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    try{
        document.execCommand("copy");
    }catch(err){
        console.log(err);
    }
    $temp.remove();
}
function copyMessage(){
    console.log("Triggered change");
    $("#note").fadeIn("fast");
    $("#note").fadeOut("slow");
}
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');

 * {
     box-sizing: border-box;
 }

 body {
     margin: 0;
     font-family: 'Raleway', sans-serif;
     text-align: center;
 }

 img {
     max-width: 100% height: auto;
 }

 .container {
     width: 95%;
     margin: 0 auto;
 }

 /* Typography
========*/

 .title {
     font-size: 2.5rem;
     color: #b21acs;
 }

 .title span {
     font-size: 3.75rem;
     font-weight: 300;
     display: block;
 }

 .title span2 {
     font-size: 2rem;
     font-weight: 300;
     display: block
 }

 .title span3 {
     display: none;
 }

 .note {
     display: none;
     color: #b21acd;
 }

 /*button 
======== */

 .button {
     display: inline-block;
     font-size: 1.15rem;
     text-decoration: none;
     text-transform: uppercase;
     border-width: 5px;
     border-style: solid;
     padding: .5em 1.75em;
     border-color: #b21acd;
     color: #FFF;
     background-color: transparent;
 }

 /*Header
======== */

 header {
     position: absolute;
     left: 0;
     right: 0;
     margin-top: 0em;
 }

 nav ul {
     margin: 0px;
     padding: 0px;
     list-style: none;
     text-align: center;
     background-color: transparent;
     display: inline-block;
 }

 nav ul li ul {
     border-bottom: none;
     height: 86px;
     line-height: 86px;
     font-size: 14px;
     
     float: left;
     margin: 0 auto;
 }

 nav ul li ul li {
     display: none;
     padding: 0px;
     margin: 0px;
     opacity: .8;
     list-style: none;
     background-color: black;
     float: left;
     line-height: 40px;
     text-align: center;
     font-size: 12px;
     position: absolute;
     z-index: 1; 
     
 }

nav ul li ul li a{
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: #fff
}

 nav ul {
     margin: 0;
     padding: 0;
     list-style: none;
 }

 nav li {
     display: inline-block;
     margin: 1em;
 }

 nav a {
     font-weight: 900;
     text-decoration: none;
     text-transform: uppercase;
     font-size: .8rem;
     padding: .5em;
     color: #FFF;
 }

 nav a:hover,
 nav a:focus {
     color: #b21acd;
 }

nav ul li:hover ul li{
    display: block;
}
 nav .current {
     color: #b21acd;
 }

 /* home-hero
======= */

 .home-hero {
     background-image: url(../assets/home-hero_background.png);
     padding: 10em 0;
     font-weight: 700;
     background-color: #000;
     color: #FFF;
 }

 /* Footer
========= */

 footer {
     background-color: #b21acd;
     color: #FFF;
 }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width, initial-scale=1">
    <title>TrigonMC | Home</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <link rel="shortcut-icon" href="assets/favicon.ico" type="image/x-icon">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/copyAndChange.js"></script>
</head>

<body>

    <header>
        <img src="assets/logo_transparent.png" alt="TrigonMC Network Logo" class="logo">
        <nav>
        <ul>
            <li><a class="current" href="#">Home</a></li>
            <li><a href="./forums">Forums</a>
                <ul>
                    <li><a href="#">Reports</a></li>
                </ul>
            </i>
            <li><a href="./bans">Punishments</a>
                <ul>
                    <li><a href="#">Warnings</a></li>
                    <li><a href="#">Mutes</a></li>
                    <li><a href="#">Kicks</a></li>
                    <li><a href="#">Bans</a></li>
                    <li><a href="#">Temp-Mutes</a></li>
                    <li><a href="#">Temp-Bans</a></li>
                    <li><a href="#">IP-Bans</a></li>
                </ul>
            </li>
            <li><a href="#">Apply</a>
                <ul>
                    <li><a href="#">Apply For Staff</a></li>
                    <li><a href="#">Apply For Builder</a></li>
                </ul>
            </li>
            <li><a href="#">Videos</a>
                <ul>
                    <li><a href="#">ExZiByte's Livestream</a></li>
                    <li><a href="#">GameWolf's Livestream</a></li>
                    <li><a href="#">Placeholder 1</a></li>
                </ul>
            </li>

        </ul>
    </nav>
    </header>

    <section class="home-hero">
        <div class="container">
            <h1 class="title">TrigonMC Network
                <span>We Support</span>
                <span2>Versions 1.8 - 1.12.2</span2>
                <span3 id='ip'>play.trigonmc.com</span3>
            </h1>

            <button id='ipButton' class="button button-accent" onclick="copyText('#ip'); copyMessage();">Copy the IP of the server!</button>
            <div class="note">
                <p>Copied!</p>
            </div>
        </div>
    </section>

    <section class="home-servers">
        <div class="home-servers-textbox">
            <h1>Servers we have</h1>
            <h3>Creative</h3>
            <h5>Coming Soon</h5>
            <h3>Prison</h3>
            <h5>Coming Soon</h5>
            <h3>Skyblock</h3>
            <h5>Coming Soon</h5>
            <h3>Survival</h3>
            <h5>Coming Soon</h5>
            <h3></h3>
        </div>
    </section>
    <footer>
        <p>TrigonMC Gaming Group Copyright © 2018</p>
        <p>All images Copyright © of respectful owners</p>
    </footer>
</body>

</html>

相关问题
最新问题