html - 导航栏下拉项目不保持可见

问题描述

终于把这一切都布置好了，运行起来，看起来像我想要的那样，在过去的 3 天里，我试图弄清楚为什么当你尝试从下拉菜单中选择一个项目时菜单会消失。我不知所措。我能够得到的最接近的是更改 ul ul{display: block;} 但是，当我这样做时，它会一直显示，而不仅仅是悬停。我已尝试尽可能回滚，但仍然找不到我更改的位置或内容，因为它曾经可以正常工作。帮助！

HTML：

   <!DOCTYPE html>
<html>
<head>
    <title>TestSite&reg;</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="images/octab.png" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

</head>

<!--BEGIN HEADER-->
<body>
<div class="titlebar">
    <div id="content" style="text-align:right">
    Controls Technical Support: 866-918-1100
    </div>
</div>

<div id="barcontent">
<img src="images/AAON_WattMasterLogo.png" alt="WattMaster Controls, Inc. ">
    <nav>
        <ul>
            <li>
                <a href="">First</a>
                <ul>
                <li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
                </ul>
            </li>
            <li>
                <a href="">Second</a>
                <ul>
                <li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
                </ul>
            </li>
            <li>
                <a href="">Third</a>

            </li>
            <li>
                <a href="">Fourth</a>

            </li>
            <li>
                <a href="">Fifth</a>
                <ul>
                <li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 3</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

<div id="content">
page content
</div>
</body>

CSS：

@import url(//fonts.googleapis.com/css?family=Volkhov:700,700italic,400italic,400);
@import url(http://fonts.googleapis.com/css?family=Oswald);
@font-face {
font-family : "'Oswald'";
font-style : normal;
font-weight : 400;
src : local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/Y_TKV6o8WovbUd3m_X9aAA.ttf) format('truetype');
}
.err
{
    font-family : Verdana, Helvetica, sans-serif;
    font-size : 12px;
    color: red;
}
body {
    font-family: Arial,Helvetica,sans-serif;
    background-color: #F6F6F6;
    margin: 0 auto;
    }
#content{
    max-width: 1175px;
   margin: 10px auto;
}
#barcontent{
    max-width: 1175px;
   margin: 10px auto;
}
#barcontent img{
    width: 12%;
}
.titlebar{   
    background-color: #e6e6e6;
    display: inline-block;
    width: 100%;    
}
/*NAVIGATION BAR CSS*/
nav{
display: flex;
/*background-color: white;*/
width: 85%;
float: right;
}


    /*navbar link color*/
        a {
            color: black;
            text-decoration: none;
            display: block;
        }
    /*top bar selections*/
        ul {
            background: #fff;
            float: left;
            border: 5px solid #eeeeee;
            list-style: none;
            width: 100%;
            margin: 10px auto;
            height: 50px;
            line-height: 50px;
            padding: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            flex-wrap: nowrap;
            float:right;
            }



    /*top bar division of selections*/
        li {
            position: relative;
            list-style: none;
            display: inline;
            float: left;
            width: inherit;
            text-align: center;
            border-right: 1px solid #eeeeee;
        }



        ul li:hover >a{
            background:#1475B3;
            color: white;
            list-style-type: none;

        }
        ul ul:hover{
                    display: block;}
        ul ul li{
            display: block;
            padding: 10px 0px;
            color: #a9a9a9;
            text-transform: uppercase;
            font: 11px/1.2em "Helvetica Neue", Helvetica, Arial, sans-serif;
            text-align: center;
            background: linear-gradient(to bottom,#f7f7f7 0%,#ffffff 100%);
            width: 100%;

        }


        ul ul {
            position: absolute;
            left: 0;
            top: 100%;
            display: none;
            border: none;
        }
        /*sets color of drop down links when hovered over*/
        ul ul li:hover{     
            background:#1475B3;

        }
        ul ul li:hover > a{
            color:white;
            display: block;
            }



        li:hover > ul {
            display: block;

        }


        p {
            clear: left;
            padding-top: 1em;
        }

@media only screen and (max-width: 768px) {
    nav{
display: flex;
/*background-color: white;*/
width: 100%;
float: right;
}
#barcontent img{
    width: 50%;
    display: block;
    margin: auto;
}

}

标签： htmlcssdrop-down-menunavigation

html - 导航栏下拉项目不保持可见

问题描述

解决方案

推荐阅读