fazer dropdown menu aparecer

Bom dia galera,

Estou personalizando um navbar e tem dois dropdown que quero que seja de tamanhos diferentes e o posicionamento tambêm,  já consegui fazer ele sumir via css mais não consigo fazer ele aparecer  olha como esta meu código:

<!-- Navegação -->
<!--Inicio Nav-->

 <nav class="navbar navbar-default" role="navigation">
 <div class="container-fluid">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 </div>
 <div class="collapse navbar-collapse" id="myNavbar">
 <ul>
 <li class="nav-item"><a href="#"><span class="glyphicon glyphicon-home" style="padding: 0px 5px"></span>Home</a></li>
 <li class="nav-item"><a href="#"><span class="glyphicon glyphicon-info-sign" style="padding: 0px 5px"></span>A Empresa</a></li>

 <li id="persianas">
 <a href="#">
 <span class="glyphicon glyphicon glyphicon-th"
 style="padding: 0px 5px"></span>
 Persianas <span class="caret"></span></a>
 <ul>
 <asp:DataList ID="itemPersianas" RepeatColumns="1" runat="server">
 <itemtemplate>
 <li><span style="padding-left:15px;"></span><a href="produtos.aspx?ProdutosId=<%# Eval("MenuId")%>">
 <%# Eval("Titulo") %>
 </a></li>
 </itemtemplate>
 </asp:DataList>
 </ul>
 </li>
 <li>
 <a href="#"><span class="glyphicon glyphicon-th-large" style="padding: 0px 5px"></span>
 Cortinas <span class="caret"></span></a>
 <ul id="cortinas">
 <asp:DataList ID="itemCortinas" RepeatColumns="1" runat="server">
 <itemtemplate>
 <li><span style="padding-left:15px;"></span><a href="produtos.aspx?ProdutosId=<%# Eval("MenuId")%>">
 <%# Eval("Titulo") %>
 </a></li>
 </itemtemplate>
 </asp:DataList>
 </ul>
 </li>
 <li class="nav-item"><a href="#"><span class="glyphicon glyphicon-globe" style="padding: 0px 5px"></span>Parceiros</a></li>
 <li class="nav-item"><a href="#"><span class="glyphicon glyphicon-envelope" style="padding: 0px 5px"></span>Contato</a></li>
 </ul>
 <form class="navbar-form navbar-right" runat="server" role="search" action="#" method="get" id="BuscaForm">
 <div class="input-group" id="pesquisa">
 <asp:TextBox ID="BuscaTextBox" runat="server" class="form-control" placeholder="Pesquisar produtos" name="BuscaTextBox" style="padding:6px 6px;"></asp:TextBox>
 <div class="input-group-btn">
 <button class="btn btn-default" id="PesquisaButton" type="submit"><i class="glyphicon glyphicon-search"></i></button>
 </div>
 </div>
 </form>
 </div>
 </div>
 </nav>
 <!-- Fim Navegação -->

/* navbar
/ barra de menu principal /

.navbar-default {
	background: -moz-linear-gradient(top, #CCC 80%, #fefefd 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f1), color-stop(100%,#fefefd)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #CCC 80%,#fefefd 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #CCC 80%,#fefefd 100%); /* Opera 11.10+ */
	background: linear-gradient(to bottom, #CCC 80%,#fefefd 100%); /* W3C */
 border-color: #E7E7E7;
 height:55px;
 font-size:18px
}

.navbar-default a{

 color: #fff;
 padding:10px;
 display:block;
 text-decoration:none;
 text-align:center;
 background-color: #ccc;
 height:45px;
}

.navbar-default a:hover{

 background-color:#FFF;
 color:#000
}
 .navbar-default ul{
 list-style-type:none;
 position:relative;
 }
 .navbar-default ul li{
 width:150px;
 float:left;
 }
 /*primeiro dropdown*/
 .navbar-default #persiana:hover ul {
 visibility:visible;
 }
 .navbar-default #persianas li{
 width:250px;
 font-size:16px;
 margin:-10px -50px;
 border-radius: 10px;
 box-shadow: 5px 5px black;
 visibility:hidden;
 }
 .navbar-default #persiana a:hover ul {
 visibility:visible;
 }
 /*segundo dropdown*/
 .navbar-default #cortinas{
 position:absolute;
 visibility:hidden
 }
 /*Fim navbar*/