4 replies [Last post]
varoluscu_prens
varoluscu_prens's picture
Offline
newbie
Last seen: 2 years 26 weeks ago
Timezone: GMT+2
Joined: 2012-01-13
Posts: 7
Points: 14

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

Here is the CSS side:

#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
{
     display: block; 
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 1 year 44 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Read up on the use of

Read up on the use of position. "#leftMenu ul" needs to be absolute rather than relative. Whether you put position:relative on "#leftMenu" or "#leftMenu > li" depends on where the submenu needs to appear.

varoluscu_prens
varoluscu_prens's picture
Offline
newbie
Last seen: 2 years 26 weeks ago
Timezone: GMT+2
Joined: 2012-01-13
Posts: 7
Points: 14

I've change the CSS file

I've change the CSS file according to display procedure in CSS. The changes I've made is written as a comment in text file. Anyway, there is another problem arises;the sub menu does not appear above enough.When I added to top variable and assign it to a 40px, the submenu always appear in fixed position.
Any help is greatly appreciated.

http://www.w3schools.com/cssref/pr_class_position.asp

Here are the CSS codes:

#leftMenu {
 
	 font-family: Arial;    
	 font-size: 12px;  
	 background: #2f8be8; 
	 width:230px;
	 height:250px;
	 margin:0px;
	 position:fixed;
         /*I've enforced the main section to stay fixed with that line.*/
 
} 
#leftMenu > li > a 
{
    color: #fff;
    font-weight: bold;
 
}
 #leftMenu > li:hover > a
{
    background: #f09d28;
    color: #000; 
 
}
/* Submenu of leftMenu------------------------------------------*/
#leftMenu ul {
 
    background-color : #f09d28; 
    padding:1px;
    margin:2px; 
 
} 
 
#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 li a 
{
	width: 180px;
}
#leftMenu ul
{
	position:absolute;
        /* Change point as proposed.*/
	display:none;
	left:270px;
	/* top:70px; */
        /* When I write the code above, the submenu's appear point do not change
           according to lines in leftMenu. */
 
}
 
#leftMenu li:hover ul
{
     display: block; 
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 1 year 44 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

The offsets used by

The offsets used by position:absolute elements are based on their nearest ancestor with position (any value except the default, static). To get the submenu position based on the menu item that produces it, put position:relative on that menu item.

#leftMenu li {
position: relative;
}

varoluscu_prens
varoluscu_prens's picture
Offline
newbie
Last seen: 2 years 26 weeks ago
Timezone: GMT+2
Joined: 2012-01-13
Posts: 7
Points: 14

I got it. Thanks.

I got it. Thanks.