Solved

Help with simple menu dropdown displays

Posted on 2015-02-16
14
105 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 12

Expert Comment

by:Edwin Hoffer
Comment Utility
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
Comment Utility
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 12

Expert Comment

by:Edwin Hoffer
Comment Utility
Remove margin-top from this class ".main-navigation ul ul" in your css file.
0
 
LVL 11

Author Comment

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

Author Comment

by:Amanda Watson
Comment Utility
or did you mean the top:100%
0
 
LVL 12

Expert Comment

by:Edwin Hoffer
Comment Utility
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 12

Expert Comment

by:Edwin Hoffer
Comment Utility
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 11

Author Comment

by:Amanda Watson
Comment Utility
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 12

Expert Comment

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

ScreenshotScreenshot
0
 
LVL 11

Author Comment

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

Accepted Solution

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

Author Comment

by:Amanda Watson
Comment Utility
That sorted it thanks
0
 
LVL 12

Expert Comment

by:Edwin Hoffer
Comment Utility
You are welcome :)
0
 
LVL 11

Author Closing Comment

by:Amanda Watson
Comment Utility
Got there, after a few mis understandings I thinks
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
This article discusses four methods for overlaying images in a container on a web page
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

763 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now