mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 14:52 Benutzername: Passwort: Auto-Login

Thema: Menuelement nach rechts überlappen? vom 23.08.2012

Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Menuelement nach rechts überlappen?
Autor Nachricht
smisonline2
Threadersteller

Dabei seit: 13.08.2012
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 23.08.2012 14:01
Titel

Menuelement nach rechts überlappen?

Antworten mit Zitat Zum Seitenanfang

ich habe eine Menustruktur s.u. Dabei kappen dann die submenus auf. Jetzt sind diese Submenupunkte nebeneinader und nicht untereinander. Durch die große breite richten diese sich nach rechts unter dem Hauptmenupunt aus. Ich möchte aber, dass sie sich nach links ausrichten

Also jetzt ist es so
Code:

|Menu1| |Menu2| |Menu3|
----------------|Sub1| |Sub2| |Sub3|


Es soll aber so aussehen
|Menu1| |Menu2| |Menu3|
---|Sub1| |Sub2| |Sub3|



Mein aktueller css Code ist unten ebenfalls angefügt


Code:
<div id="menu" style="float:right;">
<ul>
<li class="startPage">
<a href="home.php" rel="rev_homepage" title="home">Home</a>
</li>
<li class="menu-drop">
<a href="#" rel="rev_Test_taste" title="Test taste">
<span class="menu-label">Test Taste</span>
</a>
<ul>
<li>
<a href="energy.php" rel="rev_energy" title="energy" data-transition='{"easing": "easeInOutQuint", "slideScroll": "vertical", "callback":""}'>
   <img class="menu_subimage" style="background:url(images/sexydropdownmenu/point1.png);width:130px;height:120px;" />
   <div>Energy Drink</div>
</a>
</li>                                     
</ul>               
</li>
<li class="menu-drop">
<a href="#" rel="rev_sexergy_life" title="Test Life"><span class="menu-label">Test Life</span></a>
<ul style="width:528px;">
<li>
<a href="events.php" rel="rev_events" title="Events" data-transition='{"easing": "easeInOutQuint", "slideScroll": "vertical", "callback":""}'>
   <img class="menu_subimage" style="background:url(images/sexydropdownmenu/point1.png);width:130px;height:120px;" />
   <div>Events</div>
</a>
</li>
<li>
<a href="shop.php" rel="rev_events" title="Shop" data-transition='{"easing": "easeInOutQuint", "slideScroll": "vertical", "callback":""}'>
   <img class="menu_subimage" style="background:url(images/sexydropdownmenu/point1.png);width:130px;height:120px;" />
   <div>Shop</div>
</a>
</li> 
<li>
<a href="presse.php" rel="rev_presse" title="Presse" data-transition='{"easing": "easeInOutQuint", "slideScroll": "vertical", "callback":""}'>
   <img class="menu_subimage" style="background:url(images/sexydropdownmenu/point1.png);width:130px;height:120px;" />
   <div>Presse</div>
</a>
</li>
<li>
<a href="presse.php" rel="rev_impressum" title="Impressum" data-transition='{"easing": "easeInOutQuint", "slideScroll": "vertical", "callback":""}'>
   <img class="menu_subimage" style="background:url(images/sexydropdownmenu/point1.png);width:130px;height:120px;" />
   <div>Impressum</div>
</a>
</li>                                       
</ul>               
</li>
<li class="menu-drop">
<a href="#" rel="rev_language" title="Test Language">
<span class="menu-label">Language</span>
</a>
<ul style="width:264px;">
<li>
<a href="#" rel="rev_english" title="Impressum" data-transition='{"easing": "easeInOutQuint", "slideScroll": "vertical", "callback":""}'>
   <img class="menu_subimage" style="background:url(images/sexydropdownmenu/point1.png);width:130px;height:120px;" />
   <div>English</div>
</a>
</li>   
<li>
<a href="#" rel="rev_deutsch" title="deutsch" data-transition='{"easing": "easeInOutQuint", "slideScroll": "vertical", "callback":""}'>
   <img class="menu_subimage" style="background:url(images/sexydropdownmenu/point1.png);width:130px;height:120px;" />
   <div>Deutsch</div>
</a>
</li>                                     
</ul>               
</li>
</ul>                 
</div>








Code:
#menu {
   font-size: 13px;
   height: 45px;
   position:relative;
   right:10px;
   padding: 10px;
   }
   
#menu ul {
   list-style: none;
   margin: 0;
   padding: 0;
   }

#menu a {
   font-size: 13px;
   font-weight: bold;
   text-decoration: none;

   background-color:#ffffff;
   -webkit-border-radius: 4px;
   -mo-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
   padding: 7px 15px 10px;
   -webkit-transition: background-color 0.1s;
   -moz-transition: background-color 0.1s;
   -ms-transition: background-color 0.1s;
   -o-transition: background-color 0.1s;
   transition: background-color 0.1s;
   }
   
/* Top buttons */
#menu > ul > li {
   float: left;
   margin: 5px 5px;
   position: relative;
   }

#menu > ul > li > a {
   /*line-height: 32px;*/
   color: #ED1C23;
   -webkit-border-radius: 4px;
   -mo-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
   padding: 7px 15px 10px;
   -webkit-transition: background-color 0.1s;
   -moz-transition: background-color 0.1s;
   -ms-transition: background-color 0.1s;
   -o-transition: background-color 0.1s;
   transition: background-color 0.1s;
   }

#menu > ul > li:hover > a {
   color: #e0e0e0;
   background-color: #404040;
   -webkit-transition: background-color 0.1s, color 0.1s;
   -moz-transition: background-color 0.1s, color 0.1s;
   -ms-transition: background-color 0.1s, color 0.1s;
   -o-transition: background-color 0.1s, color 0.1s;
   transition: background-color 0.1s, color 0.1s;
   }

#menu > ul > li > a.current{
   color: #e0e0e0;
   background-color: #404040;      
   }

#menu .menu-drop > a.current {
   -webkit-border-radius: 4px;
   -mo-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;   
   }

#menu .menu-drop:hover > a.current {
   -webkit-border-radius: 4px;
   -mo-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
   }

#menu .menu-drop > a.current .menu-label {
   background-image: url("../images/revolverslider/drop_arrow.png");
   background-position:right -23px;
   background-repeat:no-repeat;   
   }
   
#menu .menu-drop > a {
   -webkit-border-radius: 4px;
   -mo-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
   padding-right: 10px;
   }
      
#menu .menu-label {
   background-image: url("../images/revolverslider/drop_arrow.png");
   background-position:right 7px;
   background-repeat:no-repeat;
   -webkit-transition: background 0.1s;
   -moz-transition: background 0.1s;
   -ms-transition: background 0.1s;
   -o-transition: background 0.1s;
   transition: background 0.1s;
   padding-right: 15px;
   }

#menu .menu-drop:hover .menu-label {
   background-position:right -23px;
   -webkit-transition: background 0.1s;
   -moz-transition: background 0.1s;
   -ms-transition: background 0.1s;
   -o-transition: background 0.1s;
   transition: background 0.1s;
   }

#menu .menu-right {
   float: right;
   }
      
      
/* Dropdown */
#menu ul ul {
   background-color: #404040;
   -webkit-border-radius-: 0 0 4px 4px;
   -mo-border-radius: 0 0 4px 4px;
   -ms-border-radius: 0 0 4px 4px;
   -o-border-radius: 0 0 4px 4px;
   border-radius: 0 0 4px 4px;

margin-top:10px;
   position: absolute;




left:1000px;



/*top: 52px;*/
/*left: -5000px;*/
/*min-width: 100%;*/
   z-index: 100;
   opacity: 0;
   }

#menu li:hover ul {
   left: 0;
   opacity: 1;
   -webkit-transition: opacity 0.1s;
   -moz-transition: opacity 0.1s;
   -ms-transition: opacity 0.1s;
   -o-transition: opacity 0.1s;
   transition: opacity 0.1s;
   }
      
/* Dropdown buttons */
#menu ul ul li {
   white-space: nowrap;
   margin-right:2px;
   float:left;
   }

#menu ul ul a {
   background-color: #000033;
   font-size: 1.0em;
   color: #ffffff;
   padding: 0;
   display: block;   
   -webkit-transition: background-color 0.1s, color 0.1s;
   -moz-transition: background-color 0.1s, color 0.1s;
   -ms-transition: background-color 0.1s, color 0.1s;
   -o-transition: background-color 0.1s, color 0.1s;
   transition: background-color 0.1s, color 0.1s;
   }

#menu ul ul a:hover {
   color: #ffffff;
   background-color: #000044;
   -webkit-transition: background-color 0.1s, color 0.1s;
   -moz-transition: background-color 0.1s, color 0.1s;
   -ms-transition: background-color 0.1s, color 0.1s;
   -o-transition: background-color 0.1s, color 0.1s;
   transition: background-color 0.1s, color 0.1s;
   }

#menu ul ul a.current {
   background-color: #000033;
   }

#menu ul ul a:hover.current {
   background-color: #000033;
   }
   
#menu ul ul div {
   padding:6px 2px 6px 16px;
   }


Zuletzt bearbeitet von smisonline2 am Do 23.08.2012 14:05, insgesamt 5-mal bearbeitet
  View user's profile Private Nachricht senden
Ähnliche Themen [CSS] Überlappen von Listenelement
[DIV] Probleme mit Positionierung (überlappen)
illustrator cs2 / objekte überlappen
Boxen sollen überlappen
css menü soll div überlappen
[DIV; SOLVED] Überlappen, aber zentriert..?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.