Menu Trouble

HTML & CSS
1

I am attempting to build a dropline menu for my site. I’ve gotten it to the point that I have the submenu items in horizontal layout that appears on hover. I am building and checking, in Safari on a Mac. I was suprised to find that when I opened the page in Safari on an iOS devise that the submenu did not align as intended below the parent menu. I checked on the Mac using Firefox and the same problem persists. I used the css {left:-167px;} to place it in Safari. I assume that is the problem.

Questions:

  1. How do I get the submenu to appear aligned exactly beneath the parent menu in all browsers?
  2. I want the submenu to scroll down. I hear this can be done with CSS3 but not for all browsers. How would I do it then so that everyone can see the same thing? Care to share the code?

The site can be found temporarily at blog dot gardensare.com Hover over the Services menu item.

Thanks for your help.

2

Try this:

Remove position: relative from here:

ul.navigation {
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  position: relative;
}

and here

ul.navigation li {
  list-style: none outside none;
  margin: 0;
  position: relative;
}

and remove the left: -167px setting from here:

body.custom #navigation ul li ul {
  -moz-box-shadow: 4px 1px 5px #626037;
  background-color: rgba(130, 128, 55, 0.9);
  height: 46px;
  left: -167px;
  padding-left: 19px;
  width: 881px;
}

That will position the dropline in relation to the navigation div, which is where you really want it.

3

Thank you. Very close! It appears I did not have to remove the first position:relative (at least as far as I can tell).

It does look like I have to change something with the 19px padding in the main menu as the submenu seems to inherit that and is still not quite lined up. Trouble is that the main menu is in the correct place (Home is centered under the flower and inline with the content in the footer). Any suggestions?

After that the next step will be to make the submenu transition down smoothly/scroll. :smiley:

4

Suck it ans see (as my grand dad used to say!)

If you remove pos: rel here it will align nicely:

ul.navigation {
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  [COLOR="Red"]position: relative;[/COLOR]
}
5

Doh! The ul.navigation not the div. Now I see. Thank you, thank you. How does it look on your end (hopefully not in Safari)?

Now to open another thread…

6

Looks fine in all my browsers. :slight_smile:

We didn’t get onto question 2, so no need to post a new thread if that’s what you meant. What do you mean b ‘scroll down’?

7

Excellent on both accounts.

I’d like it to have a similar transitioning as shown in following example, but in horizontal motion of course—like a window shade: Tryit Editor v1.4

As I have set this up I can see that I do not have it so that I can easily use this CSS3 exactly. My understanding is that there needs to be a starting size and ending size. I do not have a starting size and if I do the submenu always appears. I suppose I could hide it off screen but this seems to be getting complicated.

I have seen this done with cross-browser compatibility using jQuery. I do not know if this is better or worse and I do not know the first thing about jQuery or JavaScript.

8

Behold, someone just pointed me toward an extravagant example of what I am trying to do at UberMenu – WordPress Mega Menu Plugin I don’t need or want anything so extensive but the transitioning of the submenu as it appears or “scrolling” is along the lines of what I want to do.

9