Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy beginners frustration! (drop down menu)

    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
    Code:
    #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;
    			}
    Last edited by sarahinjung; 01-13-2013 at 02:27 AM.

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Can you post your HTML?

    Try this:
    Code:
    #nav ul li a:hover ul
    {
    display: block;             
    }
    Kind regards,

    Lc.
    Last edited by LearningCoder; 01-13-2013 at 02:45 AM.

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    adding that didn't seem to make any difference
    here is the html for the drop down menu...
    Code:
    <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>
    Last edited by sarahinjung; 01-13-2013 at 03:08 AM.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Element ul not allowed as child of element ul in this context
    Your nested ULs need to be contained within LIs.

    Code:
    <ul>
        <li><ul> 
                <li>...</li>
                <li>...</li>
             </ul>
        </li>
    </ul>
    Or to put it another way, ULs should only contain LIs.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    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:
    Code:
    <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.

  • #6
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...
    Code:
    #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?

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You should show your current HTML, preferably the entire page.

    BTW Just "fiddling around" won't get you very far
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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 -
    Code:
    <!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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    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.

  • #10
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ok one last try...

    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!)

    Code:
    #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)
    Code:
    <!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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •