smisonline2
Mitglied
Hallo,
ich habe gerade ein Menu, dass sich nach unten öffnet und dann nebeeinader die Menueinträge anzeigt. Das Problem ist, dass die Untermenupunkte den Abstand der Hauptmenupunkte erhöht. Also wenn ich 10 Untermenupunkte a 100px habe, dann verschiebt sich oben der Hauptmenupunkt um diese 1000Pixel. WIe kann ich das beheben? Die Struktur sieht so aus
Das CSS sieht aktuell so aus
ich habe gerade ein Menu, dass sich nach unten öffnet und dann nebeeinader die Menueinträge anzeigt. Das Problem ist, dass die Untermenupunkte den Abstand der Hauptmenupunkte erhöht. Also wenn ich 10 Untermenupunkte a 100px habe, dann verschiebt sich oben der Hauptmenupunkt um diese 1000Pixel. WIe kann ich das beheben? Die Struktur sieht so aus
HTML:
<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_menu1" title="taste">
<span class="menu-label">menu1</span>
</a>
<ul>
<li>
<a href="energy.php" rel="rev_energy" title="rev_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</div>
</a>
</li>
</ul>
</li>
<li class="menu-drop">
<a href="#" rel="menu2" title="Test Life"><span class="menu-label">Test Life</span></a>
<ul>
<li>
<a href="menu2.php" rel="rev_menu2" 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>Menu 2</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>Shop</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>
<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>Das CSS sieht aktuell so aus
HTML:
#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;*/
/*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:
