dropdown 2nd level appears vertically not horizontally

[MacRat1010]

Hi,

I added a 2nd level (fly out) to my css menu. I want it to appear to the right of the drop down, but it's appearing vertically below the drop down.

Does anyone know how to make it work?

Menu Here: http://example.com

You can mouse over the "Locations" & "Advertise" tabs down to link4 to see the issue ... the 2nd level is appearing vertically ... not horizontally.



CSS & HTML below.

Most of the css code is for the sprites image spans.




<style type="text/css">

/*==== Begin Nav Styles ====*/
#nav, #nav ul {
width:623px;
height:65px;
margin:0 auto;
padding:0;
list-style:none;
background: url(menuSPRITE.jpg) no-repeat 0 -65px;
}
#nav li {
float:left;
position:relative;
}
#nav a {
float:left;
position:relative;
height:65px;
text-decoration:none;
font:bold .9em/60px arial,helvetica,sans-serif;
text-align:center;
color:#FFF;
}
#nav a:active,
#nav a:focus,
#nav a:hover { /*style for images off */
color:#;
background:#;
text-decoration:underline;
cursor:pointer; /* IE6/7 need this */
}
/*--- Set z-indexes manually for IE ---*/
#home {z-index:6}
#locations {z-index:5}
#maps {z-index:4}
#advertise {z-index:3}
#about {z-index:2}
#contact {z-index:1}

/* all the anchor widths change on hover */
#home a {width:102px;}
#locations a {width:104px;}
#maps a {width:105px;}
#advertise a {width:105px;}
#about a {width:104px;}
#contact a {width:102px;}

/* increase widths by 8px on hover */
#home a:hover {width:102px; margin-right:px;}
#locations a:hover {width:104px; margin-right:px;}
#maps a:hover {width:105px; margin-right:px;}
#advertise a:hover {width:105px; margin-right:px;}
#about a:hover {width:104px; margin-right:px;}

#nav a span {
position:absolute;
top:0;
left:0;
width:100%;
height:65px;/*image height*/
font-size:0;
}

#home a span {background:url(menuSPRITE.jpg) no-repeat 0 -65px;}
#locations a span {background:url(menuSPRITE.jpg) no-repeat -102px -65px;}
#maps a span {background:url(menuSPRITE.jpg) no-repeat -206px -65px;}
#advertise a span {background:url(menuSPRITE.jpg) no-repeat -311px -65px;}
#about a span {background:url(menuSPRITE.jpg) no-repeat -416px -65px;}
#contact a span {background:url(menuSPRITE.jpg) no-repeat -520px -65px;}

#home a:hover span {
width:102px;
background-position:0 0px;
}
#locations a:hover span {
width:104px;
background-position:-102px 0px;
}
#maps a:hover span {
width:105px;
background-position:-206px 0px;
}
#advertise a:hover span {
width:105px;
background-position:-311px 0px;
}
#about a:hover span {
width:104px;
background-position:-416px 0px;
}
#contact a:hover span {
width:102px;
background-position:-520px 0px;
}
/*==== Dropdown Styles ====*/

#nav ul {
position:absolute;
top:65px;
left:0px;
width:182px;
height:auto;
margin:0 0 0 -999px;/*hide the dropdown*/
background-image:none;
background-color:#000;
line-height:35px;
overflow:hidden;
}


#nav li:hover ul,
#nav li.sfhover ul {
margin-left:0;/*reveal the dropdown*/
}
/*==== Second Level Flyout====*/

#nav li:hover li ul,#nav li.sfhover li ul {margin-left: -999px;}
#nav li li:hover ul, #nav li li.sfhover ul {
margin-left: 0px;
top:0;
position:relative;
}

/*==== Locations Styles ====*/

#nav li#locations:hover span,
#nav li#locations.sfhover span{ /*hold the BG image open on the sublist parent*/
width:104px;
background:url(menuSPRITE.jpg) no-repeat -102px 0px;
}
#nav li#locations li a {
height:auto;
width:160px;
padding:7px 10px;
background:none;
color:#ffb100;
text-align:left;
border:1px solid #363836;
font-family:Arial;
font-weight:normal;
line-height:17px;
font-size:13px;
border-top:1px solid #363836;
}
#nav li#locations li a:hover {
background:#151312;
color:#e4e4e4;
text-decoration:none;
}

/*==== Advertise Styles ====*/

#nav li#advertise:hover span,
#nav li#advertise.sfhover span{ /*hold the BG image open on the sublist parent*/
width:105px;
background:url(menuSPRITE.jpg) no-repeat -311px 0px;
}
#nav li#advertise li a {
height:auto;
width:160px;
padding:7px 10px;
background:none;
color:#ffb100;
text-align:left;
border:1px solid #363836;
font-family:Arial;
font-weight:normal;
line-height:17px;
font-size:13px;
border-top:1px solid #363836;
}
#nav li#advertise li a:hover {
background:#151312;
color:#e4e4e4;
text-decoration:none;
}


</style>

</head>
<body>
<div align="center">
<ul id="nav">
<li id="home"><a href="#1">Home<span></span></a></li>
<li id="locations"><a href="#2">Locations<span></span></a>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</li>
</ul>
</li>
<li id="maps"><a href="#3">Maps<span></span></a></li>
<li id="advertise"><a href="#4">Drop Down<span></span></a> <ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a>
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
<li><a href="#">five</a></li>
<li><a href="#">six</a></li>
<li><a href="#">seven</a></li>
</ul>
</li>
</ul>
</li>
<li id="about"><a href="#5">About Us<span></span></a></li>
<li id="contact"><a href="#6">Contact<span></span></a></li>
</ul>
</div>
</body>
</html>

[edited by: alt131 at 3:10 pm (utc) on Jul 23, 2011]
[edit reason] Thread [/edit]

[alt131]

Hi Macrat and welcome to WebmasterWorld :)

On a quick look, your second and third level <ul>'s are inheriting width: 182px from #nav ul. That is not wide enough for the li/a in the second (and third) level menu to float alongside each other, so they are (correctly) dropping to the "next line" where there is enough space.

That makes it appear they are ignoring the float and acting like an ordinary vertical list, but set the correct width for the second and third level ul's and they should float quite nicely. (You may also want to adjust the widths for the <a>'s inthe second and third level menu's to get the desired layout as well.)

When having troubles, always validate the css [jigsaw.w3.org]: the "sf" in some of your :hover selectors looks like a "typo", and things like color:#; and margin-right:px; won't be helping.

[edit] Correcting link[/edit]

[MacRat1010]

Thanks for the response, but it didn't work.

If 182px from #nav ul is widened to accommodate the 2nd & 3rd level li/a .... the initial drop down turns into two columns. It's a mess.

In theory everything in your response seems to male sense ... but widening the 182px #nav ul is not working.

I am not a whiz at css, and this menu was based on a single sprites image with a simple drop down.


I am simply trying to add a 2nd level, or fly out to the drop down.

Thanks Again For Your Response.

[alt131]

Hi macrat, if this is the same menu you've posted about before, and also in other forums on the net, I can understand your frustration as you've been working on this for a while. However, the cause of the two-column effect is the same as the original problem - there is not enough room for all the floats to arrange themselves horizontally, so some of them are "dropping" to the next line.

Below is a possible solution. It uses slightly different code to the type you posted, so you can remove the div and the <span>'s from the html because the ul has been centred, and the background-image set on the li. The code is not ideal - it is not well organised, there are redundancies, the <li>'s need adjusting to accommodate the padding for the <a>'s, and it uses color:transparent which is not yet valid. But it's long past bed-time, so I've used all the ids's so hopefully you can follow it, and gives you a place to start with valid code. Note especially the widths set on the second and third level ul's.

ul {
margin:0;
padding:0;
}

#nav {
width:624px;
height:65px;
margin:0 auto;
padding:0;
line-height:35px;
}

#nav li {
float:left;
position:relative;
height:65px;
list-style-type:none;
}

#nav li a {
width:100%;
height:100%;
display:block;
color:transparent;
}

#nav li ul a {
height:65px;
text-decoration:none;
font:bold 0.9em/60px arial,helvetica,sans-serif;
color:#FFF;
}

#home, #locations, #maps, #advertise, #about, #contact {background: #000 url(menuSPRITE.jpg) no-repeat ;}
#home {width:102px; background-position: 0 -65px}
#home:hover {background-position:0 0}
#locations {width:104px; background-position:-102px -65px }
#locations:hover {background-position: -102px 0 }
#maps { width:105px; background-position:-206px -65px;}
#maps:hover { background-position:-206px 0;}
#advertise {width:105px;background-position:-311px -65px;}
#advertise:hover {background-position:-311px 0;}
#about {width:104px;background-position:-416px -65px }
#about:hover {background-position:-416px 0;}
#contact {width:102px;background-position:-520px -65px;}
#contact:hover {background-position:-520px 0;}

#locations ul, #advertise ul {
position: absolute;
left: 0;
top: 65px;
width:422px;
background-color: #000000;
line-height: 35px;
height:32px;
visibility:hidden;
}

#locations ul li, #advertise ul li {
float:left;
width:100px;
height:32px;
}

#locations ul li a, #advertise ul li a {
padding:7px 10px;
background:none;
color:#ffb100;
text-align:left;
border:1px solid #363836;
font-family:Arial;
font-weight:normal;
height:17px;
line-height:17px;
font-size:13px;
border-top:1px solid #363836;
}

#locations:hover ul, #advertise:hover ul {
visibility:visible;
}

#locations:hover ul li ul, #advertise:hover ul li ul {
visibility:hidden;
width:422px;
top:32px;
height:32px;
}

#advertise:hover ul li ul {
width:722px;
}

#locations ul li:hover ul, #advertise ul li:hover ul {
visibility:visible;
width:422px;
top:32px;
height:32px;
}

#advertise ul li:hover ul {
width:722px;
}

#nav li#locations li a:hover, #nav li#advertise li a:hover {
background:#151312;
color:#e4e4e4;
text-decoration:none;
}

[MacRat1010]

Hi Alt131,

Using your code as a starting point,

I took me 1.5 hours, but I got it working the way that I wanted.

Not sure if it's correct, but it works in Safari & Firefox, I don't have IE. so I cant test it there.

Here's the new link ... http://www.example.com


Thanks for all of your help ... I couldn't have done this without you!

[edited by: alt131 at 3:09 pm (utc) on Jul 23, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]

[Leosghost]

Works in Opera too

[alt131]

Hi Macrat, pleased you got it working, but looking at the link, the reason you had to adjust the solution (and the original suggestions did not work) is because it looks like you wanted vertical drop-downs as you already had, rather than horizontal drop-downs as indicated by your thread title and OP. But the main point is you got there!

In terms of being "correct", working is always good ;)
But I would reinforce my suggestions to validate your code and remove the <div> (align="center" isn't valid and the div is unnecessary because the ul is centred instead), and the empty spans as they no longer serve any purpose.

As you can't test in ie you would have missed the "jump" on hover caused by some width differences. The following code is adjusted for vertical drop-downs and resolves that. I've posted a complete new solution rather than just the fix for the hover jump because the first solution was quite awful really, so it seemed a good opportunity to remove a lot of redundancies.

ul {
margin:0;
padding:0;
}

#nav {
width:624px;
height:65px;
margin:0 auto;
}

#nav li {
float:left;
height:65px;
list-style-type:none;
}

#nav li a {
width:100%;
height:100%;
display:block;
/* hides text in winsafari - but note not valid in css2.1*/
color:transparent;
/* hides text in ie */
font-size:0;
text-decoration:none;
}

/* best practise to provide a background-color: */
#home, #locations, #maps, #advertise, #about, #contact {background: #000 url(menuSPRITE.jpg) no-repeat ;}

/* no change to any of the id'ed li widths and background-positions*/

#locations ul, #advertise ul {
/* use relative to save setting position on a parent element */
position: relative;
background-color: #000000;
width:201px;
visibility:hidden;
}

#locations ul li, #advertise ul li {
width:180px;
height:32px;
}

#locations ul li a, #advertise ul li a {
/* no change except: */
/*background:#000000; background is shorthand, use background-color instead*/
background-color:#000;
}

#locations:hover ul, #advertise:hover ul {
visibility:visible;
}

#locations ul li ul, #advertise ul li ul {
/* winSafari doesn't like margins */
left:200px;
top:-32px;
width:201px;
}

#locations:hover ul li ul, #advertise:hover ul li ul {
visibility:hidden;
}

#locations ul li:hover ul, #advertise ul li:hover ul {
visibility:visible;
}

#nav li#locations li a:hover, #nav li#advertise li a:hover {
background-color:#151312;
color:#e4e4e4;
}

[MacRat1010]

Hi Alt131,

I used your most recent code, and everything is working http://www.example.com

Now, I am trying to add rounded corners to the very bottom left & right corners of the last <li> or link4 in the 1st & 2nd level drop downs.

I found this css code

.corners {
border-radius: 3px 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
}

but don't know exactly how to apply it to the bottom <li> of the 1st & 2nd levels (link4)

If I add it to the bottom of the (#locations ul li a, #advertise ul li a) block ... it works but it rounds the corners of every <li>

IE.

#locations ul li a, #advertise ul li a {
padding:7px 10px;
background-color:#000000;
color:#ffb100;
border:1px solid #363836;
text-align:left;
font-family:Arial;
font-weight:normal;
height:17px;
line-height:17px;
font-size:13px;
border-top:1px solid #363836;

border-radius: 3px 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
}

I tried adding an id or class to the link4 (bottom <li> in the 1st & 2nd level drop downs) but it didn't work ... I'm sure I was doing it wrong.

Any ideas on how to do this?

Thank you again for cleaning up the drop down code ... it's easier for me to TRY to understand ... when there's less of it there.

[edited by: alt131 at 3:08 pm (utc) on Jul 23, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]

[alt131]

I think your understanding is fine given you covnerted a horizontal drop-down to a vertical.

Here are some thoughts on why it may not have worked:
1. Border-radius is not understood by all browsers/versions, so check you are testing in one that understands. The Mizilla reference provides a handy list at [developer.mozilla.org...] plus a guide on syntax and available browser extensions.
2. 3px radius is extremely difficult to see - I had to zoom to an enormous magnification so it may be being applied, just not able to be "seen".
3. The code was written for learning purpose so is very specific. Depending on how you coded your selectors, an class/id may not have had enough specificity to over-ride other things in the code.

One way to do this is to make the class/id very specific - and just check you have the right browser version, and have adequate magnification to actually see the "rounding" Another way is attribute selectors given the <a> all have hrefs, something like a<href=link4> should do it. (The forum style codes do not allow square brackets, so replace the angle brachets <> with [])

The draw-back is these methods code for the html in the menu, so of the html changes, the style must also be changed. Some of the progress on selectors is intended to avoid exactly that issue. So, given this is also a learning exercise, I'm going to suggest you consider using the structural selector :last-of-type.

That can't be used to target the <a>'s because there is only one in each <li> - so every <a> is also the first and last as well. However, the reason for targetting the <a> is because that is where the border has been set. That leads me to remaining irritations with the code first posted, and once those are tidied up, using last-of-type becomes as easy as it should have been in the first place.

The first irritation with the code (as I noted when it was posted), is that the li's needed to be adjusted for the size of the <a>'s. As it is now the <li> is actually smaller than the <a>, which is one reason for retaining the border on the <a>. That is irritation #2, because the border really belongs on the li. To tidy that up, adjust the following rules:
1. #nav li a = remove width:100%;
2. #locations ul li, #advertise ul li = set the correct width:202px, then add background-color:#000.
3. #locations ul li a, #advertise ul li a = remove border-top:1px solid #363836; (has always been redundant), and remove border:1px solid #363836;
4. #locations ul li, #advertise ul li = add border:1px solid #363836;

With the styling tidied up, selecting the last li in each of the two sub-menus becomes easy:

#locations ul li:last-of-type, #locations ul li ul li:last-of-type, #advertise ul li:last-of-type, #advertise ul li ul li:last-of-type
and
#locations ul li:last-of-type, #locations ul li ul li:last-of-type, #advertise ul li:last-of-type, #advertise ul li ul li:last-of-type

Edit reason: Correcting link and replacing deleted para

[MacRat1010]

Hi Alt131,

Wow ... "last-of-type" is really cool!

I wanted to round the top corners as well, but didn't want to ask too much in one post. (so I wouldn't get confused).

Experimenting, I changed the word "last" to "first", and that worked on the top corners. Awesome!

My next question, was going to be about adding a shadow to the drop down's, but that part was easy http://www.example.com.



The last thing that I want to do to this menu ... is add an hover arrow (7px X 7px .png file) only to the <li> that opens the 2nd level dropdown.

In this case it would be the "link4"

The arrow would be justified right about 20px from the box's right edge.

IE Link4 > when hovered over it will change color just like the text link. (I will use 2 images or 1 sprites image file)

I will be trying to use ... background or background-image url.

But, I have no idea if it will work, and how I will apply it ... to just the "link4" ... or only links that open the flyout.

If there is a trick there, please let me know.

Thanks Again Alt131

[edited by: alt131 at 3:08 pm (utc) on Jul 23, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]

[MacRat1010]

There is a period (.) on the end of the link that I just posted (above)

this one works

http://www.example.com

[edited by: alt131 at 3:07 pm (utc) on Jul 23, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]

[MacRat1010]

Hi Alt131,

This is as far as I can get with the arrows http://www.example.com

The idea was, to just have the arrow on the <li> that opened the 2nd level (or fly out), "link4"

I tried creating a <li> class called arrow, but it didn't work ... or I was doing it wrong.

Anyway, I am very Happy with the way that this came out,

Couldn't have done it without your help.

Thanks Again

[edited by: alt131 at 3:07 pm (utc) on Jul 23, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]