Jump to content

Dropdown Menu - submenu not displaying


JamesB

Recommended Posts

Hey,I'm trying to make a basic dropdown menu, heres the code:

<html><head><style type="text/css">ul {	list-style:none;	border:solid 1px #000000;	margin:0;	padding:0;}li {	position:relative;	margin:0;	padding:0;}li.menu1 {	display:inline;}ul.menu2 {	position:absolute;	display:none;}li.menu1:hover ul.menu2 {	display:block;}</style></head><body><div class="menu">  <ul class="menu1">	<li class="menu1">Home</li>	  <ul class="menu2">		<li class="menu2">Home 1</li>		<li class="menu2">Home 2</li>	  </ul>	<li class="menu1">Page2</li>  </ul></div></body></html>

The submenu (ul.menu2) is not appearing when I scroll over the Home text (li.menu1).I can't figure out why it's not working, as the code below should set the display type to block on the submenu whenever I hover over the Home text.

li.menu1:hover ul.menu2 {	display:block;}

If anyone can help it will be really appreciated.ThanksJames

Link to comment
Share on other sites

Well first of all your in quirks mode..might wanna do the correct tag you want but anyway..Can you post a link to ur website or is this your entire code? because when i save it on my local host it doesnt display a dropdown at all..just text

Link to comment
Share on other sites

Sorry I don't have the time to check out all your code, but depending on the type of navigation you want, this page may prove useful:http://www.alistapart.com/articles/horizdropdowns/
Thanks, but I checked that page before making this topic and couldn't find what I'm doing wrong.
Well first of all your in quirks mode..might wanna do the correct tag you want but anyway..Can you post a link to ur website or is this your entire code? because when i save it on my local host it doesnt display a dropdown at all..just text
That's my entire code.Basically I want another list (ul.menu2) to appear under the "Home" text when I hover the mouse over the "Home" text.
Link to comment
Share on other sites

The problem is your markup. You're closing the <li> tag before the <ul> tag is put:

<li class="menu1">Home</li>	  <ul class="menu2">		<li class="menu2">Home 1</li>		<li class="menu2">Home 2</li>	  </ul>

Put it this way instead:

<li class="menu1">Home	  <ul class="menu2">		<li class="menu2">Home 1</li>		<li class="menu2">Home 2</li>	  </ul></li>

Link to comment
Share on other sites

Also if your planning on doing much more id put a doc type in your webpage so it is not in quirks mode. Try searching the homepage of this site w3schools.com for doc types. theres a bunch of different types depending on what you want it to be.

Link to comment
Share on other sites

  • 2 weeks later...

I just wanted to post a question on how to create dropdown (well, this way more like dropout) menu's.Thanks for everyone who posted in this topic, because now I already understand without asking!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...