Zum Inhalt springen

einfaches menu ?

Erstellt am 16. September 2011 · 3 Antworten · letzte Antwort am 17. September 2011

Tags: Frage

The_C ·

hallo,
kann mir bitte jemand bei der umsetzung des menu helfen, ich verstehe nicht warumm das mit meinem ts nicht funktioniert... ich stehe voll auf der leitung.
danke schon mal jetzt für eure hilfe!

lib.field_nav = HMENU
lib.field_nav {
  wrap = <ul class="navigation">|</ul>
  1 = TMENU
  1 {
    wrapItemAndSub = <li>|</li>
    expAll = 1
    noBlur = 1
    NO = 1
    NO {
      allWrap = <li class="links">|</li>
      doNotLinkIt = 0
    }
      ACT < .NO
      ACT.ATagParams = class="aktiv"
  }
  2 = TMENU
  2 {
    expAll = 1
    noBlur = 1
    wrap = <ul>|</ul>
  }
}
<ul class="navigation">
          <li class="links"><a href="#">Home</a>
            <ul>
              <li class="links"><a href="#">untermenü 1</a></li>
              <li class="links"><a href="#">untermenü 2</a></li>
              <li class="links"><a href="#">untermenü 3</a></li>
            </ul>
          </li>
        
          <li><a href="#">Über uns</a>
            <ul>
              <li><a href="#">untermenü 1</a></li>
              <li><a href="#">untermenü 2</a></li>
            </ul>
          </li>
          <li><a href="#">Technik</a>
            <ul>
              <li><a href="#">untermenü 1</a></li>
              <li><a href="#">untermenü 2</a></li>
              <li><a href="#">untermenü 3</a></li>
            </ul>
          </li>
          <li><a href="#">Kontakt</a>
            <ul>
              <li><a href="#">untermenü 1</a></li>
            </ul>
          </li>
          <li><a href="#">Anfahrt</a></li>
        </ul>
ul {
	float: left;
	list-style: none; 
	position: relative;
	margin: -35px 0 0 218px;
}

ul li {
	float:left;	
}

ul li a {
	font-family:"Trebuchet MS";
	font-size:16px;
	font-weight:bold;
	text-align:left;
	color: #fff;
	text-decoration: none;
	width: 121px;
	padding: 4px 4px 4px 10px;
	background: #B92620;
	display: block;
	border-left:1px solid #FFF;
	border-bottom:1px solid #FFF;
	margin:0;
}

ul li ul {
	display: none;
}

ul li:hover ul {
	display: block;
	position: absolute;
	margin: 0 0 0 -39px;
}

ul li:hover > a {
	background: #98999C;
}

ul li ul li{
	float:none;
}

ul li ul li a {
	font-weight:normal;
	font-size: .8em;
	border:none;
	padding-left: 15px;
	width: 116px;
	border-bottom: 1px solid #fff;
}

/*_______________________________________________________________________
Abgerundetes Eck Links 
_______________________________________________________________________*/

ul li.links {
	float:left;	
}

ul li.links a {
	font-family:"Trebuchet MS";
	font-size:16px;
	font-weight:bold;
	text-align:left;
	color: #fff;
	text-decoration: none;
	width: 121px;
	padding: 4px 4px 4px 10px;
	background: #B92620;
	display: block;
	border-left:1px solid #FFF;
	border-bottom:1px solid #FFF;
	margin:0;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 10px 0px 0px 0px;
	border-radius: 10px 0px 0px 0px;
}

ul li.links ul {
	display: none;
}

ul li.links:hover ul {
	display: block;
	position: absolute;
	margin: 0 0 0 -39px;
}

ul li.links:hover > a {
	background: #98999C;
}

ul li.links ul li{
	float:none;
}

ul li.links ul li a {
	font-weight:normal;
	font-size: .8em;
	border:none;
	padding-left: 15px;
	width: 116px;
	border-bottom: 1px solid #fff;
	-moz-border-radius:0px;
	border-radius: 0px;
}

/*_______________________________________________________________________
IE Hacks 
_______________________________________________________________________*/
*+html ul {
	margin: -42px 0 0 283px;
	position: relative;
	width: 680px;
}

*+html ul li:hover ul, *+html ul li.links:hover ul {
	display: block;
	position: absolute;
	margin: 0px;
}
*+html ul li a, *+html ul li.links a  {
	width: 116px;
}

*+html ul li ul li a, *+html ul li.links ul li a {
	font-weight:normal;
	font-size: .8em;
	border:none;
	padding-left: 15px;
	margin-left: 1px;
	width: 111px;
	border-bottom: 1px solid #fff;
	margin-top: -1px;
}
etux ·
The_C schrieb

... warumm das mit meinem ts nicht funktioniert...

Weil es fehlerhaft ist.
Wie es richtig geht, kannst Du u.A. auch hier sehen:
#65143

.

etux ·
The_C schrieb

hallo,
momentan bich ich so weit gekommen das es richtig angezeitg wird aber leider immer noch falsch ist.
die <ul><li><a href="8/">Test 1</a></li> hat keinen hover was ist da bitte falsch..

Keine Ahnung wie Du das meinst. Warum postest Du nicht einen Link zu Deiner Website?

Für die „absolute“ positionierte UL (Unterebene) agiert die UL der Hauptebene als „Containing Block“. Ist das so gewollt? Oder willst Du die Unterebene an der entsprechenden LI der Hauptebene ausrichten? In diesem Fall sollten die LIs der Hauptebene die „position: relative;“ bekommen und nicht die UL.
Was soll der negative linke Margin bewirken?

.

The_C ·

ist erledigt es lag am css hat noch gefehlt :o
ul li.links ul li:hover > a {
background: none repeat scroll 0 0 #98999C;
}