Problema com componente SelectOneMenu

Front-end
#1

Olá pessoal, faz um bom tempo que tento resolver esse problema no visual do meu componente mas nao consigo resolver, alguem tem ideia do q esta causando isso? O meu SelectOneMenu fica com essa faixa cinza na frente…(obs: acontece o msmo com o SelectOneMenu do campo Período, mas quando eu clico no primeiro Select e escolho outro registro do meu campo, o Select do Período volta ao normal, como está na imagem)

Meu código é esse…

[code]

<h:head>
Central de Estagio Aluno

.ui-widget,.ui-widget .ui-widget {
font-size: 12px !important;
}

.ui-layout-north {
z-index: 20 !important;
overflow: visible !important;
}

.ui-layout-north .ui-layout-unit-content {
overflow: visible !important;
}

.semBorda tr,.semBorda td {
border: none !important;
}

</h:head>
<h:body>
<h:form>


<p:selectOneMenu id=“curso” value="#{MBCurso.beanCurso.codCurso}“
effect=“drop” filter=“true” required=“true"
requiredMessage=“Selecione um curso!”>
<f:selectItem itemLabel=”-Selecione um curso” itemValue="" />
<f:selectItems value="#{MBCurso.listaMenu}" var=“curso"
itemLabel=”#{curso.nomeCurso}" itemValue="#{curso.codCurso}" />
<p:ajax update=“gridCurso"
listener=”#{MBCurso.auto(MBCurso.beanCurso.codCurso)}" />
</p:selectOneMenu> 
		<p:panelGrid id="gridCurso" styleClass="semBorda">
			<p:row>
				<p:column colspan="2" style="width:50% font-size:8px">Nome do Curso:</p:column>
			</p:row>
			<p:row>
				<p:column colspan="2">
					<p:inputText id="nome" value="#{MBCurso.beanCurso.nomeCurso}"
						size="60" required="true"
						requiredMessage="Validação: Campo de preenchimento obrigatório!" />
					<p:message for="nome" />
				</p:column>
			</p:row>
			<p:row>
				<p:column colspan="2" style="width:50% font-size:8px">Período:</p:column>
			</p:row>
			<p:row>
				<p:column colspan="2">
					<p:selectOneMenu id="per"
						value="#{MBCurso.beanCurso.periodoCurso}" effect="drop"
						filter="true" required="true">
						<f:selectItem itemLabel="-Selecione um período" itemValue="" />
						<f:selectItem itemLabel="Matutino" itemValue="Matutino" />
						<f:selectItem itemLabel="Vespertino" itemValue="Vespertino" />
						<f:selectItem itemLabel="Noturno" itemValue="Noturno" />
					</p:selectOneMenu>
				</p:column>
			</p:row>
			<p:row>
				<p:column colspan="2" style="width:50% font-size:8px">Duração:</p:column>
			</p:row>
			<p:row>
				<p:column colspan="2">
					<p:inputText id="duracao"
						value="#{MBCurso.beanCurso.duracaoCurso}" size="30"
						required="true"
						requiredMessage="Validação: Campo de preenchimento obrigatório!" />
					<p:message for="duracao" />
				</p:column>
			</p:row>

			<p:commandButton id="cbtAlterar" value="Alterar"
				action="#{MBCurso.update}" icon="ui-icon-pencil" />
		</p:panelGrid>
	</div>
</h:form>

</h:body>

[/code]
#2

Alguém me ajuda por favor?

#3

Alguém tem ideia do q seja por favor?

#4