Solved

Help with simple menu dropdown displays

Posted on 2015-02-16
14
114 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: 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

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

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

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

710 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