Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Help with simple menu dropdown displays

Posted on 2015-02-16
14
Medium Priority
?
116 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 15

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 15

Expert Comment

by:Edwin Hoffer
ID: 40613580
Remove margin-top from this class ".main-navigation ul ul" in your css file.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 15

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 15

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 15

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 15

Accepted Solution

by:
Edwin Hoffer earned 1500 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 15

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
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).

688 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