5 Replies - 11332 Views - Last Post: 07 April 2011 - 12:17 AM

#1 simplecoder  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 12
  • Joined: 28-March 11

Create a multi table drop down menu

Posted 28 March 2011 - 11:04 PM

I want to create a quite complex multi table drop down menu like in these websites :

-http://www.microsoft.com/en-us/default.aspx
-http://www.bhinneka.com/aspx/bhindexpc.aspx

HTML Code :
<table width="100%" bgcolor="black" >
  <tr width="100%">
   <td>
    <div id="horizontalmenu" align="right" cellpadding="0" cellspacing="0">
     <ul>
     <li><a href="computer.php">Computer</a>
      <ul>
	   <tr><td>
       <li><a href="desktopcomputer.php">Desktop Computer</a></li><hr>
       <li><a href="desktopintelatom.php">Desktop Computer Intel Atom/Celeron</a></li>
       <li><a href="desktopintelcore2.php">Desktop Intel Core</a></li>
	   <li><a href="desktopintelcorequad.php">Desktop Intel Core Quad</a></li>
	   <li><a href="desktopintelcore3.php">Desktop Intel Core 3i</a></li>
	   </td>
	   <td>
	   <li><a href="applemacintosh.php">Apple Macintosh</a></li><hr>
	   <li><a href="applemacbook.php">Apple Macbook</a></li>
       <li><a href="appledesktop.php">Apple Desktop</a></li>
	   <li><a href="appledisplay.php">Apple Display</a></li>
	   <li><a href="appleserver.php">Apple Server</a></li>
	   </td></tr>
	  </ul>
     </li>
     <li><a href="component.php">Component</a></li>
     <li><a href="gadget.php">Gadget</a></li>
	 <li><a href="photography.php">Photography</a></li>
     <li><a href="networking.php">Networking</a></li>
     <li><a href="software.php">Software</a></li>
     <li><a href="largeprinter.php">Large Printer</a></li>
     <li><a href="office.php">Office</a></li>
	 </ul>
	</div>
   </td>
  </tr>
 </table>  


CSS Code :

#horizontalmenu
{
 position    : relative;
 width       : 100%;
 height      : 40px;
 background  : black;
 border      : 0px;
} 
#horizontalmenu ul
{
 padding    : 0;
 margin     : 0;
 list-style : none;
}
#horizontalmenu ul li
{
 float      : left;
 position   : relative;
}
#horizontalmenu ul li a
{
 float           : right;
 font            : bold 12px "Lucida Grande", "Trebuchet MS", "Verdana";
 color           : white;
 padding         : 10px;
 border-right    : 0px;
 text-decoration : none;
 display         : block;
}
#horizontalmenu ul li a:hover
{
 background-color : white;
 color            : green;
 padding          : 10px;
 border           : 0px;
 border-right     : 0px;
}
#horizontalmenu ul li ul
{
 display   : none;
}
#horizontalmenu ul li:hover ul
{
 display  : block;
 position : absolute;
 top      : 41px;
 left     : 0;
}
#horizontalmenu ul li:hover ul li a
{
 display     : block;
 background  : #6699CC;
 color       : #ffffff;
 width       : 130px;
 border-left : 1px solid #000000;
}
#horizontalmenu ul li:hover ul li a:hover
{
 background  : #000000;
 color       : #ffffff;
} 


I have failed,the table created but the drop down menu are messed what is the mistake ?..thanks for help

Is This A Good Question/Topic? 0
  • +

Replies To: Create a multi table drop down menu

#2 d4t4ch17d  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 57
  • Joined: 31-January 08

Re: Create a multi table drop down menu

Posted 01 April 2011 - 01:24 PM

I do not even see where you are creating a menu, I see a bunch of unordered lists within tables. Are you trying to make a form? Otherwise you may be trying to do something that jQuery would be better fit if you aren't making a form. The from for a drop down would use the following HTML:

<select name="">
<option value=""></option>
<option value=""></option>
</select>


Was This Post Helpful? 0
  • +
  • -

#3 simplecoder  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 12
  • Joined: 28-March 11

Re: Create a multi table drop down menu

Posted 04 April 2011 - 07:23 PM

No,i dont want to create a form like that but horizontal drop down menu.it still failed
Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 220
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Create a multi table drop down menu

Posted 05 April 2011 - 12:14 PM

Ok. To create multi tiered forms you use multiple ul's.

<ul id="navigation">
    <li class="header"><a href="#">Link Header</a>
         <ul>
           <li>Sub Link</li>
         </ul>
    </li>
</ul>



Then the css:

#navigation li ul {
    display: none;
}

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



To make your life easier however you should utilize jQuery, check out the superfish plugin for jquery.
Was This Post Helpful? 1
  • +
  • -

#5 simplecoder  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 12
  • Joined: 28-March 11

Re: Create a multi table drop down menu

Posted 07 April 2011 - 12:05 AM

Oh yes i dit it but it's error,i want to create more layer like that in Microsoft website horizontal menu.

what is JQuery,what is different with Javascript ?
Was This Post Helpful? 0
  • +
  • -

#6 GhandiJones  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 54
  • View blog
  • Posts: 174
  • Joined: 17-March 11

Re: Create a multi table drop down menu

Posted 07 April 2011 - 12:17 AM

jQuery is a library for javascript. It's very nice. However, the menu you are wanting to create can easily be studied by doing a google search for "horizontal drop down menu tutorials". That'll point you in the right direction for building your very own. I have seen tutorials on them that break down the HTML, the CSS and the javascript. Like I said previously, just google what I wrote in quotations.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1