krijg <ul> niet verplaatst??

[nl18663]

Hallo,

ik ben al enige tijd (met de nodige frustratie) bezig om een <ul> te verplaatsen, maar helaas krijg ik het niet voor elkaar... nu heeft dit waarschijnlijk met inherritance of met de cascade te maken, maar ik heb te weinig kennis om dit op te lossen, zou iemand mij in de juiste richting kunnen duwen?

nav_menu1 kan ik bepalen waar deze komt, dat is het probleem niet, maar bij sub_1 kan ik dat niet, daar kan ik instellen wat ik wil, ik krijg het niet voor elkaar. ik denk dus dat ik ergens een denk fout heb gemaakt maar ik kan niet zien welke.

#topmenu ul, #topmenu il {
	margin: 0;
	padding: 0;
}

#topmenu ul {
	list-style-type: none;	
}

#topmenu li {
	display: block; /* om clickveld te vergroten */
	background: #C60F0F; /* achtergrond kleur menu */
	width: 131px;
	height: auto;
	text-align: center;
	margin: 0 5px 0 0;
	padding: 0;	
}

#topmenu a {
	display: block;
	color: #D9E4E6; /* text color */
	margin: 0;
	padding: 0 5px;
	text-decoration: none;	
}

#topmenu a:link, #topmenu a:visited {
	font-family: Tahoma, Geneva, sans-serif;
	color: #D9E4E6;
	text-decoration: none;	
}

#topmenu a:hover {
	background: #900F0F;
	opacity: 1;
}

ul.horizontaal_menu li {
		float: left;
}

ul.menu_vert {
	position: absolute;
	top: 20px;
	display: none;
	opacity: 1;
}

.menu_vert li {
	line-height: 2em;
	border-top: 1px solid #FFF;	
}


ul#nav_menu_top { left: 0px   }
ul#nav_menu_1    { left: 136px }
ul#nav_menu_2    { left: 272px }
ul#nav_menu_3    { left: 408px }
ul#nav_menu_4    { left: 544px }

<div id="header"><div id="topmenu">
    <ul id="nav_menu_top" class="horizontaal_menu">
      <li id="nav_home"><a href="#Home">Home</a></li>
      <li id="nav_1"><a href="#test1">Consulantancy</a></li>
      <li id="nav_2" ><a href="#test2">Webservices</a></li>
      <li id="nav_3" ><a href="#test3">Productfotografie</a></li>
      <li id="nav_4" ><a href="#test4">Over ons</a></li>
    </ul>
    <ul id="nav_menu_1" class="menu_vert">
      <li id="nav_1_1"><a href="#">test1_1</a></li>
      <li id="nav_1_2"><a href="#">test1_2</a></li>
      <li id="nav_1_3"><a href="#">test1_3</a></li>
    </ul>
	    <ul id="sub_1" class="subtab">
    		<li id="nav_watishet"><a href="#">Wat is het</a></li>
    		<li id="nav_service"><a href="#"> Service</a></li>
      		<li id="nav_zelfdoen"><a href="#">Wat kan ik zelf doen</a></li>
    	</ul>
</div>

 

[vreugde]

Oke ik begrijp het niet helemaal, want waar wil je sub_1 dan hebben en moet je dan ook geen omschrijving in de CSS voor id sub_1 aanmaken?

 

[DaveDJ]

Ik snap je vraag ook niet echt. Wil je de menu knoppen allemaal naast elkaar hebben?

 

[nl18663]

sorry voor de onduidelijkheid.
zoals het nu werkt is dat .horizontaal_menu netjes naast elkaar horizontaal staat.
als ik over een van die items hover heb ik met Jquery dat menu_vert tevoorschijn komt onder het desbetreffende .horizontaal_menu (dat doe ik met die left: ...px; op het einde)
wat ik niet voor elkaar krijg is de subtab naast een van de items van het menu_vert

ik kan aan CSS maken wat ik wil zoals bijv
ul#sub_1 { left:200px } daar gebeurt helemaal niets mee... daar zit de frustratie.

ik hoop dat ik het een beetje heb kunnen overdragen.
alvast bedankt!

 

[csshunter]

Hoi nl18663,
Bij een (sub)submenu moet de <ul> daarvan binnen de <li> zitten waar het submenu onder (of naast) hoort.
Heb je als een zoiets geprobeerd:

<div id="header">
    <div id="topmenu">
    <ul id="nav_menu_top" class="horizontaal_menu">
        <li id="nav_home"><a href="#Home">Home</a></li>
        <li id="nav_1"><a href="#test1">Consulantancy</a>
            <ul id="nav_menu_1" class="menu_vert">
                <li id="nav_1_1"><a href="#">test1_1</a>
                    <ul id="sub_1" class="subtab">
                        <li id="nav_watishet"><a href="#">Wat is het</a></li>
                        <li id="nav_service"><a href="#"> Service</a></li>
                        <li id="nav_zelfdoen"><a href="#">Wat kan ik zelf doen</a></li>
                    </ul>
                </li>
                <li id="nav_1_2"><a href="#">test1_2</a></li>
                <li id="nav_1_3"><a href="#">test1_3</a></li>
            </ul>
        </li>
        <li id="nav_2" ><a href="#test2">Webservices</a></li>
        <li id="nav_3" ><a href="#test3">Productfotografie</a></li>
        <li id="nav_4" ><a href="#test4">Over ons</a></li>
    </ul>
    </div>
</div>

Met vriendelijke groet,
CSShunter