jQuery "überdeckt" Menü

[VVT]

Hallo

Habe ein Problem, da ich mich halt noch nicht so gut mit CSS/HTML gut auskenne. Und zwar: Nachdem ich ein jQuery-Slider in meine Website eingebaut habe, verdeckt sie mir die Menüleiste, die CSS basiert ist. Ich hoffe, jemand kennt sich damit gut aus. Der Code wurde angehängt. Leider muss ich das Bild extern hochladen, da der Forum-Uploader im Google Chrome nicht funktioniert.

    #nav {    margin: 0;
    padding: 7px 6px 0;
    background: #7D7D7D repeat-x 0 -110px;
    line-height: 100%;
    width: 100%;
    font-family: 'CommunistRegular';


    border-radius: 2em;


    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;


    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    }


    #nav li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none;
    opacity: 0.9;
    }


    #nav li.uhr {
    float: right;
    }


    /* main level link */
    #nav a {
    font-weight: bold;
    color: #E7E5E5;
    text-decoration: none;
    display: block;
    padding: 8px 30px;
    margin: 0;
    }


    #nav a.default {
    cursor: default;
    }


    #nav p.uhr {
    font-weight: bold;
    cursor: default;
    color: #E7E5E5;
    text-decoration: none;
    display: block;
    padding: 8px 30px;
    margin: 0;
    font-family: 'OpenSansLight';
    }


    /* main level link hover */
    #nav .current a, #nav li:hover > a {
    color: #CDC9A5;
    }


    /* sub levels link hover */
    #nav ul li:hover a, #nav li:hover li a {
    background: none;
    border: none;
    color: #666;


    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    }
    
    #nav ul a:hover {
    background: #B3EE3A repeat-x 0 -100px !important;
    color: #CDC9A5 !important;


    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    }


    /* dropdown */
    #nav li:hover > ul {
    display: block;
    }


    /* level 2 list */
    #nav ul {
    display: none;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    left: 0;
    background: #ddd repeat-x 0 0;
    border: solid 1px #b4b4b4;
    visibility: visible;
    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;


    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    box-shadow: 0 1px 3px rgba(0,0,0, .3);
    }
    #nav ul li {
    float: none;
    margin: 0;
    padding: 0;
    }


    #nav ul a {
    font-weight: normal;
    text-shadow: 0 1px 0 #fff;
    }


    /* level 3+ list */
    #nav ul ul {
    left: 181px;
    top: -3px;
    }


    /* rounded corners of first and last link */
    #nav ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;


    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;
    }
    
    #nav ul li:last-child > a {
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;


    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
    }


    /* clearfix */
    #nav:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    }
    
    #nav {
    display: inline-block;
    }


    html[xmlns] #nav {
    display: block;
    }


    * html #nav {
    height: 1%;
    }

 

[VVT]

So, habe per Zufall die Lösung gefunden: z-index
Ich habe es einfach beim Parameter #nav li.uhr hinzugefügt und es funktioniert! Einfach auf z-index: 1; stellen und es läuft.

 

[pax]

Das erstaunt mich ein bisschen. z-index ist die richtige Lösung, aber den nur der Uhr zu geben.... ?! Das funktioniert vermutlich nur aufgrund irgendwelcher internen Renderbesonderheiten deines Browsers (man korrigiere mich bitte falls ich irre).

Sauberer ist es jedenfalls, den z-index der ganzen #nav zu geben, denn die soll ja vor dem slider liegen, nicht nur die Uhr.