Johnathan Li Johnathan Li - 4 years ago 251
HTML Question

Div cover other Div

I am creating a demo for my homework.
My navigation is not displaying correctly. I have been trying to fix the problem in many ways but none of them work.

demo
here is my 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>


Here is my CSS code.

/* 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);
}


Here this Demo,its the navigation effect that i want.

But however in my first demo.When you hover over the navi menu, the 2nd level menu will come out but display incorrectly. I don't know how to solve this.

Thanks for helps guys

Answer Source

If i get your question right.. U can do that by width animation.. And change :focus to :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; 
} 

Hope it helps..

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download