gib die ebene 2 doch einfach in einen eigenen div-container und/oder gib es als liste aus (li). das ganze kannst du dann einfach über css regeln, indem du z. b. li float:left zuweist. dadurch werden die einzelnen listenelemente hintereinander aufgefädelt ... ich hab mal schnell ein menü etwas modifiziert, um das zu zeigen (kopier dir mal den html-code und gib das css in die datei layout.css und gib die css-datei in den unterordner css (wird zwar trotzdem etwas komisch aussehen, da bilder fehlen:sad:
CSS:
body {
margin: 0;
padding: 0;
background-image: url(../images/bg_body.gif);
background-color: #333333;
background-repeat: repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#menu {
width: 750px;
height: 40px;
float: left;
margin-left: 40px;
background: #000000;
}
#menu_inner {
float: left;
margin-top: 14px;
}
/* Menü Top Mitte Anfang */
#nav {
}
#nav, #nav ul {
float: left;
width: 100%;
list-style: none;
background: none;
font-weight: normal;
padding: 0;
border: solid #eda;
border-width: 0px 0;
margin: 0 0 0 0;
}
#nav a {
display: block;
width: auto;
color: #FFFFCC;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: left;
margin-top: 0;
margin-right: 15px;
margin-bottom: 0;
margin-left: 0;
padding-right: 0;
padding-bottom: 2px;
padding-left: 18px;
font-family: LithographLight;
background-image: url(../images/quadrat-1.png);
background-repeat: no-repeat;
background-position: left top;
}
#nav a:hover {
color: #FF9A00;
}
#nav a.active {
display: block;
/* width: 107px;
w\idth: 107px; */
width: auto;
color: #FF9A00;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: left;
margin-top: 0;
margin-right: 21px;
margin-bottom: 0;
margin-left: 0;
padding-right: 0;
padding-bottom: 2px;
padding-left: 18px;
font-family: LithographLight;
background-image: url(../images/quadrat.png);
background-repeat: no-repeat;
background-position: left top;
}
* html #nav a.active {
padding-bottom: 12px;
}
#nav li {
float: left;
padding: 0;
border-right-width: 0px;
border-right-style: solid;
border-right-color: #FFFFFF;
border-left-width: 0px;
border-left-style: solid;
border-left-color: #999999;
}
#nav li:hover, #menu li.hover {
position: static;
}
#nav li ul {
/* position: absolute;
left: -999em; diese zwei zeilen werden nur bei Hover-Menü benötigt */
height: auto;
width: 310px; /* hier wird die Breite des Submenü festgelegt */
font-weight: normal;
border-width: 0em;
background: none;
background-image: url(../images/bg_menu.png);
margin-top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
* html #nav li ul {
background-image: url(../images/bg_menu_ie6.png);
margin-top: 0;
}
#nav li li {
width: auto;
border: none;
background: none;
margin-left: 11px;
float: left;
}
* html #nav li li {
padding-right: 0;
margin-left: 6px;
}
#nav li ul a { /* Link Ebene 2 */
text-align: left;
padding-top: 8px;
padding-bottom: 7px;
background: none;
border-bottom-width: 0px;
border-bottom-style: dotted;
border-bottom-color: #000;
margin: 0;
padding-left: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
}
#nav li ul a.active { /* Link Ebene 2 active */
text-align: left;
padding-top: 8px;
padding-bottom: 7px;
background: none;
border-bottom-width: 0px;
border-bottom-style: dotted;
border-bottom-color: #000;
margin: 0;
padding-left: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
text-decoration: underline;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Submenu Container</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="menu">
<div id="menu_inner">
<ul id="nav">
<li><a href="/">Menu 1</a></li>
<li><a href="/" class="active">Menu 2</a>
<ul>
<li><a href="/" class="active">Submenu 1</a></li>
<li><a href="/">Submenu 1</a></li>
<li><a href="/">Submenu 2</a></li>
<li><a href="/">Submenu 3</a></li>
<li><a href="/">Submenu 4</a></li>
<li><a href="/">Submenu 5</a></li>
<li><a href="/">Submenu 6</a></li>
<li><a href="/">Submenu 7</a></li>
<li><a href="/">Submenu 8</a></li>
<li><a href="/">Submenu 9</a></li>
</ul>
</li>
<li><a href="/">Menu 3</a></li>
<li><a href="/">Menu 4</a>
<ul>
<li><a href="/" class="active">Submenu 1</a></li>
<li><a href="/">Submenu 1</a></li>
<li><a href="/">Submenu 2</a></li>
<li><a href="/">Submenu 3</a></li>
<li><a href="/">Submenu 4</a></li>
<li><a href="/">Submenu 5</a></li>
<li><a href="/">Submenu 6</a></li>
<li><a href="/">Submenu 7</a></li>
<li><a href="/">Submenu 8</a></li>
<li><a href="/">Submenu 9</a></li>
</ul>
</li>
</ul>
</div><!-- End menu_inner -->
</div><!-- End menu -->
</body>
</html>
Hier noch der setup-coden für das menü (musst halt die schrift, hintergrundbild usw. anpassen. für das submenü kannst du ja dann auch ein grafikmenü machen - hier ist es ein textmenü:sad:
##Grafisches Menue 1. Ebene – Hover 2. Ebene Text – Bioart
## Menu links Ebene2 [Begin]
lib.subMenu = HMENU
lib.subMenu.entryLevel = 1
lib.subMenu.wrap = <ul id="nav_left">|</ul>
lib.subMenu.1 = TMENU
lib.subMenu.1.NO {
allWrap = <li>|</li>
}
lib.subMenu.1.ACT = 1
lib.subMenu.1.ACT {
allWrap = <li class="active_li">|</li>
ATagParams = class="active"
}
## Menu [End]
## Grafisches Menu Ebene 1 mit Submenü in Box darunter [Begin]
lib.mainMenu = HMENU
lib.mainMenu {
entryLevel = 0
1 = GMENU
1 {
noBlur = 1
expAll = 1
wrap = <ul id="nav">|</ul>
NO = 1
NO.wrap = |*| <li>|</li>|*| <li>|</li>
NO {
transparentBackground = 1
ATagTitle.field = title
XY=[10.w]+10,24
5 = IMAGE
5.file = fileadmin/templates/ordner/images/menuBG.gif
10=TEXT
10 {
text.field=title
offset=0,10
fontColor=#FFFFCC
fontFile=fileadmin/templates/ordner/LITHOGRL.TTF
fontSize=13
}
}
ACT = 1
ACT.wrap = |*| <li>| |*| <li>|
ACT {
transparentBackground = 1
ATagTitle.field = title
XY=[10.w]+10,24
5 = IMAGE
5.file = fileadmin/templates/ordner/images/menuBG.gif
10=TEXT
10 {
text.field=title
offset=0,10
fontColor=#FF9A00
fontFile=fileadmin/templates/ordner/LITHOGRL.TTF
fontSize=13
}
}
ACTRO <.RO
IFSUB = 1
IFSUB < .NO
IFSUB.wrap = |*| <li>| |*| <li>|
RO = 1
RO.wrap = |*| <li>|</li>|*| <li>|</li>
RO {
transparentBackground = 1
ATagTitle.field = title
XY=[10.w]+10,24
5 = IMAGE
5.file = fileadmin/templates/ordner/images/menuBG.gif
10=TEXT
10 {
text.field=title
offset=0,10
fontColor=#FF9A00
fontFile=fileadmin/templates/ordner/LITHOGRL.TTF
fontSize=13
}
}
IFSUBRO < .RO
IFSUBRO.6 = IMAGE
}
2 = TMENU
2 {
noBlur = 1
expAll = 1
wrap = <ul><li>|</ul></li>
NO = 1
NO {
wrap = <li>|</li>
}
ACT = 1
ACT {
Wrap = <li>|</li>
ATagParams = class="active"
}
}
}
## Menu [End]