Author Topic: how to add sub menu? (Read 622 times)

$php_mysql$ · « **on:** September 02, 2010, 11:44:09 AM »

hi need to add horizontal submenu under the More > but i got n idea how, someone can help?


Here is my menu div coding

		<div id="menu">
			<ul>
			<li><a href="#">Home </a></li>
			<li><a href="#">1 </a> </li>
			<li><a href="#">2 </a> </li>
			<li><a href="#">3 </a> </li>
			<li><a href="#">4 </a> </li>
			<li><a href="#">More > </a></li>
			</ul>
		</div>

And the css is here


/*Menu*/
#menu { 
		float : left; 
		height : 35px; 
		width : 888px; 
		padding-left : 10px;
} 
#menu ul { 
		margin : 0 ; 
		padding : 0; 
		list-style : none; 
		line-height : normal; 
} 
#menu li { 
		float : left; 
} 
#menu ul li a { 
		display : block; 
		background : url("images/menu_sep.gif") no-repeat 100% 0%; 
		float : left; 		 
		margin-right : 1px; 
		text-decoration : none; 
		font-size:14px;		
		font-weight : bold; 
		color: #FFFFFF; 
}

thanks

jacko310592 · « **Reply #1 on:** September 02, 2010, 04:14:58 PM »

hello $php_mysql$, hope this helps...

HTML:

Code: [Select]

<div id="menu">
<ul>
	<li><a href="#">Home </a></li>
	<li><a href="#">1 </a> </li>
	<li><a href="#">2 </a></li>
	<li><a href="#">3 </a> </li>
	<li><a href="#">4 </a> </li>
	<li><a href="#">More > </a>
		<ul class="subMenu">
			<li>Item1</li>
			<li>Item2</li>
			<li>Item3</li>
		</ul>
	</li>
</ul>
</div>

CSS:

Code: [Select]

#menu li { 
	position: relative;
}
#menu ul li ul.subMenu {
	display: none;
	position: absolute;
	top: 0px;
	left: 45px;
} 
#menu ul li:hover ul.subMenu {
	display: block;
	white-space: nowrap;
} 
#menu ul li:hover ul.subMenu li {
	float: left;
	padding: 0 10px
}

$php_mysql$ · « **Reply #2 on:** September 02, 2010, 04:31:29 PM »

hi thanks soo much :-0, ok it does help. but its vertical how to make it horizontal ?

$php_mysql$ · « **Reply #3 on:** September 02, 2010, 04:38:09 PM »

i actually with my exsisting menu css want to add the submenu. never made a submenu so im knid of confused about it. sorry for the trouble.

$php_mysql$ · « **Reply #4 on:** September 02, 2010, 04:50:57 PM »

till now im managed this much :-)

Code: [Select]

<html>
<head>
</head>
<style type="text/css">
#menu {
      float : left;
      height : 35px;
      width : 888px;
      padding-left : 10px;
}
#menu ul {
      margin : 0 ;
      padding : 0;
      list-style : none;
      line-height : normal;
}
#menu li {
      float : left;
}
#menu ul li a {
      display : block;
      background : url("images/menu_sep.gif") no-repeat 100% 0%;
      float : left;       
      margin-right : 1px;
      text-decoration : none;
      font-size:14px;      
      font-weight : bold;
      color: red;
} 

#menu ul li ul.subMenu {
   display: none;
   position: absolute;
   top: 25px;
   left: 105px;
} 
#menu ul li:hover ul.subMenu {
   display: block;
   white-space: nowrap;
} 
</style>
<body>
<div id="menu">
<ul>
   <li><a href="#">Home </a></li>
   <li><a href="#">1 </a> </li>
   <li><a href="#">2 </a></li>
   <li><a href="#">3 </a> </li>
   <li><a href="#">4 </a> </li>
   <li><a href="#">More > </a>
      <ul class="subMenu">
         <li><a href="#">More menu 1 </a></li>
         <li><a href="#">More menu 2 </a></li>
         <li><a href="#">More menu 3 </a></li>
      </ul>
   </li>
</ul>
</div>


</body>
</html>

but the submenu still displaying verticle

jacko310592 · « **Reply #5 on:** September 02, 2010, 04:53:06 PM »

that code makes it horizontal, not vertical,

heres images on a horizontal line:
http://www.google.co.uk/images?um=1&hl=en&client=ubuntu&channel=cs&biw=1045&bih=880&tbs=isch:1&sa=1&q=horizontal+line&aq=f&aqi=g1g-m1&aql=&oq=&gs_rfai=

so im guessing you want it to show vertically (no worries.. i get them mixed up myself)

just remove:

Code: [Select]

white-space: nowrap;

this will make each <li> arrange one on-top of the other,

then if you want the sub-menu to appear under the "more" link, REPLACE:

Code: [Select]

#menu ul li ul.subMenu {
	display: none;
	position: absolute;
	top: 0px;
	left: 45px;
}

WITH:

Code: [Select]

#menu ul li ul.subMenu {
	display: none;
	position: absolute;
	top: 12px;   /* distance from the top of #menu ul li */
	left: 0px;   /* distance from the left of #menu ul li */
}

full CSS, including your original code:

Code: [Select]

#menu { 
		float : left; 
		height : 35px; 
		width : 888px; 
		padding-left : 10px;
} 
#menu ul { 
		margin : 0 ; 
		padding : 0; 
		list-style : none; 
		line-height : normal; 
} 
#menu li { 
		float : left; 
		position: relative;
} 
#menu ul li a { 
		display : block; 
		background : url("images/menu_sep.gif") no-repeat 100% 0%; 
		float : left; 		 
		margin-right : 1px; 
		text-decoration : none; 
		font-size:14px;		
		font-weight : bold; 
		color: #FFFFFF; 
} 


#menu ul li ul.subMenu {
	display: none;
	position: absolute;
	top: 12px;
	left: 0px;
} 
#menu ul li:hover ul.subMenu {
	display: block;
} 
#menu ul li:hover ul.subMenu li {
	float: left;
	padding: 0
}

$php_mysql$ · « **Reply #6 on:** September 02, 2010, 05:12:21 PM »

thanks bro for the time and effort to help me out :-) my problem now solved :-)

jacko310592 · « **Reply #7 on:** September 02, 2010, 05:16:15 PM »

no problem (:

$php_mysql$ · « **Reply #8 on:** September 04, 2010, 04:00:48 AM »

Hi bro take a good look at these codes and tell what is not ok? for i am unable to get it validated in html validator
and also the hover in submenu is making the menu after submenu to conflict with others.

Code: [Select]

	<div id="menu">
			<ul>
			<li><a href="#">Menu 1</a></li>
			<li><a href="#">Menu 2</a> </li>
			<li><a href="#">Menu 3</a> </li>
			<li><a href="#">Menu 4</a> </li>
			<li><a href="#">More.</a>
      <ul class="subMenu">
			<li><a href="#">Menu 1</a></li>
			<li><a href="#">Menu 2</a> </li>
			<li><a href="#">Menu 3</a> </li>
			<li><a href="#">Menu 4</a> </li>
                        <li><a href="#">Menu 5</a></li>
			<li><a href="#">Menu 6</a> </li>
			<li><a href="#">Menu 7</a> </li>
			<li><a href="#">Menu 8</a> </li>	
     			</ul>
			<ul>	  
			<li><a href="#">Menu 1</a></li>
			<li><a href="#">Menu 2</a> </li>
			<li><a href="#">Menu 3</a> </li>
			<li><a href="#">Menu 4</a> </li>
			</ul>
	</div>
////////////////////////////////The css/////////////////////////////////

/*Menu*/
#menu { 
		float : left; 
		height : 35px; 
		width : 888px; 
		padding-left : 10px;
} 
#menu ul { 
		margin : 0 ; 
		padding : 0; 
		list-style : none; 
		line-height : normal; 
} 
#menu li { 
		float : left; 
                position: relative;
} 
#menu ul li a { 
		display : block; 
		background : url("images/menu_sep.gif") no-repeat 100% 0%; 
		float : left; 		 
		margin-right : 1px; 
		text-decoration : none; 
		font-size:14px;		
		font-weight : bold; 
		color: #FFFFFF; 
} 
#menu ul li a:hover { 
		color:#FF6633;
} 
#menu ul li ul.subMenu {
        background : #333333 ;
        width:110px; 
        display: none;
        position: absolute;
		opacity: 0.88;
        filter: alpha(opacity=88);
        top:28px;
}
#menu ul li:hover ul.subMenu {
   		display: block;
}
#menu ul li:hover ul.subMenu li {
   		float: left;
   		padding: 0;
}

jacko310592 · « **Reply #9 on:** September 04, 2010, 07:56:17 AM »

your HTML looks fine, though try using intends more effectively... it doesn't improve html validation, but it does help when it comes to having to read through loads of your own code. for example:

Code: [Select]

<div id="menu">
	<ul>
		<li><a href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
		<li><a href="#">Menu 4</a></li>
		<li><a href="#">More.</a>
      			<ul class="subMenu">
				<li><a href="#">Menu 1</a></li>
				<li><a href="#">Menu 2</a> </li>
				<li><a href="#">Menu 3</a> </li>
				<li><a href="#">Menu 4</a> </li>
				<li><a href="#">Menu 5</a></li>
				<li><a href="#">Menu 6</a> </li>
				<li><a href="#">Menu 7</a> </li>
				<li><a href="#">Menu 8</a> </li>	
			</ul>
		</li>           <!-- this was a <ul> in your posted code, the <ul> will have made the conflicts you where talking about -->
		<li><a href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
		<li><a href="#">Menu 4</a></li>
	</ul>
</div>

..i only spotted one error within this HTML which i put a comment against, (you originally had it as a <ul> tag, but needed to be a closing <li> tag)

with your CSS, under the "#menu ul li ul.subMenu" styles, you may want to add the rest of the opacity codes for wider browser support:

Code: [Select]

#menu ul li ul.subMenu {
	opacity: .88;					 /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=88); 			/* IE lt 8 */
	-ms-filter: "alpha(opacity=88)";		/* IE 8 */
	-khtml-opacity: .88;				/* Safari 1.x */
	-moz-opacity: .88; 				/* FF lt 1.5, Netscape */
}

and within the same block of codes (#menu ul li ul.subMenu), i noticed you have set a rather large "top" value set..

Code: [Select]

#menu ul li ul.subMenu {
        top:28px;
}

...this will leave quite a large gap from the main menu to the dropdown menu... once your mouse enters this gap your drop down menu will close due to the fact you will no longer be hovering over the <li> element, with this in mind you may want to reduce that "top" value, or perhaps add "padding" to "#menu li" to close the gap.

.. apart from that, the rest of your CSS looks fine (:

one other thing... you will need to make sure you have a correctly specified Doctype at the very top of your HTML document for IE to display all your styles correctly, if you haven't got one yet, use the following...

Code: [Select]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

if you need anymore help, or if i haven't explained something very well, just ask (:

good luck with your project

$php_mysql$ · « **Reply #10 on:** September 08, 2010, 02:38:53 PM »

yes bro the hover inside submenu li links need to stop that. i wanted hover padding only on main menu not sub but somehow im unable to get that to happen for if i add hover for one it gets applied for all.

$php_mysql$ · « **Reply #11 on:** September 08, 2010, 03:04:54 PM »

the css now is

Code: [Select]

#menu { 
		float : left; 
		height : 35px; 
		width : 888px; 
		padding-left : 10px;
} 
#menu ul { 
		margin : 0 ; 
		padding : 0; 
		list-style : none; 
		line-height : normal; 
} 
#menu li { 
		float : left; 
        position: relative;
} 
#menu ul li a { 
		display : block; 
		background : url("images/menu_sep.gif") no-repeat 100% 0%; 
		float : left; 		 
		margin-right : 1px; 
		text-decoration : none; 
		font-size:14px;		
		font-weight : bold; 
		color: #FFFFFF; 
} 
#menu ul li a:hover { 
		color:#FF6633;
		padding:2px;
} 
#menu ul li ul.subMenu {
        background : #333333 ;
        width:110px; 
        display: none;
        position: absolute;
		opacity: 0.88;
        filter: alpha(opacity=88);
        top:24px;
}
#menu ul li:hover ul.subMenu {
   		display: block;
}
#menu ul li:hover ul.subMenu li {
   		float: right;
   		padding: 0;
}

now for main menu ther put hover padding but which seems ok but when open the submenu and when the links inside submenu hovers some links from the main menu comes on top of eachother on opera browser

News:

Author Topic: how to add sub menu? (Read 622 times)

$php_mysql$

how to add sub menu?

jacko310592

Re: how to add sub menu?

$php_mysql$

Re: how to add sub menu?

$php_mysql$

Re: how to add sub menu?

$php_mysql$

Re: how to add sub menu?

jacko310592

Re: how to add sub menu?

$php_mysql$

Re: how to add sub menu?

jacko310592

Re: how to add sub menu?

$php_mysql$

Re: how to add sub menu?

jacko310592

Re: how to add sub menu?

$php_mysql$

Re: how to add sub menu?

$php_mysql$

Re: how to add sub menu?