Navbar dropdown nebeneinander nicht untereinander

  • Hallo,


    Ich hab mit cssmenumaker.com ein Navigationsmenü erstellt und dann versucht die unterpunkte nebeneinander dastellen zu lassen.
    Leider habe ich das nicht geschafft. Mir fehlen zudem css kenntnisse und wollte mal fragen ob ihr mir dabei helfen könnt.


    CSS-Code:
    #cssmenu ul,
    #cssmenu li,
    #cssmenu span,
    #cssmenu a {
    margin: 0;
    padding: 0;
    position: relative;
    }
    #cssmenu {
    height: 49px;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    background: #141414;
    background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
    background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
    background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
    background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
    background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
    border-bottom: 2px solid #e00f16;
    }
    #cssmenu:after,
    #cssmenu ul:after {
    content: '';
    display: block;
    clear: both;
    }
    #cssmenu a {
    background: #141414;
    background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
    background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
    background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
    background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
    background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
    color: #ffffff;
    display: inline-block;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size: 11px;
    line-height: 49px;
    padding: 0 20px;
    text-decoration: none;
    }
    #cssmenu ul {
    list-style: none;
    }
    #cssmenu > ul {
    float: left;
    }
    #cssmenu > ul > li {
    float: left;
    }
    #cssmenu > ul > li:hover:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #e00f16;
    margin-left: -10px;
    }
    #cssmenu > ul > li:first-child > a {
    border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    }
    #cssmenu > ul > li:last-child > a {
    border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    }
    #cssmenu > ul > li.active > a {
    box-shadow: inset 0 0 3px #000000;
    -moz-box-shadow: inset 0 0 3px #000000;
    -webkit-box-shadow: inset 0 0 3px #000000;
    background: #070707;
    background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
    background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
    background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
    background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
    background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
    }
    #cssmenu > ul > li:hover > a {
    background: #070707;
    background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
    background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
    background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
    background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
    background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
    box-shadow: inset 0 0 3px #000000;
    -moz-box-shadow: inset 0 0 3px #000000;
    -webkit-box-shadow: inset 0 0 3px #000000;
    }
    #cssmenu .has-sub {
    z-index: 1;
    }
    #cssmenu .has-sub:hover > ul {
    display: block;
    }
    #cssmenu .has-sub ul {
    display: none;
    position: absolute;
    width: 100px;
    top: 100%;
    left: 0;
    }
    #cssmenu .has-sub ul li {
    *margin-bottom: -1px;
    }
    #cssmenu .has-sub ul li a {
    background: #e00f16;
    border-bottom: 1px dotted #ec6f73;
    filter: none;
    font-size: 11px;
    display: block;
    line-height: 120%;
    padding: 10px;
    }
    #cssmenu .has-sub ul li:hover a {
    background: #b00c11;
    }
    #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: #b00c11;
    border-bottom: 1px dotted #d06d70;
    }
    #cssmenu .has-sub .has-sub ul li a:hover {
    background: #80090d;
    }




    Habe gelesen dass es mit block und inline zu tun haben könnte aber Änderungen haben nur Verschlechterung gebracht.
    Hoffe auf eure Hilfe


    Der Unbekannte

  • Hi,


    also was der erste Link anzeigt ist lustigerweise total falsch. Ich geb zu ich hab nicht jeden einzelnen Fehler gesucht. der erste war vorhanden aber das wars dann auch schon. alle < oder > sind definitiv vorhanden in meiner Datei. Verstehe das einfach nicht.


    Was den zweiten angeht, den habe ich aus dem im ersten post genannten generator direkt übernommen, ohne jegliche änderungen.


    Naja, vllt. doch besser wenn ich die Seite jemand machen lasse der das evtl. beruflich macht.



    Dennoch danke.