horizontal menu hover problem

[darran]

Hi,

I have a horizontal menu with a horizontal drop down. I`m using a list for the drop down and setting it to be horizontal in the css with
display: inline; The menu pops down correctly when I hover over the top level but when I go to select the menu item in the second drop down horizontal level the drop down disapears. If I don`t use the display: inline; then the menu works. Is there a way of fixing this??

Thanks

Darran

Code: Select all

 
#menu ul { 
margin-bottom: 8px;
border-top: solid 4px #490B70;
border-bottom: solid 1px #490B70;
padding-top: 1px;
padding-bottom: 1px;
text-align: right;
height: 17px;
line-height: 1px;
font-size: 1px;
cursor: default;
list-style-type: none;
}

#menu li
{
display: inline;
}

#menu ul li ul {
top:135px;
position: absolute;
border-top: 0;
border-bottom: 0;
text-align: right;
height: 17px;
line-height: 1px;
font-size: 1px;
cursor: default;
list-style-type: none;
}

div#menu ul li ul
{
display: none;
}

div#menu ul li:hover ul 
{
display: block;
}

#secnav-whoweare{
right:650px;
}

#secnav-whatwedo{
right:500px;
}

#secnav-whowehelp{
right:400px;
}

#secnav-partners{
right:400px;

Code: Select all

}

[alexgeek]

Could you upload this to host? it's easier to see problems that way

[darran]

Hi Alex,
I`m unable to upload to host as I dont appear to have the right permissions. But the CSS I posted is what my menu consists of. I was just wondering if its possible to do a horizontal list with a horizontal drop down the way I`ve implemented it. I`m kind of new to CSS.

thanks

Darran

[alexgeek]

Originally Posted by darran

Hi,

I have a horizontal menu with a horizontal drop down. I`m using a list for the drop down and setting it to be horizontal in the css with
display: inline; The menu pops down correctly when I hover over the top level but when I go to select the menu item in the second drop down horizontal level the drop down disapears. If I don`t use the display: inline; then the menu works. Is there a way of fixing this??

Thanks

Darran

Code: Select all

 
#secnav-whatwedo{
right:500px;
}

#secnav-whowehelp{
right:400px;
}

#secnav-partners{
right:400px;

Code: Select all

}

What's this part supposed to be doing?

[darran]

Hi Alex,
Its fine I fixed the issue. It was to do with me not defining the anchors/images to be display:inline and padding also seemed to have an effect.

First time I`ve done any CSS and I`m glad I`m a server side Java developer, CSS is too much of a dark art for me .

Thanks for your repsonses Alex.

[darran]

heres the code for anyone else interested.
Also this was a good example of a horizontal menu
http://www.alistapart.com/articles/hybrid

Code: Select all

#menu ul 
{ 
margin-bottom: 8px;
border-top: solid 4px #490B70;
border-bottom: solid 1px #490B70;
/*padding-top: 1px;
padding-bottom: 1px;*/
padding: 3px;
text-align: right;
height: 17px;
line-height: 1px;
font-size: 1px;
cursor: default;
list-style-type: none;
}

#menu li
{
display: inline;
}

#menu ul li ul 
{
top:135px;
position: absolute;
border-top: 0;
border-bottom: 0;
text-align: right;
height: 17px;
line-height: 1px;
font-size: 1px;
cursor: default;
list-style-type: none;
text-decoration: none;
display: none;
}

#menu li a img
{
display: inline;
padding: 3px;
z-index: 6000;
text-decoration: none;
}

#menu li a 
{
display: inline;
padding: 3px;
z-index: 6000;
}

div#menu ul li ul
{
display: none;
}

/*li.over is a work around for ie 5/6 
lack of support for :hover, associated javascript in 
script.js*/
div#menu ul li:hover ul,
#menu li.over ul 
{
display: block;
text-decoration: none;
z-index: 6000;

}

[alexgeek]

Glad you got it working then