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
Solved

Help with simple menu dropdown displays

Posted on 2015-02-16
14
112 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
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.

 
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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

Suggested Solutions

Title # Comments Views Activity
How to combine and minify CSS and JS files 5 17
How to fix Datetime in MySQL? 4 48
IP 10.0.1.2 / 255.0.0.0 61 56
ajax to record click 3 16
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.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

856 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