Question

最后将所有这些布局好了，可以正常运行并按照我想要的方式进行布局，在过去的三天里，我试图弄清楚为什么当您尝试从下拉菜单中选择一个项目时菜单消失了。我很茫然。我能够获得的最接近的结果是更改ul ul {display：block;}但是，当我这样做时，它始终都是显示的，而不仅仅是悬停显示。我已尽力回滚，但STILL找不到我更改的位置或更改，因为它可以正常使用。帮助！

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;
}

}

Answer 1

它只是因为缺少href值而消失了。在屏幕截图中查看

如果不想登陆任何其他页面，应该链接此链接。希望对您有帮助。

<a href="#">Link 1</a>

导航栏下拉项不可见

1 个答案: