Menu niet naar beneden uitklappen maar naast elkaar

[gebruiker78]

hallo,
ik heb dit:

<div id="header">
<style media="all" type="text/css">@import "menu/menu_style.css";</style>
<div class="menu">
<ul>
<li><a href="ownprofile.php" target="_self" >dabosn.com</a>
<li><a href="ownprofile.php" target="_self" >Profile</a>
<ul>
<li><a href="ownprofile.php" target="_self">My profile</a></li>
<li><a href="inbox.php" target="_self">Inbox</a></li>
<li><a href="editprofile.php" target="_self">Edit profile</a></li>
<li><a href="profile.php" target="_self">Search</a></li>
</ul>
</li>
<li><a href="../apps/apps.php" target="_self" >Apps</a>
<ul>
<li><a href="../apps/apps.php" target="_self">My apps</a></li>
<li><a href="../apps/favoapps.php" target="_self" >Favorite</a></li>
<li><a href="../apps/dappstore.php" target="_self">Dapps</a></li>
</ul>
</li>
<li><a href="usersstatus.php" target="_self" >Status</a>
<ul>
<li><a href="usersstatus.php" target="_self" >User status</a>
<li><a href="../apps/appstatus.php" target="_self" >Apps status</a>
</ul>
<li><a href="logout.php" target="_self" align="right">Log out</a>
</li>
</ul>
</div>
<div id="add"><img src="../images/ad.png" alt="Ad picture"></img></div>
</div>

.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: 67.5% "Verdana", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	}
.menu ul{
	background:rgb(29,100,250);
	height:20px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:left;
		padding:0px;
		}
	.menu li a{
		background:rgb(29,100,250) bottom right no-repeat;
		color:rgb(255,255,255);
		display:block;
		font-weight:normal;
		line-height:20px;
		margin:0px;
		padding:0px 25px;
		text-align:center;
		text-decoration:none;
		}
		.menu li a:hover, .menu ul li:hover a{
			background: rgb(2,40,210) bottom center no-repeat;
			color:rgb(255,255,255);
			text-decoration:none;
			}
	.menu li ul{
		background:rgb(29,100,250);
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:100px;
		z-index:200;
		/*top:1em;
		/*left:0;*/
		}
	.menu li:hover ul{
		display:block;
		
		}
	.menu li li {
		background:bottom left no-repeat;
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:100px;
		}
	.menu li:hover li a{
		background:none;
		
		}
	.menu li ul a{
		display:block;
		height:20px;
		font-size:12px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul a:hover, .menu li ul li:hover a{
			background:rgb(2,40,210) center left no-repeat;
			border:0px;
			color:#ffffff;
			text-decoration:none;
			}
	.menu p{
		clear:left;
		}

het menu komt als ik erover ga naar beneden zoals:
X x x x
x
x
x
maar ik zou willen dat ze wel 1 na onderen gaan maar dan naast elkaar zoals:
X x x x
x x x


ik ben echt heel slecht in css en heb dit script ook gedownload ik dacht dat het wel makkelijk aantepassen was maar ik komt er niet uit.

als jullie het misschien niet begrijpen ik wil net z'n menu als
http://nl.msn.com/?st=1
daar heb je eigenlijk hetzelfde

*UPDATE
omdat ik nog geen reactie's heb heb ik mijn painting kunsten erbij gehaald:
http://imageshack.us/photo/my-images/535/testhet.png/
links hoe het niet moet rechts wat ik wel wil maar hoe krijg ik dat voor elkaar?

 

[csshunter]

Hoi david,
Essentieel voor het naast elkaar krijgen van list-items is ervoor zorgen dat ze ofwel een {float:left;} krijgen, ofwel een {display: inline;}.
Voor de bovenste serie (de hoofdmenu-items) staat er inderdaad:

.menu li {
   float:left;
   ...
   }

Maar voor de submenu-items (de <li>'s die staan binnen een <li> van het hoofdmenu) staat aangegeven:

.menu li li {
   ...
   float:none;
   }

Daarmee komen ze dus weer onder elkaar te staan, zoals bij een gewoon rijtje met bullets. Vandaar: de {float: none;} moet er uit; en de {float: left;} wordt al geregeld voor alle <li>'s, dus dat hoeft er hier niet bij.

Maar als je dit doet, dan komen ze nog steeds onder elkaar! Wat hier parten speelt, is dat het hele blokje van alle submenu-<li>'s, d.w.z. de <ul> van de submenu's, een opgegeven breedte van 100px heeft. Alles wat breder is, komt dan op de volgende regel!

.menu li ul{
   ...
   width: 100px;
   }

Vandaar: deze width moet ook weggelaten worden.

• Voor het mooi kan je ook nog wat extra padding-bottom geven aan een hoofdmenu-item waar over gehoverd wordt, dan zit het submenu niet aan de hoofdmenu-balk geplakt, en zie je meteen bij welk hoofdmenu-item een bepaald submenu hoort.
• Voor die hoofdmenu-items die geen submenu hebben, moet dat dan met een class ongedaan worden gemaakt, anders steken ze zonder reden een paar pixels onder de balk uit als je er over heen hovert.

Test: www.bliksekaters.nl/tests/horizontale-uitklapper-nw.htm
(zie broncode)

met vriendelijke groet,
CSShunter

 

[gebruiker78]

Harstikke bedankt!,
U was zeker op vakantie? Ik had hem al een paar dagen staan en ik dacht als csshunter er weer is is het zo opgelost en ben ik weer een stuk wijzer bedankt voor de goede uitleg (bij elke post van iedereen) BEDANKT!

 

[csshunter]

U was zeker op vakantie?

1. Jazeker, ik was cascades in het echt aan het bekijken. :d
2. Zeg maar jij tegen u.
3. En bedankt voor het compliment. Zelf heb ik al m'n kennis van internet geplukt/gepulkt, dankzij velen die hun inzichten zomaar ter beschikking stellen. Ik ben blij dat ik wat terug kan doen richting internet!

Met vriendelijke groet,
CSShunter

 

[gebruiker78]

WOW, valt me opeens op dat JIJ =) geen admin bent...
dus je doet dit allemaal vrijwillig en hebt ergens anders een baan ofzo?

Als ik een vraag heb dan kijk ik ook eerst even van wie ik kan helpen maar daar komt nooit z'n mooi duidelijk antwoord uit, en soms ga ik na helpmij.nl op mensen te helpen maar jij doet dit zowiezo op elke vraag in css en heel veel tekst erbij en dat als hobby ofzo?

 

[csshunter]

Eh, ja: vrijwilliger; m'n boterham haal ik ergens anders vandaan. En tja, beetje uit de hand gelopen hobby, en daarmee (webbouwen en webmasteren) een goed van pas komende nevenactiviteit in m'n werk.
Langzamerhand (best wat jaartjes Google'en, leren & veel experimenteren) redelijk thuis geraakt in html en css, maar nooit een boek over gekocht: op internet via de praktijk en theorie en het css-discuss forum (hun Wiki ook niet te versmaden!) m'n kennis vergaard (=een uitpuilende bak met favorieten). Ooit begonnen met FrontPage (dat ding dat geen goede websites kan maken), daarna overgestapt naar het handwerk met Kladblok en behulpzame tools als de Webdeveloper Toolbar en Firebug.
De helpmij-vragen zie ik als puzzeltjes - en ik hou van puzzelen! *)

Groetjes,
CSShunter

*) En ook een beetje van schoolmeesteren, maar dat ben ik niet.