Dropdown Navigation hilfe

  • CSS

    Dropdown Navigation hilfe

    Hey,

    bin eig. mit html/css/jquery ganz gut am weg, aber ich komm grad net weiter...
    es geht um folgendes markup:

    HTML-Quellcode

    1. <ul>
    2. <li><a href="#">TEXT</a>
    3. <ul>
    4. <li><a href="#">Sub-Text</a></li>
    5. <li><a href="#">Sub-Text</a></li>
    6. </ul>
    7. </li>
    8. <li><a href="#">TEXT</a></li>
    9. <li><a href="#">TEXT</a></li>
    10. </ul>


    hab dazu einen hover-effekt mit jquery gebastelt, aber ich will sobald ich das li item mit der maus verlasse die sub-navigation wieder verschewinden lassen, aber das li item wächst nicht mit...



    .nav {
    font-family: 'Julius Sans One', sans-serif;
    background: #0000ff;
    }

    .nav ul {

    position: relative;
    display: inline-table;
    list-style: none;
    float: right;
    margin-top: 25px;
    }

    .nav ul:after {
    content: "";
    clear: both;
    display: block;
    }

    .nav ul li {
    float: left;

    }

    .nav ul li a {
    display: block;
    text-decoration: none;
    margin-left: 20px;
    color: #fff;
    font-size: 18px;
    }

    .nav ul li ul {
    position: absolute;
    top: 0%;
    display:none;
    z-index: 999;
    background: #fff;
    border-top: 4px solid #ff00ff;
    padding: 10px;
    }

    .nav ul li ul:after {
    clear:both;
    }

    .nav ul li ul li {
    float: none;
    position: relative;
    }

    .nav ul li ul li a {
    color: #000;
    }
    Bilder
    • Unbenannt.PNG

      8,55 kB, 671×108, 84 mal angesehen