Allineamento oggetti con z-index

[Sileno]

Salve a tutti!

Vengo subito al punto: nella creazione di un sito ho riscontrato alcuni problemi con l'allineamento di oggetti attraverso la proprietà z-index.

Mi spiego meglio: ho creato un menu laterale e, passando sopra ad alcune voci, compare un sottomenu a tendina con altre opzioni. Fin qui tutto bene, se non fosse che proprio accanto a questo menu si trova un div, che funge da sezione avvisi (il div in realtà è costituito da altri div annidati al suo interno, un div fa da header alla sezione avvisi, un altro è il "corpo" della sezione e l'ultimo div è quello che racchiude i due div precedenti, per un totale di tre div). Per fare in modo che il sottomenu venga visualizzato correttamente, ho settato un valore minore di z-index per la sezione avvisi e uno z-index maggiore per il sottomenu. Il problema è proprio questo: quando passo con il mouse sui link presenti all'interno della sezione avvisi, essi non vengono riconosciuti, proprio perché sono effettivamente in secondo piano rispetto al resto della pagina. Per questo a me servirebbe che il sottomenu avesse uno z-index maggiore solo quando ci si passa sopra con il mouse, quindi ho pensato che il modo migliore per ovviare al problema fosse quello di modificare "dinamicamente" il valore dello z-index al passaggio del mouse (ho provato sia a modificare lo z-index della sezione avvisi, sia quello del sottomenu, senza successo).

Il codice HTML del menu laterale e della sezione avvisi è il seguente:

 <!-- menu laterale -->
 <ul class="extra_menu">
     <li>Presentazione
         <ul class="submenu">
             <li class="first"><a href="#">Regolamento</a></li>
                <li class="middle"><a href="#">Tariffe</a></li>
                <li class="last"><a href="#">Verbali</a></li>
            </ul>
        </li>
        <li>Calendari attivit&agrave;
         <ul class="submenu">
             <li class="first"><a href="#">Calendario generale</a></li>
                <li class="last"><a href="#">Calendario Italiano L2</a></li>
            </ul>
        </li>
        <li>Materiali didattici
         <ul class="submenu">
             <li class="first"><a href="#">Italiano</a></li>
                <li class="middle"><a href="#">Inglese</a></li>
                <li class="middle"><a href="#">Tedesco</a></li>
                <li class="middle"><a href="#">Spagnolo</a></li>
                <li class="last"><a href="#">Tedesco</a></li>
            </ul>
        </li>
        <li>E-Learning</li>
        <li>Avvisi</li>
        <li>Orari
         <ul class="submenu">
             <li class="first"><a href="#">Esercitazioni</a></li>
                <li class="middle"><a href="#">Ricevimento e Tutorato</a></li>
                <li class="last"><a href="#">Avvisi e comunicazioni</a></li>
            </ul>
        </li>
 </ul><div id="news">

 <h1 id="news_header">
 AVVISI E COMUNICAZIONI
 </h1>
     <div id="news_list">
        <!-- inizio sezione avvisi -->
        
        <a href="#" class="news_link">Orario esercitazioni 2016/2017</a><br>
        <a href="#" class="news_link">Modifica reg. prove cert. 2016/2017</a><br>
        <a href="#" class="news_link">Corso intensivo di lingua russa</a><br>
        <a href="#" class="news_link">Corso principianti lingua tedesca</a><br>
        <a href="#" class="news_link">Corso intensivo di lingua italiana</a><br>
        
        <!-- fine sezione avvisi -->
        </div>
</div>

Il codice CSS completo (anche di elementi che non ho incluso nel codice sopra):

@charset "utf-8";
/* CSS Document */


body {
 font-family: "HelveticaNeueLT Std Lt", Arial, sans-serif;
}


.main_header {
 font-family: "Helvetica Neue LT", Arial, sans-serif;
 font-size: 18px;
 font-style: normal;
 line-height: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 color: #FFFFFF;
 text-decoration: none;
 background-image: url(../images/Header%20Background.png);
 background-repeat: no-repeat;
 height: 200px;
 margin-left: -10px;
 margin-top: -10px;
 margin-right: -10px;
}


#headerLogo {
 height: 100px;
 width: 325px;
 margin-top: 30px;
 margin-left: 400px;
}


ul.menu {
 margin-top: 26.5px;
 margin-left: 365px
}


.menu li {
 display: block;
 float: left;
 width: 110px;
 height: 40px;
 line-height: 40px;
 background: #83004F;
 text-align: center;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 margin-right: 3px;
}


.menu li:hover {
 background: #FFFFFF;
 color: #000000;
 cursor: pointer;
}


.menu li:hover > a {
 color: #000000;
}


a {
 color: #FFFFFF;
 text-decoration: none;
}


.extra_menu {
 font-family: "Helvetica Neue LT", Arial, sans-serif;
 font-size: 20px;
 text-align: left;
 color: #FFFFFF;
 list-style: none;
}


.extra_menu li {
 border-radius: 10px;
 padding: 10px;
 margin-bottom: 8px;
 width: 180px;
 height: 25px;
 line-height: 25px;
 background: #83004F;
 -o-transition: width 0.5s;
 -moz-transition: width 0.5s;
 -webkit-transition: width 0.5s;
 transition: width 0.5s;
}


.extra_menu li:hover {
 background: #98236A;
 cursor: pointer;
 width: 220px;
}


.extra_menu li:hover > .submenu {
 visibility: visible;
 opacity: 1;
}


.submenu {
 list-style: none;
 visibility: hidden;
 opacity: 0;
 transition: opacity 0.5s;
 margin-left: 175px;
 margin-top: -35px;
}


.submenu li {
 margin-bottom: 0;
 background: #98236A;
 padding-left: 20px;
}


.submenu li:hover {
 width: 180px;
 background: #83004F;
}


li.first {
 border-top-right-radius: 10px;
 border-bottom-right-radius: 0px;
 border-bottom-left-radius: 0px;
 border-top-left-radius: 0px; 
}


li.last {
 border-top-right-radius: 0px;
 border-top-left-radius: 0px;
 border-bottom-right-radius: 10px; 
 border-bottom-left-radius: 10px;
}


li.middle {
 border-radius: 0px;
}


#news {
 position: relative;
 left: 280px;
 top: -330px;
 border-radius: 10px;
 width: 340px;
 height: 310px;
 font-family: "Helvetica Neue", Arial, sans-serif;
 font-size: 15px;
 z-index: -1;
 background: #E4E4E4;
}


#news_header {
 font-family: "Helvetica Neue LT", Arial, sans-serif;
 color: #000000;
 background: #B3B3B3;
 border-radius: 10px;
 font-size: 20px;
 text-align: left;
 padding-top: 10px;
 padding-left: 12px;
 padding-bottom: 10px;
}


#news_list {
 font-size: 18px;
 margin-left: 12px;
 margin-right: 12px;
}


.news_link {
 color: #000000;
 line-height: 1.7;
}

Spero davvero che qualcuno riesca a darmi una mano, sto impazzendo!

[ResianTaxidrive]

Secondo me è l'ul principale che copre la sezione avvisi. Mettigli una larghezza di 200px togliendo i vari z-index e tutto andrà.

[Sileno]

Secondo me è l'ul principale che copre la sezione avvisi. Mettigli una larghezza di 200px togliendo i vari z-index e tutto andrà.

Intanto ti ringrazio per la risposta (stavo cominciando a perdere le speranze ).
Con "ul principale" quale intendi di preciso? Quello di classe "extra-menu"?

[ResianTaxidrive]

si quello