Css property conflicting with tinymce

Question

I use tinymce to create a rich text box and I have a css style dropdown menu (css only, no javascript). the problem is that the dropdown menu contradicts tinima. I give a snapshot of the problem

here is my css for my dropdown menu

#menu, #menu ul{ margin:0 90px; padding:0 10px; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; } #menu a{ display:block; padding: 5px 15px 5px 15px; border-top: 1px solid #ffffff; color:#fff; text-decoration:none; background: #1D2D4F; margin-left: 1px; white-space: nowrap; } #menu a:hover{ background-color:#475A7F; } #menu li{ float:left; position:relative; width: 150px; } #menu ul { position:absolute; display:none; width:11.3em; margin: 0 -10px; } #menu li ul a{ width:11.3em; height:auto; float:left; } #menu ul ul{ top:auto; } #menu li ul ul { left:12em; margin:0px 0 0 10px; } #menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{ display:none; } #menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{ display:block; } .clear{ clear:both; !important height:0; font-size: 1px; line-height: 0px; } 

How can I fix this problem?

Answer 1

You tried to add z-index:100; to the drop down menu?
The number 100 is just for the test, you can change it to another number later.