Overlapping Menu Entry

any updates on this one? I have exactly the same problem in all browsers!

same problem here...i am working on CSS changes to fix this and will update! It seems there is no other way to fix it or anyone to reply to this

You can adjust the width of the dropdown with css here. Find the line 132 in menu.css (in the css folder) and add a width there. Adjust it until there is no overlapping.

ul.nice-menu li.menuparent ul li {
  padding:0;
  margin:0;
  background:url("../images/double-line.gif") repeat-x scroll center bottom transparent;
  list-style:none outside none;
  width: 150px;
}

Hello and thanks for your reply. While your solution did not do any changes to the menu for some reason I used Firebug and found out that my menu will be ok if I add margin-bottom: 20px on each sub-menu that overlaps.

The problem is that what I see in Firebug I can not find in menu.css thus do not know where to put the new margin number and solve this.

Any insight or help would be much appreciated!

I assume you have css aggregation on. Go to Configuration -> Development -> Performance and uncheck css aggregation. Refresh your page, and you should be able to view the css file and line numbers in firebug.

Thanks Arshad,

What I was trying to say was that I can not find the lines I see in firebug on the actual menu.css file i extract from Filezilla. I attach a screenshot of where the change should take place in Firebug but nowhere to be seen in the menu.css file. Hope for your help.

Best Regards

Yiannis

You can add the following line to menu.css if it's not there :

ul.nice-menu li.menuparent ul li a{
    /* Style for the anchor here */
}

I did it and did not work for some reason. What did work though was this :

ul.nice-menu li a{
color: #C0C0C0;
text-decoration:none;
font-size:14px;
display:block;
height:30px;
line-height: 30px;
padding:5px 10px !important;
margin-bottom: 20px;
border-radius:5px;

I added margin-bottom: 20px; instead of margin: 0 which is the original file and problem solved. Ideally each box should be automatically sized based on the text lenght as this make some menu options looking weird (for example a word like Services will have a lot of space comparing to a word like social media marketing) but I will suit myself with this atm, doesnt look that bad.

I also did some tests and added more menu options and seems to be working fine. Just bear in mind with this the whole menu is settled on 20px and you can not (or I have not found the way yet) have a different margin for each child menu option.