beginners frustration! (drop down menu)

[sarahinjung]

i'm still a novice at this, and dropdown menus are just so darn confusing to me, and seem to have unlimited ways of doing it... can someone please tell me what is wrong with this?
the main menu items show, but the drop down sub menu items aren't showing

#nav{
	width: 100%;
	display: inline-block;
	text-align: right;
	float: right;
}
	#nav ul ul{
	display: none;
	}

		
	
		#nav ul li{
			display: inline-block;
			height: 62px;
		}
			#nav ul li a{
				padding: 20px;
				background: orange;
				color: white;
			}
			#nav ul li a:hover{
				text-decoration: none;
				background-color: #ffb424;
				box-shadow: 0px 4px 5px #666;
			}

[LearningCoder]

Can you post your HTML?

Try this:

#nav ul li a:hover ul
{
display: block;             
}

Kind regards,

Lc.

[sarahinjung]

adding that didn't seem to make any difference
here is the html for the drop down menu...

<div id="nav">
			<ul>
			<li><a href="#/home.html">Home</a></li>
			<li><a href="#/about.html">About Us</a></li>
					<ul>
					<li><a href="beliefs.html">Our Beliefs</a> </li>
					<li><a href="vision.html">Our Vision</a> </li>
					<li><a href="pastors.html">Our Pastors</a> </li>
					<li><a href="staff.html">Our Staff</a> </li>
                                        <li><a href="newhere.html">New Here?</a> </li>
				</ul>
			<li><a href="#/about.html">Ministries</a></li>
					<ul>
					<li><a href="blessedlife.html">BlessedLife</a> </li>
					<li><a href="familylife.html">FamilyLife</a> </li>
					<li><a href="kidslife.html">KidsLife</a> </li>
					<li><a href="yalife.html">YoungAdultLife</a> </li>
                                        <li><a href="careteam.html">Our Care Team</a> </li>
				</ul>
			<li><a href="#/contact.html">Media</a></li>
					<ul>
					<li><a href="messages.html">Messages</a> </li>
					<li><a href="gallery.html">Gallery</a> </li>
				</ul>
			<li><a href="#/home.html">Contribute</a></li>
				<ul>
					<li><a href="volunteer.html">Volunteer</a> </li>
					<li><a href="donate.html">Donate</a> </li>
				</ul>
				<li><a href="#/contact.html">Connect</a></li>
				<ul>
					<li><a href="service.html">Sunday Service</a> </li>
					<li><a href="midweek.html">Midweek Experience</a> </li>
					<li><a href="smallgroups.html">Small Groups</a> </li>
					<li><a href="calendar.html">Our Calendar</a> </li>
                                        <li><a href="contactus.html">Contact Us</a> </li>
				</ul>
				
			</ul>	
		</div>

[AndrewGSW]

Element ul not allowed as child of element ul in this context

Your nested ULs need to be contained within LIs.

<ul>
    <li><ul> 
            <li>...</li>
            <li>...</li>
         </ul>
    </li>
</ul>

Or to put it another way, ULs should only contain LIs.

[LearningCoder]

When you create drop down menus you have to nest another <ul> inside the <li> but here you have closed out the <li> then created the drop down <ul>

Try this:

<div id="nav">
    <ul>
        <li><a href="#/home.html">Home</a></li>
        <li><a href="#/about.html">About Us</a>
            <ul>
                <li><a href="beliefs.html">Our Beliefs</a> </li>
                <li><a href="vision.html">Our Vision</a> </li>
                <li><a href="pastors.html">Our Pastors</a> </li>
                <li><a href="staff.html">Our Staff</a> </li>
                <li><a href="newhere.html">New Here?</a> </li>
            </ul>
        <li><a href="#/about.html">Ministries</a>
            <ul>
                <li><a href="blessedlife.html">BlessedLife</a> </li>
                <li><a href="familylife.html">FamilyLife</a> </li>
                <li><a href="kidslife.html">KidsLife</a> </li>
                <li><a href="yalife.html">YoungAdultLife</a> </li>
                <li><a href="careteam.html">Our Care Team</a> </li>
            </ul>
        <li><a href="#/contact.html">Media</a>
            <ul>
                <li><a href="messages.html">Messages</a> </li>
                <li><a href="gallery.html">Gallery</a> </li>
            </ul>
        <li><a href="#/home.html">Contribute</a>
            <ul>
                <li><a href="volunteer.html">Volunteer</a> </li>
                <li><a href="donate.html">Donate</a> </li>
            </ul>
        <li><a href="#/contact.html">Connect</a>
            <ul>
                <li><a href="service.html">Sunday Service</a> </li>
                <li><a href="midweek.html">Midweek Experience</a> </li>
                <li><a href="smallgroups.html">Small Groups</a> </li>
                <li><a href="calendar.html">Our Calendar</a> </li>
                <li><a href="contactus.html">Contact Us</a> </li>
            </ul>    
    </ul>    
</div>

Try that with the css I posted earlier.

Let me know if it works!

Kind regards,

LC.

[sarahinjung]

my last post won't show... basically i changed the html and css as suggested, but it didn't work
but actually just from fiddling around i seem to be getting somewhere... this is what i did with the css...

#nav{
	width: 100%;
	display: inline-block;
	text-align: right;
	float: right;
}
	#nav ul ul{
	display: none;
	}
	
	
		
	
		#nav ul li{
			display: inline-block;
			height: 62px;
		}
			#nav ul li a{
				padding: 20px;
				background: orange;
				color: white;
			}
				
			#nav ul li a:hover{
				text-decoration: none;
				background-color: #ffb424;
				box-shadow: 0px 4px 5px #666;
			}
				
				#nav ul li ul {
					display: none;
				}
				
				#nav ul li:hover ul {	
					display: block;             
				}
				#nav ul li:hover li {
					display: block;             
				}

so now, the sub menu shows up, and it's even going down vertically, BUT the whole menu gets all weird and messy looking whenever the sub menu shows... like everything moves around you know?

[AndrewGSW]

You should show your current HTML, preferably the entire page.

BTW Just "fiddling around" won't get you very far

[Excavator]

Hello sarahinjung,
The last version of markup you posted is still invalid. You don't properly close some of your li's.

Check out the links in my signature line about validation. They can really help by finding little mistakes like that.

That latest version of CSS does not style the dropped ul's. All it does is hide them and make them visible on hover.

Have a look at your menu like this -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	background: #fc6;
}
#container {
	width: 960px;
	margin: 30px auto;
	padding: 0 0 300px;
	background: #fff;
	box-shadow: 0 0 20px #8493A6;
	overflow: hidden;
}
#nav {
  margin: 0;
padding: 0;
}
ul#nav li {
	display: inline-block;
	line-height: 62px;
	position: relative;
}
ul#nav li a {
	padding: 20px;
	background: orange;
	color: white;
}
	ul#nav li a:hover {
		text-decoration: none;
		background-color: #ffb424;
		box-shadow: 0px 4px 5px #666;
	}
ul#nav li ul {
  height: 62px;
  width: 800px;;
	position: absolute;
	top: 62px;
	left: -10000px;
}
	ul#nav li:hover ul {left: 0;}
ul#nav li ul li {float: left;}
</style>
</head>
<body>
    <div id="container">
        <ul id="nav">
            <li><a href="#/home.html">Home</a></li>
            <li><a href="#/about.html">About Us</a>
                <ul>
                    <li><a href="beliefs.html">Our Beliefs</a> </li>
                    <li><a href="vision.html">Our Vision</a> </li>
                    <li><a href="pastors.html">Our Pastors</a> </li>
                    <li><a href="staff.html">Our Staff</a> </li>
                    <li><a href="newhere.html">New Here?</a> </li>
                </ul>
            </li>
            <li><a href="#/about.html">Ministries</a>
                <ul>
                    <li><a href="blessedlife.html">BlessedLife</a> </li>
                    <li><a href="familylife.html">FamilyLife</a> </li>
                    <li><a href="kidslife.html">KidsLife</a> </li>
                    <li><a href="yalife.html">YoungAdultLife</a> </li>
                    <li><a href="careteam.html">Our Care Team</a> </li>
                </ul>
            </li>
            <li><a href="#/contact.html">Media</a>
                <ul>
                    <li><a href="messages.html">Messages</a> </li>
                    <li><a href="gallery.html">Gallery</a> </li>
                </ul>
            </li>
            <li><a href="#/home.html">Contribute</a>
                <ul>
                    <li><a href="volunteer.html">Volunteer</a> </li>
                    <li><a href="donate.html">Donate</a> </li>
                </ul>
            </li>
            <li><a href="#/contact.html">Connect</a>
                <ul>
                    <li><a href="service.html">Sunday Service</a> </li>
                    <li><a href="midweek.html">Midweek Experience</a> </li>
                    <li><a href="smallgroups.html">Small Groups</a> </li>
                    <li><a href="calendar.html">Our Calendar</a> </li>
                    <li><a href="contactus.html">Contact Us</a> </li>
                </ul>
            </li>   
        </ul>  
    <!--end container--></div>
</body>
</html>

Based loosely on this example.

[LearningCoder]

That's my fault to be fair, I asked her to try some code which I'd edited but I didn't close out the <li>'s which contain the <ul>'s.

Apologies.

LC.

[sarahinjung]

ok, so i promise i have been trying EVERYTHING suggested and things just don't seem to work. and so yes, i have kept fiddling, but for some reason, it seems to look better and better, and right now i really have one issue, and thats that my submenu is in a fixed position on the left side, rather then showing up directly under its tab.
here is the css... (yes i know it is probably full of wrong things, but hey, it almost totally works!)

#nav{
	width: 100%;
	display: inline-block;
	text-align: right;
	float: right;
	  margin: 0;
	padding: 0;

}

#nav ul {
position: absolute;
left: 22%;
top: 28%;
}
	#nav ul ul{
	display: none;
	}
	
	
		
	
		#nav ul li{
			display: inline-block;
			height: 62px;
		}
			#nav ul li a{
				padding: 15px;
				background: orange;
				color: white;
				border: solid;
			}
				
			#nav ul li a:hover{
				text-decoration: none;
				background-color: #ffb424;
				box-shadow: 0px 4px 5px #666;
			}
				
				#nav ul li ul {
					display: none;
					position: fixed;
					padding: 0px;
					margin-left: auto;
					margin-right: auto;
					

				}
				
				#nav ul li ul li a {
				padding: 10px;
				display: inline-block;
				background: #688A08;
				color: white;
				}
				
				#nav ul li:hover ul {	
					display: inline-block;          
				}
				#nav ul li:hover li {
					display: inline-block;             
				}

and here is the html...(i'm including everything incase i looked over something)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />


<!-- your webpage info goes here -->

    <title>Chicago Unification Church</title>
	
	<meta name="author" content="your name" />
	<meta name="description" content="" />

<!-- you should always add your stylesheet (css) in the head tag so that it starts loading before the page html is being displayed -->	
	<link rel="stylesheet" href="ucchicago.css" type="text/css" />
	
</head>
<body>

<!-- webpage content goes here in the body -->

	<div id="page">
		<div id="logo">
			<img src="images/uclogo.png">
		
		<div id="nav">
    <ul>
        <li><a href="#/home.html">Home</a><ul><li></li></ul>
        <li><a href="#/about.html">About Us</a>
            <ul>
                <li><a href="beliefs.html">Our Beliefs</a> </li>
                <li><a href="vision.html">Our Vision</a> </li>
                <li><a href="pastors.html">Our Pastors</a> </li>
                <li><a href="staff.html">Our Staff</a> </li>
                <li><a href="newhere.html">New Here?</a> </li>
            </ul>
        <li><a href="#/about.html">Ministries</a>
            <ul>
                <li><a href="blessedlife.html">BlessedLife</a> </li>
                <li><a href="familylife.html">FamilyLife</a> </li>
                <li><a href="kidslife.html">KidsLife</a> </li>
                <li><a href="yalife.html">YoungAdultLife</a> </li>
                <li><a href="careteam.html">Our Care Team</a> </li>
            </ul>
        <li><a href="#/contact.html">Media</a>
            <ul>
                <li><a href="messages.html">Messages</a> </li>
                <li><a href="gallery.html">Gallery</a> </li>
            </ul>
        <li><a href="#/home.html">Contribute</a>
            <ul>
                <li><a href="volunteer.html">Volunteer</a> </li>
                <li><a href="donate.html">Donate</a> </li>
            </ul>
        <li><a href="#/contact.html">Connect</a>
            <ul>
                <li><a href="service.html">Sunday Service</a> </li>
                <li><a href="midweek.html">Midweek Experience</a> </li>
                <li><a href="smallgroups.html">Small Groups</a> </li>
                <li><a href="calendar.html">Our Calendar</a> </li>
                <li><a href="contactus.html">Contact Us</a> </li>
            </ul>    
    </ul>    
</div>
		
		<div id="content">
			<h2>Home</h2>
			<p>
				This is where upcoming events will go
			</p>
		 
		</div>
		<center>
		<div id="cal">
		
			
			<p>
				<a href="https://www.google.com/calendar/embed?src=lovinlifechicago%40gmail.com&ctz=America/New_York"><img src="images/calendar.png"></a>
			</p>
			</div>
			<div id="map">
			
			<p>
				<a href="https://maps.google.com/maps?hl=en&q=1443+west+schaumburg+road,+schaumburg,+il&ie=UTF-8&hq=&hnear=0x880fa8e3b671da37:0xc68502963d6ebee6,1443+W+Schaumburg+Rd,+Schaumburg,+IL+60193&gl=us&daddr=1443+W+Schaumburg+Rd,+Schaumburg,+IL+60193&ei=8QLtUMa-OYKGqgHc9IAY&sqi=2&ved=0CDMQwwUwAA"><img src="images/map.png"></a>
			</p>
			</div>
			<div id="other">
		
			<p>
			<a href="http://www.ucchicago.org"><img src="images/church.png"></a>
			</p>
			</div>
			</center>
		<div id="footer">
			<p>
				1443 West Schaumburg Rd. Schaumburg, Il | Webpage made by <a href="/" target="_blank">[Sarah and Kuni]</a>
			</p>
		</div>
	</div>
</body>
</html>

sorry i have so much trouble with this.. you guys are all really nice! and if it still doesn't work after all this, i'll leave you alone lol