smisonline2
Threadersteller
Dabei seit: 13.08.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 23.08.2012 14:01
Titel Menuelement nach rechts überlappen? |
|
|
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
|
|