Hallo!
Möchte bei meiner Seite ein drop-down menü erstellen.
CSS-Code und den Code von Typo3 habe ich bereits erstellt, jedoch funktioniert nicht wirklich was.
CSS-Code:
/* MENUE */
ul.menu, ul.menu ul{
list-style-type: none;
}
ul.menu.a {
display-block;
text-align: center;
width: 120px;
padding-top: 5px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 5px;
font-weight:bold;
color:white;
}
ul.menu ul a {
padding: 0px;
border-right: none;
border-left: none;
}
ul.menu li {
margin:0;
background-image: none;
background-color:black;
float:left;
border: none;
}
ul.menu. ul {
margin-left: 0;
padding: 0px;
position: absolute;
background-color: black;
border 1px solid #FFF9E4;
display: none;
min-width: 120 px;
}
/* Internet Explorer für die Breite */
/*html ul menu ul {
width:118px;
}
/* Dies sind die Klassenstile für das Untermenü wenn sich die Maus */
/* über der Liste befindet (.hover siehe JavaScript oben) */
ul.menu ul.hover, ul.menu li.hover ul, ul.menu li:hover ul {
display: block;
}
ul.menu li.hover, ul.menu li:hover{
background-color: #A6CE39;
}
/* Menüpunkte zweite Ebene */
ul.menu ul li {
float: none;
background-color: transparent;
padding-bottom: 5px;
padding-top: 5px;
border-left: none;
border-right: none;
border-bottom: 1 px solid white;
}
Typo3:
# Die Menüpunkte oben (TOPMENU) erstellen
10.marks{
TOPMENU = HMENU
TOPMENU {
special = directory
special.value = 31
#1. Ebene
1 = TMENU
1 {
wrap = <ul class="menu">|</ul>
expAll = 1
NO.warpItemAndSub = <li onmouseover="show(this)"onmouseout="hide(this)">|</li>
ACT < .NO
ACT = 1
ACT.ATagParams = class="active"
}
####Zweite Ebene####
2 = TMENU
2 {
wrap = <ul onmouseover="show(this)" onmouseout="hide(this)">|</ul>
NO.allwrap = <li>|</li>
}
}
}
Kann jemand helfen???
Lg
mittlerweile werden die Menüpunkte angezeigt, jedoch nicht nebeneinander in dem dafür vorgesehenen bereich (topmenu), sondern untereinander.
vl weiß jemand wie ich dass ändern kann??
CSS:
/* MENUE */
ul.menu, ul.menu ul{
list-style-type: none;
}
ul.menu a {
display: block;
text-align: center;
width: 190px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
font-weight:bold;
color:white;
}
ul.menu ul a {
padding: 0px;
border-right: none;
border-left: none;
}
ul.menu li {
margin:0;
background-image: none;
background-color:black;
float:left;
border: none;
}
ul.menu ul {
margin-left: 0px;
padding: 0px;
position: absolute;
background-color: black;
border: 1px solid #FFF9E4;
display: none;
min-width: 120 px;
}
/* Internet Explorer für die Breite */
*html ul.menu ul {
width:186px;
}
/* Dies sind die Klassenstile für das Untermenü wenn sich die Maus */
/* über der Liste befindet (.hover siehe JavaScript oben) */
ul.menu ul.hover, ul.menu li.hover ul, ul.menu li:hover ul {
display: block;
}
ul.menu li.hover, ul.menu li:hover{
background-color: #A6CE39;
}
/* Menüpunkte zweite Ebene */
ul.menu ul li {
float: none;
background-color: transparent;
padding-bottom: 5px;
padding-top: 5px;
border-left: none;
border-right: none;
border-bottom: 1 px solid white;
}
TYPO3:
# Die Menüpunkte oben (TOPMENU) erstellen
page.10=TEMPLATE
page.10{
marks.TOPMENU=HMENU
marks.TOPMENU {
special = directory
special.value = 31
# Erste Ebene
1 = TMENU
1 {
wrap = <ul class="menu">|</ul>
expAll = 1
NO.warpItemAndSub = <li onmouseover="show(this)"onmouseout="hide(this)">|</li>
ACT < .NO
ACT = 1
ACT.ATagParams = class="active"
}
# Zweite Ebene
2 = TMENU
2 {
wrap = <ul onmouseover="show(this)" onmouseout="hide(this)">|</ul>
NO.allwrap = <li>|</li>
}
}
NO.warpItemAndSub = <li onmouseover="show(this)"onmouseout="hide(this)">|</li>
hat einen Schreibfehler...
Ansonsten sieht das gant gut aus. Hast du geguckt, dass dein Doctype in TYPO richtig gesetzt ist?