Solved

Help with simple menu dropdown displays

Posted on 2015-02-16
14
113 Views
Last Modified: 2015-02-18
Hello there,
At this site here,http://www.xfactorideas.com.au/newbcplastics/, you will see that the menu works ok, but the sub menus are not dropping to the second line very nicely.  They are practically sitting on top of each other.
In addition, the hovering background is much larger that the actual space of the secondary menu.
Can someone please help me solve this problem with some CSS?

Thanks for you help in advance
0
Comment
Question by:Amanda Watson
  • 7
  • 7
14 Comments
 
LVL 14

Expert Comment

by:Edwin Hoffer
ID: 40613486
I have given the ans here http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28617573.html#a40611719, if you were followed this then you may not have to face this problem.
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 40613538
Yes and it worked well, but these remaining issues are still occurring.
I have that code in my CSS exactly.
The only other code I have written which may affect things perhaps is
.main-navigation a {
    color: #fff;
    display: block;
    float: left;
    height: 40px;
    letter-spacing: 0.05em;
    line-height: 35px;
    margin-left: -12px;
    margin-right: -12px;
    text-decoration: none;
    text-transform:uppercase;
    font-weight:lighter;
    font-size:14px;
}

I am not sure?
0
 
LVL 14

Expert Comment

by:Edwin Hoffer
ID: 40613580
Remove margin-top from this class ".main-navigation ul ul" in your css file.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 11

Author Comment

by:Amanda Watson
ID: 40613611
Um, that was disasterous, they overlapped each other terribly, the squares, not only the text!!
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 40613617
or did you mean the top:100%
0
 
LVL 14

Expert Comment

by:Edwin Hoffer
ID: 40613737
Thats why I gave you the code here: http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28617573.html#a40611719 but you didn't follow it.

Update below code:

Update "padding: 20px 35px;" to "padding: 5px 35px;" in ".main-navigation ul li a" class;
Update width:300px; in ".main-navigation ul ul a" class;
0
 
LVL 14

Expert Comment

by:Edwin Hoffer
ID: 40613739
Or if possible then change the style.css file to the older one and update the code which I have given here: http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28617573.html#a40611649
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 40615630
Neither are working
is main-navigation a making things worse
.main-navigation a {
    color: #fff;
    display: block;
    float: left;
    height: 40px;
    letter-spacing: 0.05em;
    line-height: 35px;
    margin-left: -12px;
    margin-right: -12px;
    text-decoration: none;
    text-transform:uppercase;
    font-weight:lighter;
    font-size:14px;
}

Do I have to change something here????
0
 
LVL 14

Expert Comment

by:Edwin Hoffer
ID: 40615820
Here I can see that the menu is fine? Still you need any changes?

ScreenshotScreenshot
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 40618227
Yes I still need help....the words are overlapping on the menu 4, 5 an 6.....see how the words are overlapping
0
 
LVL 14

Accepted Solution

by:
Edwin Hoffer earned 500 total points
ID: 40618238
Increase width to 300px in ".main-navigation ul ul a" class
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 40618245
That sorted it thanks
0
 
LVL 14

Expert Comment

by:Edwin Hoffer
ID: 40618246
You are welcome :)
0
 
LVL 11

Author Closing Comment

by:Amanda Watson
ID: 40618250
Got there, after a few mis understandings I thinks
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question