?
Solved

Menu not dropping down properly

Posted on 2013-06-11
14
Medium Priority
?
277 Views
Last Modified: 2013-06-12
is there anyway i can sort out the menu dropdown when clicking on advertures?

It seems to be going all over the place

here is the site http://piratescove.yourcitybeats.com
0
Comment
Question by:jonathanduane2010
[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
  • 6
14 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39238601
The HTML validator says 23 errors including dup ids and some that are clearly structural.  You think invalid structure might contribute to your structural problem?  Maybe you should clean up the code and see.

Cd&
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 39238732
First do what CD& said

Then (because the menu does not work and we have no idea what you want to do) try this
on line 1719 of styles css change the z-index to 1. This should cause your menu to drop down. However you still have the tiny menu text with big hover text going outside the inner UL boundaries - not sure what you are trying to achieve but this is a good place to start.
.site {
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  width: 984px;
  z-index: 1;
}

Open in new window

0
 

Author Comment

by:jonathanduane2010
ID: 39238873
ok thats looking much better

is there a way of having the text the same on hover? or having it dropping directly down? instead over to the left?
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 58

Expert Comment

by:Julian Hansen
ID: 39239187
You need to make quite a few changes.

1. Remove the float left from your main nav <ul>
2. Inside your <li> of your main menu remove the display: block from your <a> elements - it is not necessary.
3. Remove the float: left from the <a> elements as well
4. Make the li elements of the main nav float left

You may then need to remove the float: left from the submenu <li> items with a clear: both.
0
 

Author Comment

by:jonathanduane2010
ID: 39239459
Thanks a mill for that i really appreciate it

what lines are they on, i am seeing different ones?
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 39240209
styles.css line 1751
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
  background: none repeat scroll 0 0 #389C1D;
  ...
  float: left; /* REMOVE THIS */
  ...
}

Open in new window

line 1919
.main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a {
  ...
  display: block; /* REMOVE THIS */
  float: left; /* REMOVE THIS */
  ...
}

Open in new window

Line 1881
.main-navigation li {
  margin: 0;
  position: relative;
  float: left; /* ADD THIS */
}

Open in new window

Potentially add this
.main-navigation li ul li {
  clear: left;
}

Open in new window

That should get you on the right track
0
 

Author Comment

by:jonathanduane2010
ID: 39240716
hi, is there any way of having it appear on front of slider?

it seems to be appearing behind it?

Thank you so much for all your help...
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 39240746
I am not seeing that - what browser are you using and are you referring to the link you posted above or a local link?
0
 

Author Comment

by:jonathanduane2010
ID: 39240866
i am using Chrome and IE
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 39241134
I don't support IE and encourage you not to either - waste of time.

In chrome the site is loading with none of the changes I recommended above ...

FF it works but it seems FF has cached the changes I made.
0
 

Author Comment

by:jonathanduane2010
ID: 39241151
i agree about IE, i have just reverted to original css file as i had made a bit of a mess i seemed to do this and it worked for a min or two before i made other changes and screwed it up

.site {
               margin: 0 auto;
               width: 984px;
               padding:0px 10px;
               z-index:1;
               position:relative;
        }
.site1 {
        margin:0 auto;
        width:984px;
        z-index:999;

}
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 39241214
Ok but you need to make the other changes to the <li> and <a> elements.
0
 

Author Comment

by:jonathanduane2010
ID: 39241225
ok looks much better now, thats great, thank you so much

how can i change now soo all the sub menu text is red like the others?
0
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 1860 total points
ID: 39241512
Probably by adding this

.main-navigation li ul li a{
  color: red;
}

Give it a go - I am in meetings rest of the day so if you don't come right post back and I will take a look later.
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

764 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