Ik zit met het volgende:
Ik heb een verticaal menu met sub menu's
die uitklappen naar rechts.
Alleen als als deze items uitklappen ontstaat erin het 1e niveau van
het menu een lege ruimte ter grote van heb submenu.
Hoe ga ik dit tegen.
/*
Alles op nul.
*/
*{
margin:0;
padding:0;
}
body{
background-color: #797979;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
.wrapper{
display:block;
height:550px;
width:975px;
top:50%;
left:50%;
margin: 112px 0 0 152px;
}
.header{
display:block;
height:101px;
width:973px;
background-color:#000000;
}
.content{
display:block;
height:399px;
width:973px;
background-image:url(Slices/content_background.png);
background-repeat:repeat-x;
}
/*
<-----begin sub menu niveau 1----->
*/
.home{
display:block;
height:15px;
font-weight:bold;
text-decoration:none;
padding-left:140px;
}
.home a{
display:block;
color:#000000;
text-decoration:none;
}
.subheader{
display:block;
height:28px;
width:190px;
background-color:#000000;
color:#FFFFFF;
font-weight:bold;
padding-left:10px;
margin-top:15px;
}
.submenu{
position:relative;
display:block;
background-image:url(Slices/menu_block.png);
background-repeat:no-repeat;
background-position: 181px 0;
height:399px;
width:200px;
float:left;
}
.submenu ul{
display:block;
width:145px;
list-style:none;
}
.submenu ul li{
display:block;
width:145px;
}
.submenu ul li a{
display:block;
width:145px;
color:#000000;
text-decoration:none;
font-weight:bold;
padding-left:10px;
}
.submenu ul li:hover a{
display:block;
width:145px;
background-color:#000000;
color:#FFFFFF;
padding-left:10px;
}
.submenu ul li:hover ul{
display:block;
}
.submenu ul li:hover ul li a{
display:block;
position:relative;
width:135px;
background-color:#FFFFFF;
color:#000000;
font-weight:bold;
z-index:2;
}
.submenu ul li:hover ul li:hover a{
display:block;
background-color:#000000;
color:#FFFFFF;
font-weight:bold;
z-index:2;
}
/*
<-----Einde submenu niveau 1----->
*/
/*
<-----Begin submenu niveau 2----->
*/
.submenu ul li ul{
display:none;
width:145px;
background-color:#FFFFFF;
color:#000000;
margin:-28px 0 0 145px;
}
.submenu ul li ul li{
display:block;
width:145px;
}
.submenu ul li ul li a{
display:block;
width:145px;
font-weight:normal;
background-color:#FFFFFF;
color:#333333;
}
/*
<-----Einde submenu niveau 2----->
*/
/*
<-----Begin submenu niveau 3----->
*/
.submenu ul li:hover ul li ul{
display:none;
width:145px;
background-color:#FFFFFF;
color:#000000;
}
.submenu ul li:hover ul li:hover ul{
display:block;
z-index:1;
}
.submenu ul li ul li ul li{
width:145px;
}
.submenu ul li:hover ul li:hover ul li a{
display:block;
background-color:#FFFFFF;
color:#333333;
}
.submenu ul li:hover ul li:hover ul li:hover a{
display:block;
background-color:#000000;
color:#FFFFFF;
}
/*
<------Einde submenu niveau 3----->
*/
.text{
display:block;
height:399px;
width:480px;
float:left;
background-color:#FF9933;
}
/*
<-----Begin mainmenu niveau 1----->
*/
.menu{
display:block;
height:15px;
width:480px;
z-index:-1;
}
.menu ul{
display:block;
height:15px;
width:480px;
float:left;
}
.menu ul li{
display:block;
width:120px;
float:left;
text-indent:10px;
}
.menu ul li a{
display:block;
width:120px;
float:left;
color:#000000;
text-decoration:none;
font-weight:bold;
}
.menu ul li:hover a{
display:block;
background-color:#000000;
color:#FFFFFF;
}
.menu ul li:hover ul{
display:block;
}
.menu ul li:hover ul li a{
display:block;
position:relative;
width:150px;
background-color:#FFFFFF;
color:#000000;
z-index:1;
}
/*
<-----Einde mainmenu niveau 1----->
*/
/*
<-----Begin mainmenu niveau 2----->
*/
.menu ul li ul{
display:none;
width:120px;
float:left;
}
.menu ul li ul li{
display:block;
width:120px;
float:left;
text-decoration:none;
font-weight:normal;
}
.menu ul li ul li a{
display:block;
height:15px;
font-weight:normal;
}
/*
<-----Einde van niveau 2----->
*/
.photo{
display:block;
height:399px;
width:293px;
background-image:url(Slices/main_picture.png);
float:left;
}
.leftfooter{
display:block;
height:39px;
width:201px;
background-color:#000000;
color:#FFFFFF;
background-image:url(Slices/footer_block.png);
background-repeat:no-repeat;
padding-top:11px;
background-position:181px 0px;
text-indent:57px;
font-weight:bold;
float:left;
}
.rightfooter{
display:block;
height:39px;
width:772px;
background:#000000;
color:#FFFFFF;
padding-top:11px;
text-indent:10px;
font-weight:bold;
float:left;
}
297 views