Hi There;
I have a web file that consist of HTML & CSS. When user's mouse pointer go through the "Menu Item -1" and "Menu Item -3" (They have submenus also) other menu items slide to the bottom immediately. I do not want to see that items sliding. How can I solve that problem?
Thanks in advance.
HTML codes :
(The problem is in the leftMenu. It places in the left side of the web page and sub menus open to the right side. )
<ul id="leftMenu">
<li>
<a href="#"> Menu Item-1 </a>
<ul>
<li><a href="#"> Sub-menu Item-1 </a></li>
<li><a href="#"> Sub-menu Item-2 </a></li>
<li><a href="#"> Sub-menu Item-3 </a></li>
</ul>
</li>
<li><a href="#"> Menu Item-2 </a></li>
<li><a href="#"> Menu Item-3 </a>
<ul>
<li><a href="#">Sub-menu Item-4 </a></li>
<li><a href="#">Sub-menu Item-5</a></li>
<li><a href="#">Sub-menu Item-6</a></li>
</ul>
</li>
<li><a href="#"> Menu Item 4 </a></li>
<li><a href="#"> Menu Item 5 </a></li>
<li><a href="#"> Menu Item 6 </a></li>
<li><a href="#"> Menu Item 7 </a></li>
</ul>CSS Codes:
#leftMenu {
font-family: Arial;
font-size: 12px;
background: #2f8be8;
width:230px;
height:250px;
margin:0px;
z-index:12;
}
#leftMenu > li > a
{
color: #fff;
font-weight: bold;
}
#leftMenu > li:hover > a
{
background: #f09d28;
color: #000;
}
/* Submenu of leftMenu------------------------------------------*/
#leftMenu ul {
background-color : #f09d28;
position:relative;
padding:1px;
margin:2px;
z-index:70;
}
#leftMenu ul li a
{
color: #000;
}
#leftMenu ul li:hover a
{
background: #ffc97c;
}
#leftMenu, #leftMenu ul
{
list-style: none;
}
#leftMenu li a
{
display: block;
height: 3em;
line-height: 3em;
padding: 0 0.5em;
text-decoration: none;
vertical-align:top;
}
#leftMenu ul
{
position: relative;
display: none;
left:225px;
top:-35px;
}
#leftMenu ul li a
{
width: 180px;
}
#leftMenu li:hover ul
{