No replies
Last seen: 14 years 15 weeks ago
Joined: 2008-02-04
Posts: 1
Points: 0

I have the following css code:

#sajat_header {
background: url(/themes/bluemarine/images/fejlecalso.png) top center no-repeat;
width: 960px;
height: 30px;
margin: 0 auto;
padding: 0;
#sajat_header ul {
padding: 0;
margin: 0;
list-style-type: none;
#sajat_header ul li {
position: relative;
float: right;
width: 5em;
#sajat_header ul li ul {
visibility: hidden;
position: absolute;
width: 7em;
#sajat_header ul li:hover ul {
visibility: visible;
background-color: #000;
#sajat_header a {
text-decoration: none;
#sajat_header a:hover {
color: red;

Where it is used:

My problem is that if I move the mouse over e.g., _about us_ it shows its content but is displayed in one row. If I grow the width of ul li and ul li ul to 7em it is a normal vertical drop down menu but I cannot grow the width of ul li ul part. That is, I have to enhance the gap between main menu elements if I want t normal vertical drop down menu and I do not want that width between main menu items. I cannot figure out where the problem is.

I hope I could explain my problem.

Could anyone help?