XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS Dropdown Navi verschoben/erscheint versetzt (http://xhtmlforum.de/showthread.php?t=73118)

cytochrom 17.01.2017 14:04

CSS Dropdown Navi verschoben/erscheint versetzt
 
Hallo zusammen,
ich bin ein Neuling in CSS und arbeite derzeit an der Erstellung eines Online-Shops mit Magento 1.9. Da habe ich nun das Navigationsmenü für mich konfiguriert, jedoch erscheint das Drop-Down nun leider etwas nach links versetzt/verschoben. Ich hoffe Ihr könnt das verstehen. Sonst würde ich noch einen Screenshot hochladen...

Hier ist der Code zu dem Menü, ich würde mich sehr freuen, wenn jemand den Fehler finden könnte. :)

viele grüße und vielen dank für Eure Hilfe!


Code:

/*===custommenu==============*/

.pt_custommenu {
position:relative;
z-index:1000;
margin:0 auto;
}
.pt_custommenu div.pt_menu {display: inline-block;}
/*.pt_custommenu .parentMenu{padding: 0 20px}*/
.pt_custommenu div.pt_menu .parentMenu a,
.pt_custommenu div.pt_menu .parentMenu span.block-title{
padding:15px 0px;
text-decoration: none;
display:block;
text-transform:uppercase;
font-weight: 600;
font-family: Open Sans;
color: #232323;
font-size: 14px;
}
.pt_custommenu div.pt_menu .parentMenu a span,
.pt_custommenu div.pt_menu .parentMenu span.block-title span{
display: block;
border-left: 1px solid #FFFFFF;
padding: 5px 20px;
}
#pt_menu_home .parentMenu a span{border: none;}
.pt_custommenu div.pt_menu.act a,
.pt_custommenu div.pt_menu.active .parentMenu a,
.pt_custommenu #pt_menu_pt_item_menu_custom_menu.active span{color:#e03550}
.pt_custommenu div.pt_menu.act,
.pt_custommenu div.pt_menu.active .parentMenu{}

#pt_menu_pt_item_menu_custom_menu.active .parentMenu span,
#pt_menu_pt_item_menu_featured_custom.active .parentMenu span
{cursor: pointer;
color:#ffa200;
}
.pt_custommenu div.pt_menu.active {}

.pt_custommenu div.pt_menu.act .itemSubMenu .itemMenuName:hover{color:#e03550}
.pt_custommenu div.pt_menu.act .itemSubMenu .itemMenuName{color:#444444}
.pt_custommenu div.pt_menu.act .itemMenu .itemMenuName
#pt_menu_home a{padding-left: 0}
.pt_custommenu div.pt_menu.active {}
.pt_custommenu div.popup {
position:absolute;
z-index:3000;
text-align:left;
width: 904px;
padding: 0;
padding-left:0
margin: 0;
opacity: .85;
background-color:#FFFFFF;
box-shadow: 0 2px 3px rgba(0,0,0,0.3);

}
.pt_custommenu div.pt_menu .parentMenu a:hover,
.pt_custommenu div.pt_menu .parentMenu span.block-title:hover,
.pt_custommenu #pt_menu_link ul li a.act,
.pt_custommenu #pt_menu_link ul li a:hover{color:#e03550;}

.pt_custommenu div.popup a {
    text-decoration: none;
    display:block;
    line-height:28px;
}
.pt_custommenu .itemMenu h4.level1,
.pt_custommenu .itemMenu a.level1{
 font-size:1em;
font-weight: normal;
text-transform: uppercase;
margin-bottom: 10px;
color: #333 !important;
font-family: Open Sans;
font-weight: 600;
word-wrap: break-word;
position: relative;
}
.pt_custommenu .itemMenu h4.level1 span, .pt_custommenu .itemMenu a.level1 span{background-color: #FFFFFF;display: inline-block;padding-right: 10px}
.pt_custommenu .itemMenu a.level1.nochild{text-transform: capitalize;font-size:1em;border: none}
.pt_custommenu .itemMenu h4.level1:hover,
.pt_custommenu .itemMenu a.level1:hover {
    color:#e03550 !important;
/*    text-decoration: underline;*/
}
.pt_custommenu .itemSubMenu h4.level2,
.pt_custommenu .itemSubMenu a.level2,
.pt_custommenu .itemSubMenu h4.level3,
.pt_custommenu .itemSubMenu a.level3
{
text-transform:capitalize;
font-weight: normal;
font-size:1em;
line-height:120px;
word-wrap: break-word;
color: #909090
}
.pt_custommenu .itemSubMenu a.level2:hover,
.pt_custommenu .itemMenu a.level1.nochild:hover{color: #e03550;}
.pt_custommenu div.popup a.actParent {
    color: #e03550;
}
.pt_custommenu div.popup a.act {
    color:#e03550 !important;
}
.pt_custommenu div.column {
    float:left;
    width:180px; /* column width */
    margin-right:25px;
}
.pt_custommenu div.column.last {
    border-right: 0 none;
    margin-right: 0;
    padding-right: 0;
}
.pt_custommenu div.itemSubMenu {}
.pt_custommenu .block2{
    margin-top: 10px;
    float: left;
}
.pt_custommenu div.popup .block1{
    overflow: hidden;
    float: left;
    padding:30px 20px;
 
}
.pt_custommenu div.popup .block1 .column{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
.pt_custommenu div.popup .blockright img{
    max-width: 100%;
}

.pt_custommenu div.pt_menu .parentMenu p{
    margin: 0;
    padding: 0;
}
.pt_custommenu #pt_menu_link{
    padding: 0;
}
.pt_custommenu #pt_menu_link .parentMenu ul li{
    float: left;
    list-style: none;
}
.pt_custommenu .clearBoth {
    clear:both;
}
/*===end-custommenu==============*/
/*.parentMenu a:before
{
content: " ";
display: block;
border-bottom: 8px solid #fff;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: none;
margin-top: -8px;
position: absolute;
bottom: 0px;
left: 0px;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
opacity: 0;
-moz-opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
pointer-events: none;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-o-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.pt_custommenu div.pt_menu .parentMenu:hover a:before
{
z-index: 1000;
opacity: 1;
-moz-opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
pointer-events: all;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.pt_custommenu #pt_menu_home .parentMenu:hover a:before,
.pt_custommenu .pt_menu_no_child .parentMenu:hover a:before
{display: none}*/


cloned 17.01.2017 14:30

CSS ohne dazugehöriges HTML ist nutzlos.

cytochrom 17.01.2017 14:44

au sorry, wie finde ich den zugehörigen HTML-Code? (sorry, bin wirklich Neuling :shock:)

EDIT:

vielleicht das hier?

Code:

<div class="container">
<div class="container-inner">
<div id="pt_custommenu" class="pt_custommenu">
<div id="pt_menu_home" class="pt_menu">
<div class="parentMenu">
<a href="http://localhost/mozar3/index.php/">
<span>Home</span>
</a>
</div>
</div>                                       
<div id="pt_menu3" class="pt_menu act nav-1">
<div class="parentMenu">
<a href="http://localhost/mozar3/index.php/womens.html">
<span>Womens</span>
</a>
</div>
<div id="popup3" class="popup" style="width: 425px; top: 60px; left: 85.9px; display: none;">
<div class="block1" id="block13" style="width: 425px;">
<div class="column col1"><div class="itemMenu level1">
<a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index.php/womens/catsuits.html">
<span>Catsuits</span>
</a>
<a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index.php/womens/skirts.html"><span>Skirts</span></a><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index.php/womens/dresses-4.html"><span>Dresses</span></a><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index.php/womens/costumes.html"><span>Costumes</span></a><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index.php/womens/lingerie.html"><span>Lingerie</span></a><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index.php/womens/corsettes.html"><span>Corsettes</span></a></div></div>
<div class="column blockright last">
<div class="custum-menu">&nbsp;<img alt="" src="http://localhost/mozar3/media/wysiwyg/catsuit.jpg" width="158" height="238"></div>
</div>
<div class="clearBoth"></div>
</div>
</div>
</div>                                                                       
<div id="pt_menu4" class="pt_menu nav-2 pt_menu_no_child">
<div class="parentMenu">
<a href="http://localhost/mozar3/index.php/mens.html">
<span>Mens</span>
</a>
</div>
</div>                                                                       
<div id="pt_menu48" class="pt_menu nav-3 pt_menu_no_child">
<div class="parentMenu">
<a href="http://localhost/mozar3/index.php/catsuits.html">
<span>Cosplay</span>
</a>
</div>
</div>                                                                       
<div id="pt_menu7" class="pt_menu nav-4">
<div class="parentMenu">
<a href="http://localhost/mozar3/index.php/accessories.html">
<span>Accessories</span>
</a>
</div>
<div id="popup7" class="popup" style="width: 220px; top: 60px; left: 383.417px; display: none;">
<div class="block1" id="block17" style="width: 220px;">
<div class="column last col1"><div class="itemMenu level1">
<a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index.php/accessories/gloves-and-stockings.html"><span>Gloves&nbsp;ans&nbsp;Stockings</span></a></div></div>
<div class="clearBoth"></div>
</div>
</div>
</div>                                                                       
<div id="pt_menu50" class="pt_menu nav-5 pt_menu_no_child">
<div class="parentMenu">
<a href="http://localhost/mozar3/index.php/sale.html">
<span>Sale</span>
</a>
</div>
</div>                                                               
                                                               
                                <div class="clearBoth"></div>
                        </div>
                </div>
        </div>


cloned 17.01.2017 14:49

Wenn ich jetzt diesen HTML + CSS-Code kombiniere sehe ich aber kein Dropdown-Menü?
Du solltest sicherstellen dass wir dein Problem auch nachvollziehen können, am Besten mit einem Link zur Seite oder, falls dieses (noch) nicht möglich ist dann muss es uns möglich sein mittels copy-paste das Verhalten auf zB jsfiddle.net reproduzieren zu können. Sonst können wir leider nur raten und dir nur schwer helfen :(

cytochrom 17.01.2017 17:05

also ein programm hat mir jetzt folgende codes verraten:

1. die menüleiste:

Code:

<div id="pt_custommenu" class="pt_custommenu">
                                <div id="pt_menu_home" class="pt_menu act">
<div class="parentMenu">
<a href="http://localhost/mozar3/index_16tvdjxia1.php/">
<span>Home</span>
</a>
</div>
</div>                                        <div id="pt_menu3" class="pt_menu nav-1">
<div class="parentMenu">
<a href="http://localhost/mozar3/index_16tvdjxia1.php/womens.html">
<span>Womens</span>
</a>
</div>
<div id="popup3" class="popup" style="display: none; width: 1228px;">
<div class="block1" id="block13">
<div class="column col1"><div class="itemMenu level1"><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index_16tvdjxia1.php/womens/catsuits.html"><span>Catsuits</span></a><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index_16tvdjxia1.php/womens/skirts.html"><span>Skirts</span></a><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index_16tvdjxia1.php/womens/dresses-4.html"><span>Dresses</span></a><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index_16tvdjxia1.php/womens/costumes.html"><span>Costumes</span></a><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index_16tvdjxia1.php/womens/lingerie.html"><span>Lingerie</span></a><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index_16tvdjxia1.php/womens/corsettes.html"><span>Corsettes</span></a></div></div>
<div class="column blockright last">
<div class="custum-menu">&nbsp;<img alt="" src="ma_mozar1%20Home%20page-Dateien/catsuit.jpg" width="158" height="238"></div>
</div>
<div class="clearBoth"></div>
</div>
</div>
</div>                                                                        <div id="pt_menu4" class="pt_menu nav-2 pt_menu_no_child">
<div class="parentMenu">
<a href="http://localhost/mozar3/index_16tvdjxia1.php/mens.html">
<span>Mens</span>
</a>
</div>
</div>                                                                        <div id="pt_menu48" class="pt_menu nav-3 pt_menu_no_child">
<div class="parentMenu">
<a href="http://localhost/mozar3/index_16tvdjxia1.php/catsuits.html">
<span>Cosplay</span>
</a>
</div>
</div>                                                                        <div id="pt_menu7" class="pt_menu nav-4">
<div class="parentMenu">
<a href="http://localhost/mozar3/index_16tvdjxia1.php/accessories.html">
<span>Accessories</span>
</a>
</div>
<div id="popup7" class="popup" style="width: 220px; top: 60px; left: 383.417px; display: none;">
<div class="block1" id="block17" style="width: 220px;">
<div class="column last col1"><div class="itemMenu level1"><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index_16tvdjxia1.php/accessories/gloves-and-stockings.html"><span>Gloves&nbsp;ans&nbsp;Stockings</span></a></div></div>
<div class="clearBoth"></div>
</div>
</div>
</div>                                                                        <div id="pt_menu50" class="pt_menu nav-5 pt_menu_no_child">
<div class="parentMenu">
<a href="http://localhost/mozar3/index_16tvdjxia1.php/sale.html">
<span>Sale</span>
</a>
</div>
</div>                                                               
                                                               
                                <div class="clearBoth"></div>
                        </div>

und 2. das dropdown eines beispielbuttons:

Code:

<div id="pt_menu7" class="pt_menu nav-4">
<div class="parentMenu">
<a href="http://localhost/mozar3/index_16tvdjxia1.php/accessories.html">
<span>Accessories</span>
</a>
</div>
<div id="popup7" class="popup" style="width: 220px; top: 60px; left: 383.417px; display: none;">
<div class="block1" id="block17" style="width: 220px;">
<div class="column last col1"><div class="itemMenu level1"><a class="itemMenuName level1 nochild" href="http://localhost/mozar3/index_16tvdjxia1.php/accessories/gloves-and-stockings.html"><span>Gloves&nbsp;ans&nbsp;Stockings</span></a></div></div>
<div class="clearBoth"></div>
</div>
</div>
</div>                                                                        <div id="pt_menu50" class="pt_menu nav-5 pt_menu_no_child">
<div class="parentMenu">
<a href="http://localhost/mozar3/index_16tvdjxia1.php/sale.html">


echt sorry für das durcheinander... magento lässt sich irgendwie schwer in editoren einfügen :(

cloned 18.01.2017 08:49

Nochmal anders formuliert: Wir brauchen eine Möglichkeit, dein Problem nachvollziehen zu können. Wenn wir deinen HTML+CSS Code bei zB jsfiddle.net (oder wo auch immer) einfügen, dann muss das Problem ersichtlich sein. Das ist für mich aber nach wie vor nicht der Fall. Auch wäre es fein, nur den für das Problem relevanten Code zu sehen, bei einem Link zu einer Seite ist das natürlich nicht möglich, da suchen wir uns selber raus was wir brauchen.

Bevor du also noch weiteren Code hier postest vergewissere dich bitte, dass wir dein Problem sehen können indem du testweise den Code auf jsfiddle.net einfügst.

cytochrom 20.01.2017 17:35

hallo zusammen,
bitte entschuldigt das kleine durcheinander...ich habe jetzt die seite mal kurz online gestellt. es ist alles noch im aufbau und hat nur beispielbilder drin (geht um designer bekleidung aus latex), also nicht wundern...

vielleicht könnt ihr ja jetzt erkennen, woran das mit dem verschobenen dropdown liegen könnte und mir einen tip geben wie ich es korrigieren kann. ich würde mich sehr darüber freuen...

--> hier ist die adresse: lalala <--

cloned 23.01.2017 10:24

Das Untermenü wird hier absolut platziert, das verursacht das Problem. Wieso das so platziert wird kann ich leider nicht sagen, das kommt wohl vom Menü selber, bzw. von einem Javascript. Die Lösung dafür: Die Dokumentation für das Menü zu Rate ziehen und schauen, wieso dort so eine absolute Positionierung (mit top, left-Werten) verwendet wird oder ein anderes Menü verwenden, welches die Positionierung verlässlich zustande bringt.

Ansonsten könntest du noch versuchen per CSS den left-Wert für die Untermenüs per !important zu löschen, aber ob das dann mehr Auswirkungen hat als es behebt kann ich nicht sagen.

dazzle89 23.01.2017 12:08

Einfach den Menüpunkten position: relative geben und gut ist?

Also bei .pt_custommenu div.pt_menu

Je nachdem, wo genau du das Dropdown haben willst, kannst du denn noch den left-Wert mit !important anpassen.

cloned 23.01.2017 12:23

Ja, wenns so einfach geht... :D
Dann nimm die einfache Lösung ;)


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:35 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020