Pues en el estilo coloca lo siguiente:
#menu{
z-index: 30;
position: fixed;
}
z-index es para indicar que capa es. Entre mas alto el numero, mas alto el numero, mas por sobre otros estara.
position: fixed, es para indicarle que quieres que donde quede, esta sea "fijo", pero se mueva contigo. Como lo es por ej el chat de facebook.
Luego puedes definir con
position-top: 0px;
position-left: 0px;
Tu defines el "0", a lo que necesitas que se posicione.
EXTRA:
Contestando a tu reciente pregunta en el comentario:
Pues si otorgas a #menu{} el max-width, le estas colocando a todo el menú dicho atributo. Aquí hay dos opciones, o creas una nueva clase y la llamas del css, o lo colocas en la misma tab. Para mi, entendiendo que es solo una propiedad colocaremos para esta única tab y es solo un atributo, seria bueno colocarlo dentro de la tab, como se hace eso? te muestro a continuación
<li style="max-width: 0px"><a href="allGraph.php">Extra Info</a>
<ul>
<li>Principal</li>
<li>Diario</li>
<li>Semanal</li>
</ul>
</li>
La propiedades la defines en Style, igual que un archivo css. Considerando que era un caso único, es por ello que lo definimos acá. Sin embargo si deseas ser mas organizado, entonces hacerlo como siempre es mejor.
<li class="extraInfo"><a href="allGraph.php">Extra Info</a>
<ul>
<li>Principal</li>
<li>Diario</li>
<li>Semanal</li>
</ul>
</li>
y luego del archivo css lo añades como al principio.
.extraInfo{
max-width: 0px;
}
Nota: Tu defines el ancho máximo que desees.
Nota2: Si defines un id, luego lo llamas del css con #id, si es una clase .clase, y si es un tag como puede ser un div, simplemente colocas div.
Recuerda después borrar el max-width del css .menu{}