HOME | DD
LineBirgitte โ Drop Down Menu
Published: 2009-05-19 12:54:35 +0000 UTC; Views: 2537; Favourites: 35; Downloads: 0
Redirect to original
Description
body div#devskin3741017 .gr-box { background:white; padding-top:20px; } body div#devskin3741017 .menu_ { background:#f4f4f4; text-align:center; padding:0 88px; font-weight:bolder; } body div#devskin3741017 .menu_ br { display:none; } body div#devskin3741017 .menu_ u { display:inline-block; text-decoration:none !important; color:#00f; cursor:default; position:relative; background:transparent; width:80px; padding:4px; height:14px; } body div#devskin3741017 .menu_ u i { text-align:left; font-style:normal; display:none; position:absolute; left:0px; right:0px; top:22px; background:#e4e4e4; } body div#devskin3741017 .menu_ u:hover i { display:inline-block; } body div#devskin3741017 u:hover { background:#e4e4e4; color:#f00; } body div#devskin3741017 .menu_ u i u { text-align:left; position:relative; display:inline-block; } body div#devskin3741017 .menu_ u i u:hover { color:#f00; } body div#devskin3741017 .menu_ u i u i { text-align:left; font-style:normal; display:none!important; position:absolute; background:#e4e4e4; padding:4px; left:88px; top:0px; min-width:80px; } body div#devskin3741017 .menu_ u i u:hover i { display:inline-block!important; } body div#devskin3741017 .menu_ u i u u { text-align:left; font-style:normal; display:none!important; position:absolute; background:#e4e4e4; padding:4px; left:88px; top:0px; min-width:165px!important; } body div#devskin3741017 .menu_ u i u u .shadow-holder { display:inline-block; padding:4px 7px 4px 8px; margin-left:-4px; background-color:#e4e4e4; } body div#devskin3741017 .menu_ u i u:hover u { display:inline-block!important; } body div#devskin3741017 code { display:block; max-height:150px; overflow:auto; border:dashed 1px; background:#e2f2e5; margin-bottom:20px; padding:5px; margin-right:0px; } body div#devskin3741017 code br { display:inline-block!important; } body div#devskin3741017 .text { margin-bottom:100px; text-align:justify; font-family:arial; } body div#devskin3741017 p { } body div#devskin3741017 .gr-body { background:transparent; border:none; } body div#devskin3741017 .gr-body .gr { background:transparent; border:none; } body div#devskin3741017 .gr-top { background:transparent; border:none; } body div#devskin3741017 .gr-top .gr { background:transparent; border:none; } body div#devskin3741017 .gr-top img { display:none; } body div#devskin3741017 .gr-top .gr h2 { background:transparent; border:none; font-size:20px; font-weight:bold; font-family:arial; } body div#devskin3741017 .gr-top .gr span { background:transparent; border:none; font-family:arial; color:grey; } body div#devskin3741017 .tri { display:none; } body div#devskin3741017 .gr1 { display:none; } body div#devskin3741017 .gr2 { display:none; } body div#devskin3741017 .gr3 { display:none; } body div#devskin3741017 .commentslink { } body div#devskin3741017 .prevlink { } body div#devskin3741017 .bottom { } body div#devskin3741017 .bottom a { text-decoration:none!important; } body div#devskin3741017 .list { } body div#devskin3741017 .f { } body div#devskin3741017 strong { } body div#devskin3741017 li { } body div#devskin3741017 .list { display:none; } body div#devskin3741017 .minigal { margin:0px; text-align:center; } body div#devskin3741017 .minigal .shadow { background-image:none!important; } body div#devskin3741017 .minigal a { display:inline-block; width:50px!important; height:50px!important; overflow:hidden; border:solid #fff; border-width:5px 5px 5px 12px; outline:1px solid #ccc; } body div#devskin3741017 .minigal img { margin:-20px -50px; } body div#devskin3741017 .minigal a:hover { border-color:#000!important; outline:1px solid transparent!important; } body div#devskin3741017 .minigal a:hover img { z-index:99; position:absolute; margin:-5px 0 0 0px; border:10px solid #000; }
Level 1a
Level 2a_aLevel 3a_a_a
Level 2a_b
Level 2a_cLevel 3a_c_cย ย
Level 1b
Level 2b_aLevel 3b_a_a
Level 2b_b
Level 1c
Level 2c_aLevel 3c_a_a
Level 2c_b
The HTML:
Okay - so using this is kinda like writing a list, it all comes down to wrapping each element inside the previous.
for simplicity I have made a costum div for the menu and called it (drumroll please) menu_ (menu is used by deviantArt somewhere) I have defined and inside the menu, so if you want to make something italic outside the menu - or use the tag for something else, you can.
let's start with one level 1 (level 1a)
the html would be:
<div class="menu_">
<u>
Level 1a
</u>
</div>
which would then look like:
Level 1a
so - the first inside the menu_ is level 1, yes? By adding more we will get level 1b and 1c:
<div class="menu_">
<u>
Level 1a
</u>
<u>
Level 1a
</u>
<u>
Level 1a
</u>
</div>
which now looks like:
Level 1a
Level 1a
Level 1a
Moving on to level 2 - we'll focus on the dropout from level 1a, so I'm deleting level 1b and level 1c for now. To create a dropout we will use the tag inside the tag - like this:
<div class="menu_">
<u>
Level 1a
<i>Level2a_a</i>
</u>
</div>
which brings us:
Level 1a
Level2a_a
Which looks weird - and that is why you have to warp each item in your drop down menu in another <u> tag:
<div class="menu_">
<u>
Level 1a
<i>
<u>Level2a_a</u>
</i>
</u>
</div>
Adding one more item (level2a_b) to the drop down menu will look like this:
<div class="menu_">
<u>
Level 1a
<i>
<u>Level2a_a</u>
<u>Level2a_b</u>
</i>
</u>
</div>
Which will look like this:
Level 1a
Level2a_a
Level2a_b
And of course you could out a 100 items in level 2 if you wanted.
Now to the last level (level 3) - this is placed in tags inside the tag - I will only be placing one in level2a_a:
<div class="menu_">
<u>
Level 1a
<i>
<u>Level 2a_a<i>Level 3a_a_a</i></u>
<u>Level2a_b</u>
</i>
</u>
</div>
Which gives:
Level 1a
Level 2a_aLevel 3a_a_a
Level2a_b
Placing a thumb in Level 3 will cause the thumb to show outside the box:
Replace the tag with a tag like this:
<div class="menu_">
<u>
Level 1a
<i>
<u>Level 2a_a<u>:thumb123456:</u></u>
<u>Level2a_b</u>
</i>
</u>
</div>
It makes the box bigger (160px instead of 80px):
You could also use this to keep more info in a popout, since it's wider 
Instead of simply putting thumbs in there you could use foundsoundfunny s minithumbs
Level 1a
Level 2a_a
Level2a_b
I made some adjustments to the mini thumbs css so it works vertically - it's not that difficult, so if you want it you can probably figure it out
The html for the top dropdown menu:
<div class="menu_">
<u>
Level 1a
<i>
<u>Level 2a_a<i>Level 3a_a_a</i></u>
<u>Level 2a_b</u>
<u>Level 2a_c<u>Level 3a_c_c :thumb123456:</u></u>
</i>
</u>
<u>
Level 1b
<i>
<u>Level 2b_a<i>Level 3b_a_a</i></u>
<u>Level 2b_b</u>
</i>
</u>
<u>
Level 1c
<i>
<u>Level 2c_a<i>Level 3c_a_a</i></u>
<u>Level 2c_b</u>
</i>
</u>
</div>
The Css
.menu_ {background:#f4f4f4 ; text-align:center; padding:0 88px; font-weight:bolder;}
.menu_ br {display:none;}
.menu_ u{
display:inline-block;
text-decoration: none !important;
color: #00f ;
cursor: default;
position: relative;
background:transparent;
width:80px;
padding:4px;
height:14px;
}
.menu_ u i{
text-align:left;
font-style:normal;
display: none;
position: absolute;
left:0px;
right:0px;
top:22px;
background:#e4e4e4 ;
}
.menu_ u:hover i{display: inline-block}
u:hover{background:#e4e4e4 ; color: #f00 }
.menu_ u i u{
text-align:left;
position:
relative;
display:inline-block;
}
.menu_ u i u:hover{color: #f00 }
.menu_ u i u i{
text-align:left;
font-style:normal;
display: none!important;
position: absolute;
background:#e4e4e4 ;
padding:4px;
left:88px;
top:0px;
min-width:80px;
}
.menu_ u i u:hover i{display: inline-block!important;}
.menu_ u i u u{
text-align:left;
font-style:normal;
display: none!important;
position: absolute;
background:#e4e4e4 ;
padding:4px;
left:88px;
top:0px;
min-width:165px!important;
}
.menu_ u i u u .shadow-holder {
display:inline-block;
padding:4px 7px 4px 8px;
margin-left:-4px;
background-color:#e4e4e4 ;
}
.menu_ u i u:hover u{display: inline-block!important;}
Having trouble with the code? Leave a comment
Related content
Comments: 29
do we have to submit this in a certain place because i tried doing it in my journal and it didn't work.
๐: 0 โฉ: 0
Thank you so much for the coding
I do have question though; the drop down menu goes behind the main body and not in front, is there a way I can fix this?
This is where I used it:ย Welcome to Innola
Thank you so much again! <3ย
๐: 0 โฉ: 0
do you think it's possible to give the dropdown a full journal width? i've been trying to figure that out... but actually not with your tutorial... but with `thespook
yours kinda didn't show up in my old FF2... :/
๐: 0 โฉ: 1
sure, why not? Position: absolute; left:0px; right:0px; remember that it will "go to" the last element with position:relative; or position:absolute;
oh, you should definitly use the thespooks. His is tested by lot's of people - mine isn't.
๐: 0 โฉ: 1
mmh... maybe still needs some work
the problem is, that his is only vertical, and i want it horizontally (like yours)
i started it here [link]
๐: 0 โฉ: 1
yeah - I need to rework mine. I learned a lot doing it though, and that was the point.
how did you place the links? if you place them as inline blocks and set the position to auto placing the drop box to the right and left of the journalbox shouldn't be a problem.
๐: 0 โฉ: 1
yeah, that's true, it's about learning as well
๐: 0 โฉ: 0
A coding goddess... Perhaps a queen! Haha and Nick is the king.
๐: 0 โฉ: 1
I'll take goddess over queen any day
๐: 0 โฉ: 1
Impressing Nick is not easy 
Looks really nice. I tried to make some hover lists a while ago too, but i got totally confused after a while(i tried too much i guess) and switched back to the ul/li
Had a similar hover menu for a contest entry [link] but yours look more stable 
๐: 0 โฉ: 1
The link is broken
I got confused with the ul/li
this doesn't have that confusing positions, I would like to know if it works in iE though, but I don't want to download iE 'cause it's so big and it will probably mess up my computer
๐: 0 โฉ: 1
Because of the damn , behind it. This should work [link]
It is confusing, although basically it is all the same
Hover-menus don't work with IE, you don't need to download it to try it. IE allows hover only on text.
I had a special reason why i had to use positions, but can't remember why
๐: 0 โฉ: 1
But I would like to see what it looks like - does it it display it all? Because if it does I was thinking I should use _display:none; better with no drop down than a drop down all the time.
Maybe because the menu it self is positioned absolute? It looks great though
๐: 0 โฉ: 1
It does nothing, it just displays the main links. But if you want to be save, i would add a display: none; on the sub u/i lists
Yeah something like that. Thanks
๐: 0 โฉ: 0
h1 and stuff only work in newsarticles
you are turning into a CSS Rock Goddess!ยก
๐: 0 โฉ: 1
๐: 0 โฉ: 1
yeah, but it's one of the rare things you can do to newsarticles anyway ๐: 0 โฉ: 1
i'd just call it
nah, you have to define the sizes yourself still...
it just end a normal tag... damn, i think i wasn't thinking that to an end
๐: 0 โฉ: 0
Impressive
Took me a moment to figure out why you used <u> and <i> though - a neat way to trim a character per tag over using list tags.
Although I use certain tags in err, interesting ways too, in this case I think it's not really worth it. People would usually only build their menu once, so saving them from typing out a lot of tags isn't that important, and it doesn't make the lists any easier to put together, since the same thing that can confuse people with list tags will confuse them here.
That said, I am impressed. Do I have a contender on the block out for my title?
๐: 0 โฉ: 1
I must admit i chose and mainly because they don't "break the line", but I learned a lot while doing this.
and yeah, I looked at your vertical list again after doing this, and it made a lot more sense than before I did this - what I mean is: if people don't go through the mess of getting everthing working it's very hard to understand why everything goes where it goes.
Am I making any sense? 
I'm glad I managed to impress you, but I would like to keep benefiting from all the hard work you do
๐: 0 โฉ: 1
Woah, what you did with the mini thumbs was brilliant, I never thought of that, but it works so much better. I like this
๐: 0 โฉ: 1
๐: 0 โฉ: 0
I put a little green in there - just for you
๐: 0 โฉ: 1
