下拉菜单元素不显示

Question

我正在制作一个使用一组图像作为菜单的网站。

我能够让一侧正确显示下拉菜单（在本例中为滑出式菜单）。但是即使两面完全相同，另一面也不会在鼠标悬停时显示菜单。

我看了最后一个小时的代码，就是找不到问题所在。

谢谢:)

* {
    box-sizing: border-box;
}

h1 {
    font-size: 50px;
    color: aliceblue
}

.topbar{
    margin-top: 0px;
    padding: 1px;
    background-color:#605E5E;
    border-bottom-style:inset;
    border-bottom-color: #888888;
}

.touch-menu{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eda954+0,e5933b+29,e59f54+56,e89230+79,e89230+91,e89230+100 */
    background: rgb(237,169,84); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(237,169,84,1) 0%, rgba(229,147,59,1) 29%, rgba(229,159,84,1) 56%, rgba(232,146,48,1) 79%, rgba(232,146,48,1) 91%, rgba(232,146,48,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(237,169,84,1) 0%,rgba(229,147,59,1) 29%,rgba(229,159,84,1) 56%,rgba(232,146,48,1) 79%,rgba(232,146,48,1) 91%,rgba(232,146,48,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(237,169,84,1) 0%,rgba(229,147,59,1) 29%,rgba(229,159,84,1) 56%,rgba(232,146,48,1) 79%,rgba(232,146,48,1) 91%,rgba(232,146,48,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eda954', endColorstr='#e89230',GradientType=0 ); /* IE6-9 */
    display: flex;
    padding: 10px;
}

ul {
    text-align: center;
    list-style-type: none;
    margin: 10px;
    vertical-align: middle;
}

.slideout-content-top-left, .slideout-content-bottom-left {
    display: none;
    height: 95%;
    margin: 10px 0px 10px 0px;
    min-width: 16px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    background-color: #736E6F;
    z-index: 1;
}

.slideout-content-top-right, .slideout-content-bottom-right {
    display: none;
    height: 95%;
    margin: 10px 10px 10px 0px;
    background-color: #736E6F;
    min-width: 16px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    vertical-align: middle;
}


.menu-top-right :hover + .slideout-content-top-right , .menu-bottom-right :hover + .slideout-content-bottom-right  {
    display: inline-block;
}

.slideout-content-bottom-right:hover , .slideout-content-top-right:hover {
    display: inline-block;
}

.menu-top-left :hover + .slideout-content-top-left , .menu-bottom-left :hover + .slideout-content-bottom-left {
    display: inline-block;
}

.slideout-content-bottom-left:hover , .slideout-content-bottom-left:hover {
    display: inline-block;
}


.touch-menu img:hover {
    filter: brightness(1.25);
}

.column {
    flex: 50%;
    display: flex;
    flex-direction: column;
    vertical-align: middle;
}

.menu-top-left , .menu-bottom-left , .menu-bottom-right, .menu-top-right {
    flex: 50%;
    height: 100%;
}


.menu-bottom-left img, .menu-top-left img{
    width: 50%;
    height: 95%;
    float: right;
    margin: 10px 10px 10px 0px;
}

.menu-bottom-right img , .menu-top-right img {
    width: 50%;
    height: 95%;
    float: left;
    margin: 10px 0px 10px 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Heter Iska</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="images/favicon.png">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <style>
    body {font-family: "Lato", sans-serif}
    </style>
</head>

<body>
    <header>
        <div class="topbar" align="center">
            <h1>Links of Links</h1>
        </div>
    </header>
    
    <div class="touch-menu" align="center">
        
        <div class="column slideout-left" align="right">
            <div class="menu-top-left" >
                <div class="slideout-content-top-left" id="top-left">
                    <ul>
                        <li>
                            <a href="#">scaleLink 1</a>
                        </li>
                        <li>
                            <a href="#">scaleLink 2</a>
                        </li>
                        <li>
                            <a href="#">scaleLink 3</a>
                        </li>
                    </ul>
                </div>
                <img class="slideout" src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="scale">
            </div>
        
            <div class="menu-bottom-left" >
                <div class="slideout-content-bottom-left" id="bottom-left">
                    <ul>
                        <li>
                            <a href="#">bookLink 1</a>
                        </li>
                        <li>
                            <a href="#">bookLink 2</a>
                        </li>
                        <li>
                            <a href="#">bookLink 3</a>
                        </li>
                    </ul>
                </div>
                <img class="slideout " src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="Book" >
            </div>
            
        </div>  
    
        <div class="column slideout-right" align="left">
            <div class= "menu-top-right">
                <img class="slideout " src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="topGavel">
                <div class="slideout-content-top-right" id="top-right" >
                    <ul class="slidelist">
                        <li>
                            <a href="#">ugavelLink 1</a>
                        </li>
                        <li>
                            <a href="#">ugavelLink 2</a>
                        </li>
                        <li>
                            <a href="#">ugavelLink 3</a>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="menu-bottom-right">
                <img class="slideout" src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="bottomGavel">
                <div class="slideout-content-bottom-right" id="bottom-right">
                    <ul>
                        <li>
                            <a href="#">lgavelLink 1</a>
                        </li>
                        <li>
                            <a href="#">lgavelLink 2</a>
                        </li>
                        <li>
                            <a href="#">lgavelLink 3</a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>          
            
        </div>
        


<!-- Footer  -->
<footer class="w3-container w3-padding-2 w3-center w3-opacity w3-dark-grey w3-xlarge">
  <p class="w3-medium">Powered by <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&feature=emb_logo" target="_blank">Barack Obama</a></p>
</footer>

<script>
function expandTab(n) {
    document.getElemen
    }
</script>   
    
</body>
</html>

Answer 1

你的css错了。您正在使用 + 而不是 >

* {
    box-sizing: border-box;
}

h1 {
    font-size: 50px;
    color: aliceblue
}

.topbar {
    margin-top: 0px;
    padding: 1px;
    background-color: #605E5E;
    border-bottom-style: inset;
    border-bottom-color: #888888;
}

.touch-menu {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eda954+0,e5933b+29,e59f54+56,e89230+79,e89230+91,e89230+100 */
    background: rgb(237, 169, 84); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(237, 169, 84, 1) 0%, rgba(229, 147, 59, 1) 29%, rgba(229, 159, 84, 1) 56%, rgba(232, 146, 48, 1) 79%, rgba(232, 146, 48, 1) 91%, rgba(232, 146, 48, 1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(237, 169, 84, 1) 0%, rgba(229, 147, 59, 1) 29%, rgba(229, 159, 84, 1) 56%, rgba(232, 146, 48, 1) 79%, rgba(232, 146, 48, 1) 91%, rgba(232, 146, 48, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(237, 169, 84, 1) 0%, rgba(229, 147, 59, 1) 29%, rgba(229, 159, 84, 1) 56%, rgba(232, 146, 48, 1) 79%, rgba(232, 146, 48, 1) 91%, rgba(232, 146, 48, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eda954', endColorstr='#e89230', GradientType=0); /* IE6-9 */
    display: flex;
    padding: 10px;
}

ul {
    text-align: center;
    list-style-type: none;
    margin: 10px;
    vertical-align: middle;
}

.slideout-content-top-left, .slideout-content-bottom-left {
    display: none;
    height: 95%;
    margin: 10px 0px 10px 0px;
    min-width: 16px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    background-color: #736E6F;
    z-index: 1;
}

.slideout-content-top-right, .slideout-content-bottom-right {
    display: none;
    height: 95%;
    margin: 10px 10px 10px 0px;
    background-color: #736E6F;
    min-width: 16px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    vertical-align: middle;
}


.menu-top-right:hover > .slideout-content-top-right, .menu-bottom-right:hover > .slideout-content-bottom-right {
    display: inline-block;
}

.slideout-content-bottom-right:hover, .slideout-content-top-right:hover {
    display: inline-block;
}

.menu-top-left:hover > .slideout-content-top-left, .menu-bottom-left:hover > .slideout-content-bottom-left {
    display: inline-block;
}

.slideout-content-bottom-left:hover, .slideout-content-bottom-left:hover {
    display: inline-block;
}


.touch-menu img:hover {
    filter: brightness(1.25);
}

.column {
    flex: 50%;
    display: flex;
    flex-direction: column;
    vertical-align: middle;
}

.menu-top-left, .menu-bottom-left, .menu-bottom-right, .menu-top-right {
    flex: 50%;
    height: 100%;
}


.menu-bottom-left img, .menu-top-left img {
    width: 50%;
    height: 95%;
    float: right;
    margin: 10px 10px 10px 0px;
}

.menu-bottom-right img, .menu-top-right img {
    width: 50%;
    height: 95%;
    float: left;
    margin: 10px 0px 10px 10px;
}

下拉菜单元素不显示

Dropdown Menu Element Not Displaying

html

css

hover

drop-down-menu

display