HTML/CSS Menu mit 2 unter menüs

11/12/2013 18:02 ˏ˖→»[ற4ЯCø]«←˖ˏ™#1
Hallo,

ich benutze DLE 10.0 auf meiner Website.
Dort ist ein Standart Template bei, dass ich benutze: "Pisces".

In der oberen Navigation ist ein sehr tolles on hover eingebaut,
ich habe versucht es um ein weiteres hover zu bearbeiten,
leider ist das so, dass wenn ich über mein ersten Menüpunkt hover
sich alles auf klappt anstatt die dritten Menüpunkte display: none bleiben,
sie sollen erst bei hover vom zweiten Menüpunkt hervor treten also display block.

Momentan muss ich nochmal auf den zweiten Menüpunkt hovern
dass die dritten Menüpunkte verschwinden, und danach klappt alles so wie ich will, dass beim erneuten hovern die da sind.

Hier mal ein beispiel wie ich das haben möchte ohne das design usw.. (das ist von ein Navigations generator):

CSS:
PHP Code:
@charset 'UTF-8';
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  border: 0;
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #f2edea url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAA3NCSVQICAjb4U/gAAAAMklEQVQImWP49PYV0////6GYAcFm+I9d/P9/JgZkcRR12NVDzMMihlMtRJyBkHpMNwIA6ZmLp7k56KwAAAAASUVORK5CYII=) 100% 100%;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
  background: -moz-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2edea), color-stop(100%, #c0bebf));
  background: -webkit-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -o-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -ms-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
  font-weight: 600;
  height: 52px;
  width: auto;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  box-shadow: inset 0 1px 0 whitesmoke;
  -moz-box-shadow: inset 0 1px 0 whitesmoke;
  -webkit-box-shadow: inset 0 1px 0 whitesmoke;
  background: #f2edea url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAA3NCSVQICAjb4U/gAAAAMklEQVQImWP49PYV0////6GYAcFm+I9d/P9/JgZkcRR12NVDzMMihlMtRJyBkHpMNwIA6ZmLp7k56KwAAAAASUVORK5CYII=) 100% 100%;
  background: -moz-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2edea), color-stop(100%, #c0bebf));
  background: -webkit-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -o-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -ms-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
  color: #666666;
  display: inline-block;
  font-family: Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 52px;
  padding: 0 28px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
  box-shadow: inset 0 1px 0 whitesmoke;
  -moz-box-shadow: inset 0 1px 0 whitesmoke;
  -webkit-box-shadow: inset 0 1px 0 whitesmoke;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:first-child a {
  border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
}
#cssmenu > ul > li.active a,
#cssmenu > ul > li:hover > a {
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
  color: white;
  background: #4a5662 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNDNkM2QzM1NDk0QjExRTI5NjFDQzlFM0NGQzY5RDNBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNDNkM2QzM2NDk0QjExRTI5NjFDQzlFM0NGQzY5RDNBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0M2QzZDMzM0OTRCMTFFMjk2MUNDOUUzQ0ZDNjlEM0EiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0M2QzZDMzQ0OTRCMTFFMjk2MUNDOUUzQ0ZDNjlEM0EiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6bEPV5AAAAUUlEQVR42mSO0RWAMAgDc4znAA7g/jvUFKj66gevCT0COs4rJLkIoSC1X+j+7GFfupj+a4bFu+isydcMr88dY/PkLL8bPnrLXTvHk2NdzC3AAIj5BKfn0x2aAAAAAElFTkSuQmCC);
  background: -moz-linear-gradient(top, #4a5662 0%, #606f7f 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4a5662), color-stop(100%, #606f7f));
  background: -webkit-linear-gradient(top, #4a5662 0%, #606f7f 100%);
  background: -o-linear-gradient(top, #4a5662 0%, #606f7f 100%);
  background: -ms-linear-gradient(top, #4a5662 0%, #606f7f 100%);
  background: linear-gradient(to bottom, #4a5662 0%, #606f7f 100%);
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li a {
  background: #606f7f;
  border-bottom: 1px solid #59636f;
  border-bottom: 1px solid #556371;
  box-shadow: inset 0 1px 0 #606f7f;
  -moz-box-shadow: inset 0 1px 0 #606f7f;
  -webkit-box-shadow: inset 0 1px 0 #606f7f;
  color: white;
  display: block;
  line-height: 160%;
  padding: 15px 10px;
  font-size: 12px;
}
#cssmenu .has-sub ul li:hover a {
  background: #4a5662;
  box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #606f7f;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #4a5662;
  box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
} 
HTML:
HTML Code:
<div id='cssmenu'>
<ul>
   <li><a href='/index.html'><span>Startseite</span></a></li>
   <li class='has-sub'><a href='#'><span>Expand me :)</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>More Submenus 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item 1.1</span></a></li>
               <li class='last'><a href='#'><span>Sub Item 1.2</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>More Submenus 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item 2.1</span></a></li>
               <li class='last'><a href='#'><span>Sub Item 2.2</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Normal</span></a></li>
</ul>
</div>
-------------------------------------------
Naja und meins sieht halt so aus da soll auch wirklich die farben usw so bleiben wie sie sind da es sonst nicht zu meine Website passt.
CSS:
PHP Code:
#toolbar {
    position: relative;
    z-index: 111;
    height: 66px;
    padding: 0 15px 0 5px;
}

#topmenu {
    line-height: 27px;
    margin-top: 19px;
    text-shadow: 0 1px 0 #73a519;
}

#topmenu li, #topmenu a, #topmenu a b {
    height: 28px;
    float: left;
}

#topmenu a {
    text-decoration: none;
    margin-right: 1px;
    color: #fff;
    background: url("../images/topmenu.png") no-repeat 0 -999px;
}

#topmenu a b {
    cursor: pointer;
    padding: 0 10px;
    background: url("../images/topmenu.png") no-repeat 0 -999px;
}

#topmenu a:hover {
    text-shadow: 0 1px 0 #55820d;
    background-color: #649711;
    background-position: 0 0;
}

#topmenu a:hover b {
    background-position: 100% -28px;
}

#topmenu .sublnk a {
    background-position: 0 -112px;
}

#topmenu .sublnk a b {
    padding-right: 25px;
    background-position: 100% -140px;
}

#topmenu .sublnk a:hover, #topmenu .sublnk.selected a {
    padding-bottom: 2px;
    background-color: #649711;
    background-position: 0 -56px;
}

#topmenu .sublnk a:hover b, #topmenu .sublnk.selected a b {
    padding-right: 25px;
    background-position: 100% -84px;
}

/*---SubMenu---*/
#topmenu .sublnk {
    position: relative;
}

#topmenu li.sublnk ul {
    background-color: #649711;
    width: 220px;
    margin: 0;
    top: 30px;
    left: 0;
    position: absolute;
    z-index: 1999;
    display: none;
    opacity:0.9;
    -moz-opacity:0.9;
    filter:alpha(opacity=90);
}


#topmenu li.sublnk ul li a, #topmenu li.sublnk ul li, #topmenu li.sublnk ul li a b {
    background: none;
    float: none;
    height: auto;
    display: block;
    line-height: normal;
    text-transform: none;
}

#topmenu li.sublnk ul li {
    padding: 0;
}

#topmenu li.sublnk ul li a {
    text-shadow: none;
    color: #fff;
    padding: 6px 0 !important;
    width: 100%;
    border-bottom: 1px solid #71aa15;
}

#topmenu li.sublnk ul li a:hover {
    background-color: #6fa614;
}

.reset, .reset li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lcol {
    float: left;
}

.lcol, .rcol, form {
    display: inline;
} 
JS:
PHP Code:
$(document).ready(function(){
        $('#topmenu li.sublnk').hover(
        function() {
            $(this).addClass("selected");
            $(this).find('ul').stop(true, true);
            $(this).find('ul').show('fast');
        },
        function() {
            $(this).find('ul').hide('fast');
            $(this).removeClass("selected");
        }
    );
}); 
HTML:
HTML Code:
<ul id="topmenu" class="lcol reset">
    <li><a href="/index.php"><b>Startseite</b></a></li>
    <li class="sublnk"><a href="#"><b>Expand me :)</b></a>
        <ul>
            <li class="sublnk"><a href="#"><b>Expand 1</b></a>
                <ul>
                    <li><a href="#"><b>Sub 1.1</b></a></li>
                    <li><a href="#"><b>Sub 1.2</b></a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
Wie gesagt, sobald ich über "Expand me :)" hover ist sofort alles sichtbar, auch "Sub 1.1" was ich nicht möchte..

Danke dass Du mir deine Zeit geschenkt hast,
ich hoffe dass Du mir helfen kannst.

MfG
11/12/2013 20:35 Mikesch01#2
Hast du eine Live-Site da? Mit Firebug kann man das Verhalten besser beobachten.
11/12/2013 21:55 ˏ˖→»[ற4ЯCø]«←˖ˏ™#3
Ja aber das zählt doch als werbung wenn ich den link post.
Die Seite hat noch kein/kaum Inhalt also eigentlich noch privat.
Ich schick die dir mal per PM, du wirst sofort sehen was ich mein wenn du über "expand me :)" hoverst, alle sub-sub items sind ausgeklappt...

Wer mir noch helfen möchte, nur zu :)
11/12/2013 22:40 Der-Eddy#4
Quote:
Originally Posted by ˏ˖→»[ற4ЯCø]«←˖ˏ™ View Post
Ja aber das zählt doch als werbung wenn ich den link post.
Die Seite hat noch kein/kaum Inhalt also eigentlich noch privat.
Ich schick die dir mal per PM, du wirst sofort sehen was ich mein wenn du über "expand me :)" hoverst, alle sub-sub items sind ausgeklappt...

Wer mir noch helfen möchte, nur zu :)
Die Regel greift erst wenn du ganz geziehlt Werbung darauf machst
wenn es als Referenz zu deinem Problem ist sehe "ich" da kein Problem

mal davon abgesehen das ein winzig kleines "Elitepvpers.com" irgendwo in ner Ecke bereits als Backlink ausreicht wenn du wirklich geziehlt Werbung damit in deiner Signatur oder so machen würdest
11/12/2013 22:47 ˏ˖→»[ற4ЯCø]«←˖ˏ™#5
Alles klar,
danke aber ich möchte jetzt gerade auch nicht das ganz ePvP die URL hat :/
Dafür habe ich ja die css/html/js bei gelegt.
11/12/2013 23:35 Mikesch01#6
Ich schaus mir morgen dann mal an :)
11/13/2013 15:58 ˏ˖→»[ற4ЯCø]«←˖ˏ™#7
Okay.

Noch jemand?
11/15/2013 18:03 ˏ˖→»[ற4ЯCø]«←˖ˏ™#8
Vielen dank an [Only registered and activated users can see links. Click Here To Register...], für seine Tipps.

#Closerequest