Sebastian: CSS Menü - Nach links öffnen

Schönen Guten Tag liebe Community,

ich bin derzeit dabei mir ein Menü mit Hilfe von CSS zusammen zu basteln.

Als Grundlage habe ich ein Menü von cssplay genommen und diese nach meinen angepasst, wenn auch eher mit Probieren statt Wissen. Ich kann nicht sehr gut mit CSS umgehen.

Das linke Menü für meine Webseite habe ich soweit fertig gestellt. Jetzt stehe ich vor folgenden Problem: Ich möchte das Menü auch auf der rechten Seite haben, nur müssen dann die ganzen Menü-Kästchen sich nach links öffnen und nicht nach rechts wie bisher. Also einmal Seitenverkehrt. Bloß, ich weiß nicht, wie ich das CCS anpassen muss. Sind bestimmt nur 3 Werte oder so, aber ich kann es leider nicht. Vielleicht kann einer helfen? Wäre sehr nett. Ich hoffe, es war ein wenig verständlich ...

Ich habe den verwendeten CSS Code hier hinein kopiert. Ich hoffe, dass genügt.

  
/*Oben Menü*/  
  
/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */  
#menu_container {  
	position:relative;  
	z-index: 100;  
	background-color: #FFF;  
}  
  
/* Get rid of the margin, padding and bullets in the unordered lists */  
#pmenu, #pmenu ul {  
	padding:0;  
	margin:0;  
	list-style-type: none;  
	font-size: 90px;  
}  
  
/* Set up the link size, color and borders */  
#pmenu a, #pmenu a:visited {  
	display:block;  
	width:148px;  
	font-size:12px;  
	color:#000000;  
	height:25px;  
	line-height:24px;  
	text-decoration:none;  
	text-indent:5px;  
	border:1px solid #000;  
	border-width:1px 0 1px 1px;  
}  
  
/* Set up the sub level borders */  
#pmenu li ul li a, #pmenu li ul li a:visited {border-width:0 1px 1px 1px;}  
#pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px;}  
  
/* Set up the list items */  
#pmenu li {float:left; background:#ffffff;}  
  
/* For Non-IE browsers and IE7 */  
#pmenu li:hover {  
	position:relative;  
	font-size: 11%;  
}  
/* Make the hovered list color persist */  
#pmenu li:hover > a {background:#64473a; color:#ffffff;}  
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */  
#pmenu li ul {display:none;}  
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */  
#pmenu li:hover > ul {display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; width:120px;}  
/* Position the first sub level beneath the top level liinks */  
#pmenu > li:hover > ul {left:-30px; top:16px;}  
  
/* get rid of the table */  
#pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}  
  
/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */  
* html #pmenu li a:hover {position:relative; background:#64473a; color:#ffffff;}  
  
/* For accessibility of the top level menu when tabbing */  
#pmenu li a:active, #pmenu li a:focus {  
	background:#64473a;  
	color:#000;  
	font-size: 90%;  
}  
  
/* Set up the pointers for the sub level indication */  
#pmenu li.fly {background:#ffffff  no-repeat right center;}  
#pmenu li.drop {background:#ffffff  no-repeat right center;}  
  
  
/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */  
  
/* change the drop down levels from display:none; to visibility:hidden; */  
* html #pmenu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif);}  
  
/* keep the third level+ hidden when you hover on first level link */  
#pmenu li a:hover ul ul{  
visibility:hidden;  
}  
/* keep the fourth level+ hidden when you hover on second level link */  
#pmenu li a:hover ul a:hover ul ul{  
visibility:hidden;  
}  
/* keep the fifth level hidden when you hover on third level link */  
#pmenu li a:hover ul a:hover ul a:hover ul ul{  
visibility:hidden;  
}  
/* keep the sixth level hidden when you hover on fourth level link */  
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {  
visibility:hidden;  
}  
  
/* make the second level visible when hover on first level link and position it */  
#pmenu li a:hover ul {  
visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;  
}  
  
/* make the third level visible when you hover over second level link and position it and all further levels */  
#pmenu li a:hover ul a:hover ul{  
visibility:visible; top:-11px; left:80px;  
}  
/* make the fourth level visible when you hover over third level link */  
#pmenu li a:hover ul a:hover ul a:hover ul {  
visibility:visible;  
}  
/* make the fifth level visible when you hover over fourth level link */  
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul {  
visibility:visible;  
}  
/* make the sixth level visible when you hover over fifth level link */  
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {  
visibility:visible;  
}  
/* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */  

  1. Bloß, ich weiß nicht, wie ich das CCS anpassen muss.

    Ich würde hier beginnen - die Begrifflichkeit "left" (engl. für Links) ist dir hoffentlich bekannt?

    /* make the third level visible when you hover over second level link and position it and all further levels */
    #pmenu li a:hover ul a:hover ul{
    visibility:visible; top:-11px; left:80px;
    }

    1. Was soll ich sagen. Echt dämlich, aber ich steige bei mir einen CSS Code selbst nicht durch. Ich habe ausversehen das Menü von oben genommen, nicht das link. Jetzt das richtige:

      Aber was muss ich da genau ändern? Ich habe schon versucht aus lefts rights zu machen und bisschen an den Werten rumgeschaubt, aber es kommt irgendwie nicht der Effekt, den ich gerne hätte.

      Aber danke für die bisherige Hilfe. Vielleicht findet ja jemand eine Lösung .. Danke schonmal dafür.

      /*Seite Menü*/  
      .menu {  
      	position:relative;  
      	z-index:1000;  
      	font-size:12px;  
      	height:400px;  
      	margin:-3px 0 0 0px; /* this page only */  
      }  
        
        
      /* remove all the bullets, borders and padding from the default list styling */  
      .menu ul {  
      padding:0;  
      margin:0;  
      list-style-type:none;  
      width:148px;  
      position:relative;  
      border:1px solid #888;  
      border-width:1px 0 0 1px;  
      background:#ffffff;  
      }  
        
      .menu li {  
      background:transparent;  
      height:26px;  
      }  
      * html .menu li {margin-left:-16px; margin-left:0;}  
      /* get rid of the table */  
      .menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; width:0; height:0;}  
        
      /* style the links */  
      .menu a, .menu a:visited {  
      font-family:verdana, arial, sans-serif;  
      display:block;  
      text-decoration:none;  
      height:25px;  
      line-height:25px;  
      width:148px;  
      color:#000;  
      text-indent:5px;  
      border-bottom:1px solid #888;  
      background:transparent;  
      }  
      /* style the link hover */  
      * html .menu a:hover {color:#fff; background:#999;}  
        
      .menu :hover > a {  
      color:#fff;  
      background:#64473a;  
      }  
        
      /* hide the sub levels and give them a positon absolute so that they take up no room */  
      .menu ul ul {  
      visibility:hidden;  
      position:absolute;  
      top:-1px;  
      left:100px;  
      }  
      /* make the second level visible when hover on first level list OR link */  
      .menu ul li:hover ul,  
      .menu ul a:hover ul {  
      visibility:visible;  
      background:#ffffff;  
      }  
      /* keep the third level hidden when you hover on first level list OR link */  
      .menu ul :hover ul ul{  
      visibility:hidden;  
      }  
      /* keep the fourth level hidden when you hover on second level list OR link */  
      .menu ul :hover ul :hover ul ul{  
      visibility:hidden;  
      }  
      /* make the third level visible when you hover over second level list OR link */  
      .menu ul :hover ul :hover ul{  
      visibility:visible;  
      background:#ffffff;  
      }  
      /* make the fourth level visible when you hover over third level list OR link */  
      .menu ul :hover ul :hover ul :hover ul {  
      visibility:visible;  
      background:#ffffff;  
      }  
        
        
      .menu ul ul li a {width:149px; border-right:1px solid #888;}  
        
      .menu ul.top2 {top:25px;}  
      .menu ul.top3 {top:51px;}  
      .menu ul.top4 {top:77px;}  
      .menu ul.top5 {top:103px;}  
      .menu ul.top6 {top:129px;}  
      .menu ul.top7 {top:155px;}  
      .menu ul.top8 {top:181px;}  
      .menu ul.top9 {top:207px;}  
      .menu ul.top10 {top:233px;}  
      .menu ul.top11 {top:275px;}  
      .menu ul.top12 {top:301px;}  
      	  
      .bildmenue {  
      	width: 148;  
      	height: 50;  
      }