...

View Full Version : Overlapping Menu Buttons



websteve
07-10-2011, 02:17 AM
I am testing out this new page, but the sub menus are vertically too close. How can I change this?

url - http://dynamicphoto.com/mr/index2.htm. The CSS is on the page (not external).

The menu I am having a problem with is the blue button menu. If you scroll over, you will see that the sub menus overlap.

The class for this menu set is "top-menu".

Many thanks to anyone that can help!

Sammy12
07-10-2011, 03:59 AM
set a height for the li's

vikram1vicky
07-10-2011, 06:53 PM
I am testing out this new page, but the sub menus are vertically too close. How can I change this?

url - http://dynamicphoto.com/mr/index2.htm. The CSS is on the page (not external).

The menu I am having a problem with is the blue button menu. If you scroll over, you will see that the sub menus overlap.

The class for this menu set is "top-menu".

Many thanks to anyone that can help!


Hello,

following code will help you .....


.top_menu li:hover ul{
display: block; /* Shows all elements under each other (as opposed to next to each other) */
}
.top_menu li:hover ul li{
display: block;
height:25px;
margin:1px;
}
.top_menu li:hover ul a {
position: absolute;

width: 150px;
top: 15px; /* Amount of space the first sub menu starts from the parent button */
left: 2px;
border-radius: 8px;
text-decoration: none;
background-color: #0000FF;
padding: 5px; /* Pads area around text 5x in all 4 directions */
border: 1px solid #cccccc;
border-bottom: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #FFFFFF;
}


Cheers :)

websteve
07-11-2011, 02:23 AM
Awesome! I see that I was missing the ul li part for li:hover, and thatís where I needed to add the height property. Thank you!

I recently noticed another issue, when you scroll over the sub menus, they disappear. I canít seem to find how to make them static so that they would stay. Any ideas?

Hereís the URL to an updated version (with your code inserted):

http://dynamicphoto.com/mr/mssny4.htm

Thanks again!

vikram1vicky
07-11-2011, 01:43 PM
For this, dont use hover.. use jQuery's mouseover method....

:)

websteve
07-12-2011, 02:48 AM
Well, I'm not familiar with jquery, but since I already know JavaScript and PHP, I guess it shouldn't be hard to learn. I'll Google for some training lessons.

One quick question I have is, does this replace CSS or does it integrate with CSS?

Thanks.

vikram1vicky
07-12-2011, 12:37 PM
Just visit jquery.com and search for mouseover.. you will get full detail..

If you know javascript, jquery will not be a new thing for you.

:)

websteve
07-13-2011, 02:37 AM
I checked out jQuery. Interesting stuff. I will follow up with it.

Thanks for your help!

vikram1vicky
07-13-2011, 12:06 PM
You are welcome :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum