Question

i am using tinymce to make rich text area input and i have a css styled dropdown menu (only css, no javascript). the problem is, the dropdown menu is conflicting with tinymce.
i am giving a snapshot of the problem

here is my css for my drop down 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 do i fix this problem?

Answer 1

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