• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kleine Dropdown Hilfe

S

Staffik

Neues Mitglied
Hallo,

ich habe mir vor kurzen ein Template gekauft.
http://themeforest.net/item/theone-responsive-one-page-parallax-template/6505213?ref=SprintTheme

und wollte jetzt in der Navigation ein Dropdown einbauen.
Doch da ich das Template nicht selbst geschrieben habe, komme ich mit den ganzen Verschachtelungen nicht zurecht.

Mein Ziel ist es so eine Navigation hinzubekommen:
http://mosaic-cube.bplaced.net/ziel/

Code: 
<body>
<div id="wrapper">

<nav id="nav">
    <ul id="navigation">
       
        <li><a href="#">Services &raquo;</a>
            <ul>
                <li><a href="#">Identity & Branding &raquo;</a>
                    <ul>
                        <li><a href="#">Business Cards</a></li>
                        <li><a href="#">Brochures</a></li>
                        <li><a href="#">Envelopes</a></li>
                        <li><a href="#">Flyers</a></li>
                    </ul>                   
               
    </ul>
</nav>

</div><!--end wrapper-->
   
</body>
</html>

Code: 
ul#navigation li:hover > ul
{
   visibility:visible;
   opacity:1;
}

ul#navigation ul, ul#navigation ul li ul {
   list-style: none;
  margin: 0;
  padding: 0;   
   visibility:hidden;
  position: absolute;
  z-index: 99999;
   width:180px;
   opacity:0;
   -webkit-transition:opacity 0.2s linear, visibility 0.2s linear;
   -moz-transition:opacity 0.2s linear, visibility 0.2s linear;
   -o-transition:opacity 0.2s linear, visibility 0.2s linear;
   transition:opacity 0.2s linear, visibility 0.2s linear;    
}

ul#navigation ul li ul {
  top: 0;
  left: 181px;
}




Mein Stand zurzeit:
http://mosaic-cube.bplaced.net/dropdowntest/

Code: 
   <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li> <a href="index.html" class="homelink">Startseite</a> </li>
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown" id="navbarDrop1">Dropdown</a>
              <ul class="dropdown-menu" aria-labelledby="navbarDrop1">
                <li><a href="#">Test0</a></li>
                <li><a href="#">Test1</a></li>
                 <ul>
                 <li><a href="#">Test1.2</a></li>
                 <li><a href="#">Test1.2</a></li>
                 </ul>
              </ul>
            </li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">über Uns</a></li>
            <li><a href="#">Kontakt</a></li>
          </ul>
        </div>


Code: 
/* CSS Document */
???

Wie schaffe ich es, die beiden "Test1.2, Test1.2" verschwinden zu lassen, wenn der Cursor nicht drauf zeigt?

Ich bitte um Hilfe =(
Anbei nochmal meine ganze Dropdown Testseite


Liebe Grüße
Staffik
 

Anhänge

Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben