Reply
Drop Down Menu Tutorial, CSS + xHTML only, no JS
Old 05-31-2007, 07:37 AM Drop Down Menu Tutorial, CSS + xHTML only, no JS
Skilled Talker

Posts: 74
Name: Nick Barrett
Location: Brighton
Trades: 0
I've seen quite a few people asking about this and it really is easy. Basically you have your ul with li's within and then ul and li's within that:

HTML Code:
<ul id="menu">
<li>A lovely Tab
    <ul><li>sub tab #1</li>
    <li>sub tab #2</li>
    </ul>
</li>
<li>A lovely Tab#2
    <ul><li>sub tab #21</li>
    <li>sub tab #22</li>
    </ul>
</li>
OK, that's pretty simple. Now you need to hide the extra ul's, make the primary tabs form horizontally. So we add this to the css:

Code:
ul { /*this applies to all ul tags*/
margin: 0; padding: 0; /*stops them moving around too much*/}
ul#menu li { list-style: none; float: left; padding: 5px; }
ul#menu li ul { display: none; /*hides the submenu clever bit now:*/
position: absolute; top: auto; left: auto; /*makes it appear below the item*/ }

/*now we need to show it on hover*/
ul#menu li:hover ul { display: block; }

/*now we style the sub menus li's*/
ul#menu li ul li { display: block; float: none; /*makes them appear on top of each other*/ }
Want proof it works or an example, the exact code is on this page:
http://kerplunc.com/projects/_css/drop_down_menu.php
[WARNING: do not copy that page directly, it has no <body> or <head> or <html> set up properly, it is just for testing]

Enjoy...

EDIT: I've returned, willing to help some more, bumped the thread, more examples coming soon, possibly some css thrown in/whatever.
__________________
Fanatical Host
24/7 Support | 99.5% uptime | shared | reseller | dedicated
Looking for a webhost? Try Host Scout!

Last edited by Political Monst; 12-26-2007 at 10:41 PM..
Political Monst is offline
Reply With Quote
View Public Profile
 
 
When You Register, These Ads Go Away!
Old 06-01-2007, 12:32 AM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
seolman's Avatar
Trying to Focus

Posts: 762
Name: DaveBob Roundpants III
Location: Heredia, Costa Rica
Trades: 0
Hi Nick,

Out of curiosity I went to the page... no menu just some text.
__________________
Ticode Web Design
BeRanked - Learn About SEO

seolman is offline
Reply With Quote
View Public Profile Visit seolman's homepage!
 
Old 06-01-2007, 12:59 AM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
LadynRed's Avatar
Super Moderator

Posts: 8,823
Location: Tennessee
Trades: 0
What are you talking about ? If you pass your mouse over the text, you'll see his drop down.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 06-01-2007, 06:52 AM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
Skilled Talker

Posts: 74
Name: Nick Barrett
Location: Brighton
Trades: 0
Sorry, they are the menu, you have to hover over them, I didn't style them at all because people can do that themselves, maybe I should link them though?
__________________
Fanatical Host
24/7 Support | 99.5% uptime | shared | reseller | dedicated
Looking for a webhost? Try Host Scout!
Political Monst is offline
Reply With Quote
View Public Profile
 
Old 06-01-2007, 02:50 PM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
LadynRed's Avatar
Super Moderator

Posts: 8,823
Location: Tennessee
Trades: 0
This is good Nick, I'm gonna make it a stickie
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 06-01-2007, 02:54 PM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
Skilled Talker

Posts: 74
Name: Nick Barrett
Location: Brighton
Trades: 0
Awesome, thanks ^^, should I post a message saying that I haven't styled the links?
__________________
Fanatical Host
24/7 Support | 99.5% uptime | shared | reseller | dedicated
Looking for a webhost? Try Host Scout!
Political Monst is offline
Reply With Quote
View Public Profile
 
Old 06-01-2007, 09:13 PM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
LadynRed's Avatar
Super Moderator

Posts: 8,823
Location: Tennessee
Trades: 0
I think you just did
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 06-01-2007, 10:04 PM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
Skilled Talker

Posts: 74
Name: Nick Barrett
Location: Brighton
Trades: 0
guess so lol , thanks for making it a sticky again
__________________
Fanatical Host
24/7 Support | 99.5% uptime | shared | reseller | dedicated
Looking for a webhost? Try Host Scout!
Political Monst is offline
Reply With Quote
View Public Profile
 
Old 06-03-2007, 09:20 AM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
Skilled Talker

Posts: 74
Name: Nick Barrett
Location: Brighton
Trades: 0
oops, broke the link, it's fixed now everyone ^^
__________________
Fanatical Host
24/7 Support | 99.5% uptime | shared | reseller | dedicated
Looking for a webhost? Try Host Scout!
Political Monst is offline
Reply With Quote
View Public Profile
 
Old 06-04-2007, 02:34 AM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
larryc's Avatar
Novice Talker

Posts: 7
Name: larry
Trades: 0
Great menu layout! But, not in IE..
__________________
Life on Mars..?
Not since we left.
larryc is offline
Reply With Quote
View Public Profile
 
Old 06-04-2007, 03:43 AM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
Skilled Talker

Posts: 74
Name: Nick Barrett
Location: Brighton
Trades: 0
I'm on a mac so I can't test it, however, which version of IE is this? If 7 then I can make a workaround if 6 then probably not.
__________________
Fanatical Host
24/7 Support | 99.5% uptime | shared | reseller | dedicated
Looking for a webhost? Try Host Scout!
Political Monst is offline
Reply With Quote
View Public Profile
 
Old 06-10-2007, 01:18 AM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
Average Talker

Posts: 29
Name: Efthimios Arvanitis (call me Mike)
Trades: 0
Short, sweet, and to the point. Nice little code snippet.
__________________
URLhost.NET : SHARED & RESELLER · VPS & DEDICATED · DOMAIN NAMES · SERVER MANAGEMENT
PHP 4 & 5 · cPanel · Fantastico · RVSkin · Flash Tutorials · WHM-Reseller · FREE Billing Software!
URLhost arvo is offline
Reply With Quote
View Public Profile Visit URLhost arvo's homepage!
 
Old 06-30-2007, 02:43 PM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
Average Talker

Posts: 29
Name: Efthimios Arvanitis (call me Mike)
Trades: 0
This does NOT work for Internet Explorer. Very disappointing. I will attempt to fix that...
__________________
URLhost.NET : SHARED & RESELLER · VPS & DEDICATED · DOMAIN NAMES · SERVER MANAGEMENT
PHP 4 & 5 · cPanel · Fantastico · RVSkin · Flash Tutorials · WHM-Reseller · FREE Billing Software!
URLhost arvo is offline
Reply With Quote
View Public Profile Visit URLhost arvo's homepage!
 
Old 06-30-2007, 05:59 PM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
LadynRed's Avatar
Super Moderator

Posts: 8,823
Location: Tennessee
Trades: 0
No need.. IE 6 and older only supports the hover on the <a> tag. To solve that, you can use a behavior, called 'whatever hover". You can get the .htc file and the explanation here: http://www.xs4all.nl/~peterned/csshover.html
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 07-01-2007, 04:14 AM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
EGS
EGS's Avatar
King of Webmaster-Talk

Latest Blog Post:
Can Links Hurt Rankings?
Posts: 854
Name: Justice McCay
Location: New Jersey
Trades: 2
Quote:
Originally Posted by LadynRed View Post
No need.. IE 6 and older only supports the hover on the <a> tag. To solve that, you can use a behavior, called 'whatever hover". You can get the .htc file and the explanation here: http://www.xs4all.nl/~peterned/csshover.html
**** IE! !
__________________
Green talkupation is always appreciated. =]
Free Online Games - Cheap Power Leveling - Pontiac Grand Am
EGS is offline
Reply With Quote
View Public Profile
 
Old 07-01-2007, 05:58 AM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
Skilled Talker

Posts: 60
Name: bilton
Trades: 0
not working on IE. only some text is displyed
rgds
bil
niceguy_81333 is offline
Reply With Quote
View Public Profile
 
Old 07-05-2007, 10:48 PM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
Junior Talker

Posts: 1
Name: Brock Cook
Location: South Australia, Australia
Trades: 0
i just tried it on my webpage and Tested it without uploading it to a server and worked fine, still trying to figure out to align it to the Right and how to make it drop under and not to the Right of it.
__________________
HTML Pro, but the PHP Newbie.
bwuuci is offline
Reply With Quote
View Public Profile Visit bwuuci's homepage!
 
Old 07-07-2007, 03:03 PM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
ForrestCroce's Avatar
Half Man, Half Amazing

Posts: 3,024
Name: Forrest Croce
Location: Seattle, WA
Trades: 0
Quote:
Originally Posted by LadynRed View Post
No need.. IE 6 and older only supports the hover on the <a> tag.
Ahem. IE 666.
ForrestCroce is offline
Reply With Quote
View Public Profile Visit ForrestCroce's homepage!
 
Old 07-07-2007, 03:38 PM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
Skilled Talker

Posts: 74
Name: Nick Barrett
Location: Brighton
Trades: 0
Quote:
Originally Posted by ForrestCroce View Post
Ahem. IE 666.
lol sorry 'bout IE guys, it just sucks, but as previously stated, a work-around is available for those who insist on using the evil browser (and for those who want to let their IE visitors see the site properly ).
__________________
Fanatical Host
24/7 Support | 99.5% uptime | shared | reseller | dedicated
Looking for a webhost? Try Host Scout!
Political Monst is offline
Reply With Quote
View Public Profile
 
Old 07-17-2007, 11:56 AM Re: Drop Down Menu Tutorial, CSS + xHTML only, no JS
Junior Talker

Posts: 3
Trades: 0
why do you use ul? I'm new in this field so I was wondering why didn't you use ol?
memered is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Drop Down Menu Tutorial, CSS + xHTML only, no JS

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 



Page generated in 0.20237 seconds with 13 queries