Question

我正在为我的作业创建一个演示。我的导航无法正确显示。我一直试图以多种方式解决问题，但没有一个能够解决问题。

demo 这是我的演示

    <body>
  <div class="container">




    <div class="content">
        <div id="menu">
            <ul class="parent-menu">
                <li>
                    <a href="#">Home & Kitchen</a>
                    <ul>
                        <li><a href="#">item</a></li>
                        <li><a href="#">item</a></li>

                    </ul>
                </li>

                <li>
                    <a href="#">Electronics</a>
                    <ul>
                        <li><a href="#">item</a></li>
                        <li><a href="#">item</a></li>

                        <li><a href="#">item</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#">Clothing</a>
                    <ul>
                        <li><a href="#">item</a></li>
                        <li><a href="#">item</a></li>
                        <
                    </ul>
                </li>

                <li>
                    <a href="#">Cars & Motorbikes</a>
                    <ul>
                        <li><a href="#">item</a></li>
                        <li><a href="#">item</a></li>
                        <
                    </ul>
                </li>

                <li>
                    <a href="#">Books</a>
                    <ul>
                        <li><a href="#">item</a></li>
                        <li><a href="#">item</a></li>

                    </ul>
                </li>

                <li>
                    <a href="#">Support</a>
                    <ul>
                        <li>
                            <a href="#">Contact Us</a>
                        </li>
                        <li>
                            <a href="#">Forum</a>
                        </li>
                        <li><a href="#">Deliveries</a></li>
                        <li><a href="#">T&C</a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <!-----------Shorcut Panel Content--------->

        <div class="shortcutpanel">
            <div class="usergroup">

            </div>





    </div>



</div>

</body>

这是我的CSS代码。

/* Basic Style */
html, body{
height:100%;    
}

body {

background-color: grey;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;


background-size:cover;

}



/*Global Setting*/

.hover{
float:left;
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
 -webkit-transition-property: color, background-color;
 transition-property: color, background-color;
}

.hover:active, .hover:hover, .hover:focus{
background-color: rgba(32, 152, 209, 0.5);
}

.container{
height:100%;
width:100%; 
}

.content{

position:fixed;
top:10%;
left:0%;
height:90%;
width:100%;
}

/* NAVIGATION*/

p, ul, li, div, nav { padding:0; margin:0; }
#menu { 
overflow: hidden; 
position:fixed ;
left:0%;
top:20%; 
z-index:999; }
.parent-menu { 
background-color: #0c8fff; 
width:180px; }
#menu ul { 
list-style-type:none; 
} 
#menu ul li a {
padding:10px 15px; 
 display:block; 
 color:#fff; 
 text-decoration:none; 
 } 
#menu ul li a:hover { 
background-color:#007ee9; 
}
#menu ul li:hover  > ul { 
left: 200px; 
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in; 
} 

#menu ul li > ul { 
position: absolute; 
background-color: #333; 
top: 0; 
left: -200px; 
min-width: 200px; 
z-index: 999; 
height: 100%; 
-webkit-transition: left 200ms ease-in; 
-moz-transition: left 200ms ease-in; 
-ms-transition: left 200ms ease-in; 
transition: left 200ms ease-in; 
}
#menu ul li > ul li a:hover { 
 background-color:#2e2e2e; 
}

#menu ul li a:focus + ul { 
left: 200px; 
-webkit-transition: left 200ms ease-in;
 -moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in; 
} 



/* Shortcut Panel Content */

.shortcutpanel{
position:relative;
left:10%;
top:5%;
height:90%;
width:30%;
float:left;
margin:0;
padding:0;
background-color:rgba(255,240,240,0.1);
  }

这是Demo，这是我想要的导航效果。

但是在我的第一个演示中。当您将鼠标悬停在导航菜单上时，第二级菜单会出现但显示不正确。我不知道如何解决这个问题。

感谢帮助人

Answer 1

如果我的问题是对的..你可以通过宽度动画来做到这一点。并将:focus更改为:hover + ul

DEMO FIDDLE

#menu ul li:hover  > ul { 
left: 200px;
width: 200px;
} 

#menu ul li > ul { 
width: 0px; 
}

#menu ul li a:hover + ul { 
width: 200px; 
-webkit-transition: width 300ms ease-in;
-moz-transition: width 300ms ease-in;
-ms-transition: width 300ms ease-in;
    transition: width 300ms ease-in; 
}

希望有所帮助......

Div覆盖其他Div

1 个答案: