Overlapping Menu Buttons

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!

set a height for the li's

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

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!

For this, dont use hover.. use jQuery's mouseover method....

:)

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.

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.

:)

I checked out jQuery. Interesting stuff. I will follow up with it.

Thanks for your help!

You are welcome :)