[SOLVED] Sub menu not displaying correctly
 

Hello,

The sub menus are not displaying correctly on my website. Here's a link to my website:

https://prototype.quillik.com/

And here is the extra CSS code I have so far:

div#menu1 {
float: left;
width: 100%;
height: 100%;
background: url('http://prototype.quillik.com/wp-content/themes/atahualpa/images/nav-bg.png') repeat-x;
overflow: hidden;
position: relative;

}
div#menu1 ul.rMenu {
clear: left;
float: left;
list-style: none;
margin: 10px 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
div#menu1 ul.rMenu li {
display: block;
float: left;
list-style: none;
vertical-align: center;
margin: 0;
padding: 0;
background: transparent !important;
color: #fff;
position: relative;
right: 50%;
}
div#menu1 ul.rMenu li a {
display: block;
margin: 0 0 0 1px;
padding: 3px 10px;
background-color: transparent !important;
color: #fff;
text-decoration: none;
line-height: 100%;
}
div#menu1 ul.rMenu li a:link {
background-color: transparent !important;
}
div#menu1 ul.rMenu li a:visited {
background-color: transparent !important;
}
div#menu1 ul.rMenu li a:active {
background-color: transparent !important;
}
div#menu1 ul.rMenu li a:hover {
background-color: transparent !important;
font-weight: bold;
}


My problem at this point is the full sub menu does not display, and it seems like (from the sub menu that does display) is that the li alignment is off. Thanks.

I get a security warning when I try to access that site.

Sorry about that. It's http://prototype.quillik.com/

why are you setting the 'div#menu1 ul.rMenu li' to 'position: relative;' and 'right: 50%;'?

Could you attach a setting file to a reply?

Hi Juggledad,

The "'div#menu1 ul.rMenu li' to 'position: relative;' and 'right: 50%;" setting is (partly) how I accomplished centering the top menu items.

lmilesw,

Not exactly sure what you mean by settings file, but i'm attached a copy of my added CSS.

try removing the right: 50%;

go to ato->export/import settings and export your settings and attach them to a reply

Okay.

I removed the "right: 50%" which moved the top menu items to the right (but also seemed to correct the sub menu's li/background alignment). The settings file is attached. Thanks.

As a start remove all but the background in the first part of the CSS so it looks like the following. This should at least point you in the right direction.

Larry,

Thank you very much. It was the "overflow: hidden" that was causing the problem with the sub menu not appearing fully. I guess I'll have to give up on trying to center the menu because that seems to be causing the sub menu li items to be pushed to the left.

Leo

The ways I have centered a menu are as follows

Use %page-center
Wrap %pages in a div with a width and auto right and left margins.

Larry,

Thanks so much. You and Juggledad have been very helpful. I will definitely keep your centering tip in mind for the future. I actually got the menu centered and everything aligned correctly with the addition of the following to the CSS:

div#menu1 ul.rMenu ul li {
right: 0%;
}

Works great!