Middag,

Ik heb de volgende (x)HTML:

Code:

<div class="hoofdmenu">
                
                        <ul id="nav">
                            <li id='men_vmman' class='off'><a href="#"><span>VM Management</span></a>
                          
                        	<ul>
                        	    <li> <a href="#">Menuitem 1</a> </li>
                                <li> <a href="#">Menuitem 2</a> </li>
                                <li> <a href="#">Menuitem 3</a> </li>
                        	</ul>
                            
                            
                            </li>
                            <li id='men_nodman' class='off'><a href="#"><span>Node Management</span></a>
                        	
                            <ul>
                        	     <li><a href="#">Menuitem 1</a> </li>
                                <li> <a href="#">Menuitem 2</a> </li>
                                <li> <a href="#">Menuitem 3</a> </li>
                        	</ul>
                            
                            </li>
                            <li id='men_clset' class='off'><a href="#"><span>Cluster Settings</span></a>
                        	
                            <ul>
                        	     <li> <a href="#">Menuitem 1</a> </li>
                                <li>  <a href="#">Menuitem 2</a> </li>
                                <li>  <a href="#">Menuitem 3</a> </li>
                        	</ul>
                         
                            </li>
                            <li id='men_maint' class='off'><a href="#"><span>Maintenance</span></a>
                        	
                            <ul>
                        	     <li> <a href="#">Menuitem 1</a> </li>
                                <li>  <a href="#">Menuitem 2</a> </li>
                                <li>  <a href="#">Menuitem 3</a> </li>
                        	</ul>
                           
                            </li>
                            <li id='men_about' class='off'><a href="#"><span>About Shock VM</span></a>
                        	
                            <ul>
                        	     <li> <a href="#">Menuitem 1</a> </li>
                                <li>  <a href="#">Menuitem 2</a> </li>
                                <li>  <a href="#">Menuitem 3</a> </li>
                        	</ul>
                           
                            </li>
                            <li id='men_cont' class='on'><a href="#"><span>Contact</span></a>
                          
                        	<ul>
                        	      <li> <a href="#">Menuitem 1</a> </li>
                                <li> <a href="#">Menuitem 2</a> </li>
                                <li><a href="#">Menuitem 3</a> </li>
                        	</ul>
                            
                            </li>
                        </ul>

                        
	              

                </div>

Hier moet CSS aan gehangen worden waardoor de menu's horizontaal onder elkaar komen te staan. Ik krijg dit op geen enkele manier goed voor elkaar. (wel in Chrome/Firefox, maar in IE crasht de boel).

Kan iemand me op weg helpen of ligt het aan de opzet van de HTML?

Mvg,

Wat heb je al in elkaar zitten? Dan wil ik wel tips geven

Ehm, dat heb ik al niet meer, dat werkte op geen enkele manier. Ik hoef alleen maar een algemene aanwijzing te hebben...maar ik denk dat de HTML misschien anders moet...

Wat research op internet doet ook wonderen

http://sceneone.nl/tips_tricks/drop_down_menu.php

via een li structuur en in CSS een float: left geven.

je moet wel even spelen met je padding & margin en width.

dan heb je ook een navigatie menu horizontaal.

Origineel gepost door ArendJan A.

Middag,

Ik heb de volgende (x)HTML:

Code:

<div class="hoofdmenu">
                
                        <ul id="nav">
                            <li id='men_vmman' class='off'><a href="#"><span>VM Management</span></a>
                          
                            <ul>
                                <li> <a href="#">Menuitem 1</a> </li>
                                <li> <a href="#">Menuitem 2</a> </li>
                                <li> <a href="#">Menuitem 3</a> </li>
                            </ul>
                            
                            
                            </li>
                            <li id='men_nodman' class='off'><a href="#"><span>Node Management</span></a>
                            
                            <ul>
                                 <li><a href="#">Menuitem 1</a> </li>
                                <li> <a href="#">Menuitem 2</a> </li>
                                <li> <a href="#">Menuitem 3</a> </li>
                            </ul>
                            
                            </li>
                            <li id='men_clset' class='off'><a href="#"><span>Cluster Settings</span></a>
                            
                            <ul>
                                 <li> <a href="#">Menuitem 1</a> </li>
                                <li>  <a href="#">Menuitem 2</a> </li>
                                <li>  <a href="#">Menuitem 3</a> </li>
                            </ul>
                         
                            </li>
                            <li id='men_maint' class='off'><a href="#"><span>Maintenance</span></a>
                            
                            <ul>
                                 <li> <a href="#">Menuitem 1</a> </li>
                                <li>  <a href="#">Menuitem 2</a> </li>
                                <li>  <a href="#">Menuitem 3</a> </li>
                            </ul>
                           
                            </li>
                            <li id='men_about' class='off'><a href="#"><span>About Shock VM</span></a>
                            
                            <ul>
                                 <li> <a href="#">Menuitem 1</a> </li>
                                <li>  <a href="#">Menuitem 2</a> </li>
                                <li>  <a href="#">Menuitem 3</a> </li>
                            </ul>
                           
                            </li>
                            <li id='men_cont' class='on'><a href="#"><span>Contact</span></a>
                          
                            <ul>
                                  <li> <a href="#">Menuitem 1</a> </li>
                                <li> <a href="#">Menuitem 2</a> </li>
                                <li><a href="#">Menuitem 3</a> </li>
                            </ul>
                            
                            </li>
                        </ul>

                        
                  

                </div>

Hier moet CSS aan gehangen worden waardoor de menu's horizontaal onder elkaar komen te staan. Ik krijg dit op geen enkele manier goed voor elkaar. (wel in Chrome/Firefox, maar in IE crasht de boel).

Kan iemand me op weg helpen of ligt het aan de opzet van de HTML?

Mvg,

Ben je al voorzien in de code. Zo niet kan ik een css voor je samenstellen.

Gr Jeroen

Kunt u het wat duidelijker uitleggen wat u bedoeld met horizontaal onder elkaar? Wilt u een verticaal menu of horizontaal?

Een horizontaal menu werkt in feite heel simpel:

Code:

ul { list-style: none: }
li { display: inline; padding-right: 5px;}

Padding-right de afstand tussen de li's.