CSS Custom made menu problem

rogerzebra · May 19, 2005

Hi fellas,

This time I'm struggling with a menu in css, and I'm in desparate need of someones help. I have made an image mouse over type of thing. Were all menu images is in different sizes which is why I have problem with this thing. The menu works fine except for one function there one of the menu item is supposed to have an dropdown menu beneth. I would really appreciate if any of you could have a look at it.
here's the code

Code:

///////////////////css/////////////////////////
<style>
	body
		{
			margin: 0;	
				padding: 0;
					font-size: 95%;
						font-family: Verdana, Arial, Helvetica,;
							color: #000;
						background-color: #fff;
					background-image: url(images/nl_background_multi.jpg);
		}

	#navmenu
		{
	list-style: none;
	position: absolute;
	left: 252px;
	top: 115px;
	width: 637px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: none;
	height: 99px;
		}

ul#navmenu2 li:hover > ul {
    display: block;
}


#navmenu li#item1
		{
			list-style: none;
				display: block;
					float: left;
						top: 115px;
							height: 30px;
								width: 93px;
							margin: 0px 0px 0px 0px;
						padding: 0px 0px 0px 0px;
		}

#navmenu li#item1 a
		{
			list-style: none;
				display: block;
					height: 30px;
						width: 93px;
					margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
			background-repeat: no-repeat;
		}

#navmenu li#item2
		{
			list-style: none;
				display: block;
					float: left;
						top: 115px;
							height: 30px;
						width: 90px;
					margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
		}

#navmenu li#item2 a
		{
			list-style: none;
				display: block;
					height: 30px;
						width: 90px;
							margin: 0px 0px 0px 0px;
						padding: 0px 0px 0px 0px;
					background-repeat: no-repeat;
		}

#navmenu li#item3
		{
			list-style: none;
				display: block;
					float: left;
						top: 115px;
							height: 30px;
						width: 167px;
					margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
		}

#navmenu li#item3 a
		{
			list-style: none;
				display: block;
					height: 30px;
						width: 167px;
					margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
			background-repeat: no-repeat;
		}

#navmenu li#item4
		{
			list-style: none;
				display: block;
					float: left;
						top: 115px;
							height: 30px;
						width: 63px;
					margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
		}

#navmenu li#item4 a
		{
			list-style: none;
				display: block;
					height: 30px;
						width: 63px;
					margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
			background-repeat: no-repeat;
		}

#navmenu li#item5
		{
			list-style: none;
				display: block;
					float: left;
						top: 115px;
						height: 30px;
					width: 67px;
				margin: 0px 0px 0px 0px;
			padding: 0px 0px 0px 0px;
		}

#navmenu li#item5 a
		{
			list-style: none;
				display: block;
					height: 30px;
						width: 67px;
					margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
			background-repeat: no-repeat;
		}

#navmenu li#item6
		{
			list-style: none;
				display: block;
					float: left;
						top: 115px;
						height: 30px;
					width: 149px;
				margin: 0px 0px 0px 0px;
			padding: 0px 0px 0px 0px;
		}

#navmenu li#item6 a
		{
			list-style: none;
				display: block;
					height: 30px;
						width: 149px;
					margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
			background-repeat: no-repeat;
		}
		#navmenu li#item7
		{
			list-style: none;
				display: block;
					position: absolute;
						left: 304px;
							top: 150px;
								height: 22px;
							width: 161px;
						
					margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
		}

#navmenu li#item7 a
		{
			list-style: none;
				display: block;
					position: absolute;
					left: 304px;
						top: 150px;
							height: 22px;
								width: 161px;
							
						margin: 0px 0px 0px 0px;
					padding: 0px 0px 0px 0px;
				background-repeat: no-repeat;
		}


						
	

#navmenu li#item1 a
	{
		background-image:  url(images/new_about_us.jpg);	
	}
#navmenu li#item2 a
	{
		background-image:  url(images/new_programs.jpg);
	}
#navmenu li#item3 a
	{
		background-image:  url(images/new_appointment_process.jpg);
	}
#navmenu li#item4 a
	{
		background-image:  url(images/new_faq.jpg);
	}

#navmenu li#item5 a
	{
		background-image:  url(images/new_links.jpg);
	}
#navmenu li#item6 a
	{
		background-image:  url(images/new_contact_information.jpg);
	}

/* ////////////////SUBMENU//////////////////////////*/

#navmenu li#item7 a
{
	background-image:  url(images/new_program_highlights.jpg);
}



#navmenu li#item1 a:hover
		{
			background-color: #2A466D;
				height: 16px;
					width: 93px;    
		}

#navmenu li#item1 a span
		{
			display: none;
		}

#navmenu li#item1 a:hover span
		{
			display: block;
				position: absolute;
					top: 0px;
						left: 0px;
						height: 30px;
					width: 93px;
				background-repeat: no-repeat;
			background-image: url(images/new_about_us_hover.jpg);
		}	


#navmenu li#item2 a:hover
		{
			background-color: #2A466D; 
				height: 16px;
			width: 90px;     
		}

#navmenu li#item2 a span
		{
			display: none;
		}

#navmenu li#item2 a:hover span
		{
			display: block;
				position: absolute;
					top: 0px;
						left: 93px;
							height: 30px;
						width: 90px;
					background-repeat: no-repeat;
			background-image: url(images/new_programs_hover.jpg);
		}

#navmenu li#item3 a:hover
		{
			background-color: #2A466D;
				height: 16px;
			width: 167px;      
		}

#navmenu li#item3 a span
		{
			display: none;
				height: 30px;
			width: 167px;
		}

#navmenu li#item3 a:hover span
		{
			display: block;
				position: absolute;
					top: 0px;
						left: 183px;
					background-repeat: no-repeat;
			background-image: url(images/new_appointment_process_hover.jpg);
		}


#navmenu li#item4 a:hover
		{
			background-color: #2A466D;
				height: 16px;
					width: 63px;       
		}

#navmenu li#item4 a span
		{
			display: none;
				height: 30px;
			width: 63px;
		}

#navmenu li#item4 a:hover span
		{
			display: block;
				position: absolute;
					top: 0px;
						left: 350px;
							height: 30px;
						width: 63px;
					background-repeat: no-repeat;
				background-image: url(images/new_faq_hover.jpg);
		}

#navmenu li#item5 a:hover
		{
			background-color: #2A466D; 
				height: 16px;	
					width: 67px;    
		}

#navmenu li#item5 a span
		{
			display: none;
				height: 30px;
			width: 67px;
		}

#navmenu li#item5 a:hover span
		{
			display: block;
				position: absolute;
					top: 0px;
						left: 413px;
							height: 30px;
						width: 67px;
					background-repeat: no-repeat;
				background-image: url(images/new_links_hover.jpg);
		}

#navmenu li#item6 a:hover
		{
			background-color: #2A466D;
				height: 16px;
			width: 149px;     
		}

#navmenu li#item6 a span
		{
			display: none;
			height: 30px;
			width: 149px;
		}

#navmenu li#item6 a:hover span
		{
			display: block;
			position: absolute;
			top: 0px;
			left: 480px;
			height: 30px;
			width: 149px;
			background-repeat: no-repeat;
			background-image: url(images/new_contact_information_hover.jpg);
		}
		
		
#navmenu li#item7 a:hover
		{
			position: absolute;
			left: 52px;
			top: 30px;
			background-color: #2A466D;
			height: 12px;
			width: 161px;
				  
		}

#navmenu li#item7 a span
		{
			display: none;
			position: absolute;
			left: 52px;  
			top: 30px;
			height: 22px;
			width: 161px;
				
		}

#navmenu2 li#item7 a:hover span
		{
			display: block;
			position: absolute;
			left: 52px;*/
			top: 30px;
			height: 22px;
			width: 161px;
			background-repeat: no-repeat;
			background-image: url(images/new_program_highlights_hover.jpg);
		}
		
		
#navmenu li#item1 a span,
#navmenu li#item2 a span,
#navmenu li#item3 a span,
#navmenu li#item4 a span
#navmenu li#item5 a span
#navmenu li#item6 a span
#navmenu2 li#item7 a span
	
#navmenu li#item1 a:hover span
	{
		background-image:  url(images/new_about_us_hover.jpg);
	}
#navmenu li#item2 a:hover span
	{
		background-image:  url(images/new_programs_hover.jpg);
	}
#navmenu li#item3 a:hover span
	{
		background-image:  url(images/new_appointment_process_hover.jpg);
	}
#navmenu li#item4 a:hover span
	{
		background-image:  url(images/new_faq_hover.jpg);
	}

#navmenu li#item5 a:hover span
	{
		background-image:  url(images/new_links_hover.jpg);
	}

#navmenu li#item6 a:hover span
	{
		background-image: url(images/new_contact_information_hover.jpg);
	}

#navmenu2 li#item7 a:hover span
	{
		background-image: url(images/new_program_highlights_hover.jpg);
	}


/* ////////////SUBMENU///////////////*/


#navmenu2 li#item7 a:hover span
{
	background-image:  url(images/new_program_highlights.jpg);
}

////////////css end////////////////////////


////////HTML/////////////////////////

<div id="container2">
	<ul id="navmenu" >
		<li id="item1"><a href="About_us.php"><span></span></a></li>
		<li id="item2"><a href="#"><span></span></a></li>
			<ul id="navmenu2">
				 <li id="item7"><a href="Program_highlights.php"><span></span></a></li>
			    <!-- <li id="item8"><a href="Submission_requirements.php"><span></span></a></li>
      			 <li id="item9"><a href="Classcode_list.php"><span></span></a></li>-->
			</ul>
		<li id="item3"><a href="Appointment_process.php"><span></span></a></li>
		<li id="item4"><a href="FAQ.php"><span></span></a></li>
		<li id="item5"><a href="Links.php"><span></span></a></li>
		<li id="item6"><a href="Contact_information.php"><span></span></a></li>

	</ul>
</div>

As usual I'm greatful for any effort. Thanks

rogerzebra · May 19, 2005

I decided to shrink it down....sorry for the earlier post. I know that my example not might be the best way to code image rollovers with images in different sizes, but this was the only way I got it to work. At least the main menu

Code:

<style>
    body
        {
            margin: 0;    
                padding: 0;
                    font-size: 95%;
                        font-family: Verdana, Arial, Helvetica,;
                            color: #000;
                        background-color: #fff;
                    background-image: url(images/nl_background_multi.jpg);
        }

    #navmenu
        {
    list-style: none;
    position: absolute;
    left: 252px;
    top: 115px;
    width: 637px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background-color: none;
    height: 99px;
        }

ul#navmenu2 li:hover > ul {
    display: block;
}


#navmenu li#item1
        {
            list-style: none;
                display: block;
                    float: left;
                        top: 115px;
                            height: 30px;
                                width: 93px;
                            margin: 0px 0px 0px 0px;
                        padding: 0px 0px 0px 0px;
        }

***********Main menu******************************

#navmenu li#item1 a
        {
            list-style: none;
                display: block;
                    height: 30px;
                        width: 93px;
                    margin: 0px 0px 0px 0px;
                padding: 0px 0px 0px 0px;
            background-repeat: no-repeat;
        }

main menu item 2,3,4...etc

****************Submenu*************************

        #navmenu2 li#item7
        {
            list-style: none;
                display: block;
                    position: absolute;
                        left: 304px;
                            top: 150px;
                                height: 22px;
                            width: 161px;
                        
                    margin: 0px 0px 0px 0px;
                padding: 0px 0px 0px 0px;
        }

#navmenu2 li#item7 a
        {
            list-style: none;
                display: block;
                    position: absolute;
                    left: 304px;
                        top: 150px;
                            height: 22px;
                                width: 161px;
                            
                        margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 0px;
                background-repeat: no-repeat;
        }


*************Main menu**************************

#navmenu li#item1 a
    {
        background-image:  url(images/new_about_us.jpg);    
    }

main menu item 2,3,4,...etc

/* ***************SUBMENU********************/

#navmenu li#item7 a
{
    background-image:  url(images/new_program_highlights.jpg);
}

******** Main menu ******************

#navmenu li#item1 a:hover
        {
            background-color: #2A466D;
                height: 16px;
                    width: 93px;    
        }

#navmenu li#item1 a span
        {
            display: none;
        }

#navmenu li#item1 a:hover span
        {
            display: block;
                position: absolute;
                    top: 0px;
                        left: 0px;
                        height: 30px;
                    width: 93px;
                background-repeat: no-repeat;
            background-image: url(images/new_about_us_hover.jpg);
        }    
 
main menu item 1,2,3,4...etc

*******Submenu**********
       
#navmenu li#item7 a:hover
        {
            position: absolute;
            left: 52px;
            top: 30px;
            background-color: #2A466D;
            height: 12px;
            width: 161px;
                  
        }

#navmenu li#item7 a span
        {
            display: none;
            position: absolute;
            left: 52px;  
            top: 30px;
            height: 22px;
            width: 161px;
                
        }

#navmenu2 li#item7 a:hover span
        {
            display: block;
            position: absolute;
            left: 52px;*/
            top: 30px;
            height: 22px;
            width: 161px;
            background-repeat: no-repeat;
            background-image: url(images/new_program_highlights_hover.jpg);
        }
        
        
#navmenu li#item1 a span,

#navmenu2 li#item7 a span
    


#navmenu li#item1 a:hover span
    {
        background-image:  url(images/new_about_us_hover.jpg);
    }


#navmenu2 li#item7 a:hover span
    {
        background-image: url(images/new_program_highlights_hover.jpg);
    }


/* ////////////SUBMENU///////////////*/


#navmenu2 li#item7 a:hover span
{
    background-image:  url(images/new_program_highlights.jpg);
}

////////////css end////////////////////////


////////HTML/////////////////////////

<div id="container2">
    <ul id="navmenu" >
        <li id="item1"><a href="About_us.php"><span></span></a></li>
        <li id="item2"><a href="#"><span></span></a></li>
            <ul id="navmenu2">
                 <li id="item7"><a href="Program_highlights.php"><span></span></a></li>
                            </ul>
            </ul>
</div

BillyRayPreachersSon · May 20, 2005

I can only imagine your code is failing due to the hideous illegal syntax and missing tags.

You cannot put things like this:

Code:

************Main menu**************************

in a style section without comments around it.

You should also be closing your style section, and have a body section somewhere.

I'd fix your markup and get it validating before trying to get things looking good.

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

Foamcow · May 20, 2005

Comments in CSS can be done as so:

Code:

/* My comment */

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

rogerzebra · May 20, 2005

Hi guys,
Thanks for your responds I really appreciate it. Unfortunately my problem is not that I have unclosed div styles or loss of body sections. Neither the way I separated the code. That was just for you to easier find the different parts in the code.

My question is how to build a dropdown menu with images in different sizes. As I mentioned earlier my menu has 6 image items in different sizes. Now I'm trying to make a mouse over drop down function from one the images in the menu. I know that this wouldn't be a problem if all of the menu item was using a background swap color function and not custom sized images. So my question is. Is there any way to do this? Any suggestion are welcome.

Thanks again.
Worth to mention is that the main menu works fine, it's just the dropdown part I can't get to work.
/r

ChrisHunt · May 21, 2005

Can you post the URL of your page? It's a lot quicker and easier that posting reams of code for us to try to make something of.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

rogerzebra · May 22, 2005

Hi Chris,
Here is the link to my problem. As you can see I'm getting tired. anyhow the image "program highlights" is supposed to be a dropdown menu together with two other menu item beneth the menu item "programs".

http://www.magellanins.com/newheader5.php

I'm sure by now that something is missing...but what?

thanks for trying.
/r

ChrisHunt · May 23, 2005

Hmmm... it looks like you've been piling code on code in an effort to get this working, with the result that you can no longer see the wood for the trees. I suggest you throw away your existing CSS and start again from scratch, building it up one piece at a time, and using the inheritance of properties wherever possible. If all your <li>s share a lot of common attributes, declare them once rather than repeating them a dozen times:

Code:

#navmenu li
		{
		list-style: none;
		display: block;
		height: 30px;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		background-repeat: no-repeat;
		}


#navmenu li#item2
		{
		width: 93px;
		}

#navmenu li#item2
		{
		width: 90px;
		}
... etc ...

I think you'll find it much easier to keep track of that way.

I don't think it's the cause of your problem, but you'll get better accessibility and SEO if you use some real text in your links rather than doing everything with background images. That might make it easier to adapt some of the ready-made code that's out there as well. I'd particularly draw your attention to

http://www.udm4.com/

- it'll cost you 40 quid, but could save you a lot of time.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

rogerzebra · May 31, 2005

It's a bit late but anyway, Thank you all for your effort.
I took Chris advice and made a text menu instead of images.
have a good one.
/r

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS Custom made menu problem

rogerzebra

Technical User

rogerzebra

Technical User

BillyRayPreachersSon

Programmer

Foamcow

Programmer

rogerzebra

Technical User

ChrisHunt

Programmer

rogerzebra

Technical User

ChrisHunt

Programmer

rogerzebra

Technical User

Similar threads

Part and Inventory Search

Sponsor