Jump to content

how to add sub menu?

$php_mysql$

By $php_mysql$
in CSS Help

 Share

Recommended Posts

$php_mysql$ Regular Member

$php_mysql$

Posted
Posted

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

Link to comment
Share on other sites
jacko310592 Regular Member

jacko310592

Posted
Posted

hello $php_mysql$, hope this helps...

 

HTML:

<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:

#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
}

Link to comment
Share on other sites
$php_mysql$ Regular Member

$php_mysql$

Posted
  • Author
Posted

till now im managed this much :-)

 

<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

Link to comment
Share on other sites
jacko310592 Regular Member

jacko310592

Posted
Posted

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:

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:

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

WITH:

#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:

#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
}

Link to comment
Share on other sites
$php_mysql$ Regular Member

$php_mysql$

Posted
  • Author
Posted

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.

<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;
}

Link to comment
Share on other sites
jacko310592 Regular Member

jacko310592

Posted
Posted

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:

 

<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:

#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..

#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...

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

Link to comment
Share on other sites
$php_mysql$ Regular Member

$php_mysql$

Posted
  • Author
Posted

the css now is

 

#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

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.