Ocultar submenú

[yokiboku]

Buenas!

Tengo un problema con un menú que estoy realizando en php y que estoy incorporando a la web con el código include. Tengo 4 secciones y una de ellas con un submenú ¿Cómo puedo hacer para que el submenú sólo aparezca desplegado o visible en su sección y oculto en las demás? Esta es la imagen del menú:



Me gustaría que aparezca cuando estás dentro de la sección de diseño pero no cuando estoy en Blog o en cualquier otra sección. No controlo mucho de javascript, y supongo que habrá alguna forma de realizarlo pero no consigo dar con la solución.

Este el código del menú

Código PHP:

       <header> 
    <h1 id="logo"><a href="index.php">Huntington</a></h1> 
    <a href="index.php"> 
    <div class="tagline">Portfolio</div> 
    </a> 
    <nav id="main-nav">  
      <ul class="option-set clearfix" data-option-key="filter">  
        <li <?php if ($entrada_activa == 1 ) echo 'class="sub-nav-toggle active"'; ?>><a href="index.php">Diseños</a>  
          <ul id="options" class="sub-nav">  
            <li class="selected"> <a href="#home">Todos (15)</a> </li>  
            <li> <a href="#grafico">Diseño Gráfico (5)</a> </li>  
            <li> <a href="#web">Diseño Web (3)</a> </li>  
            <li> <a href="#webdesign">Ilustración (7)</a> </li>  
          </ul>  
        </li>  
        <li <?php if ($entrada_activa == 2 ) echo 'class="active"'; ?>><a href="sobremi.php">Sobre Mi</a></li>  
        <li <?php if ($entrada_activa == 3 ) echo 'class="active"'; ?>><a href="blog.php">Blog</a></li>  
        <li <?php if ($entrada_activa == 4 ) echo 'class="active"'; ?>><a href="contacto.php">Contacto</a></li>  
    </nav> 
        <!-- end main nav --> 
    <div id="bottom-header"> 
      <div class="social-links"> 
        <ul class="social-list clearfix"> 
          <li> <a href="#" class="pinterest"></a> </li> 
          <li> <a href="#" class="twitter"></a> </li> 
          <li> <a href="#" class="gplus"></a> </li> 
          <li> <a href="#" class="facebook"></a> </li> 
        </ul> 
      </div> 
      <p class="small">Portfolio<br /> 
        [email protected]<br /> 
        (845)&nbsp;123-4567</p> 
    </div> 
      </header>  

Después en cada sección lo incluyo así

Código HTML:

 <!-- Comienzo Menu Includes -->
    <?php
    $entrada_activa = 1;
    include("menu.php"); ?>
    <!-- Final Menu Includes --> 

Muchas gracias!

[peperafa]

Que tal hermano,
Solamente se necesita css para el efecto que quieres lograr, puse colores en los estilos para que puedas ver el área de cada sección.

<style>
#menu{width: 160px; position: relative; background-color: red;}
.sub-nav{display: none;}
#menu ul li:focus ul, #menu ul li:hover ul, #menu ul li a:hover ul {display: block;
position: relative;width: 160px;border: solid 1px #fff;border-top: none;background-color: green;}
#menu ul li:focus span, #menu ul li:hover span, #menu ul li a:hover {background-color: blue;}
</style>

<div id="menu">
<ul class="option-set clearfix" data-option-key="filter">
<li class="opcion1" <?php if ($entrada_activa == 1 ) echo 'class="sub-nav-toggle active"'; ?>><a href="#">Diseños</a>
<ul id="options" class="sub-nav">
<li class="selected"> <a href="#home">Todos (15)</a> </li>
<li> <a href="#grafico">Diseño Gráfico (5)</a> </li>
<li> <a href="#web">Diseño Web (3)</a> </li>
<li> <a href="#webdesign">Ilustración (7)</a> </li>
</ul>
</li>
<li <?php if ($entrada_activa == 2 ) echo 'class="active"'; ?>><a href="·#">Sobre Mi</a></li>
<li <?php if ($entrada_activa == 3 ) echo 'class="active"'; ?>><a href="#">Blog</a></li>
<li <?php if ($entrada_activa == 4 ) echo 'class="active"'; ?>><a href="#">Contacto</a></li>
</div>

Tambien te dejo un ejemplo de como se puede hacer con Jquery:

$(document).ready(function(){
//Ocultamos el submenú al cargar la página
//Yo ocupo mouseenter y mouseleave aunque tambien se puede con hover
$("#divParaOcultar").hide();

// Mostramos el submenú si pasamos el ratón sobre la sección
$("#divSeccion").mouseenter(function(){
$("#divParaOcultar").css({'display':'block'});//Aqui colocas tus estilos
});
// Ocultamos el submenú si pasamos el ratón sobre la sección
$("#divParaOcultar").mouseleave(function(){
$("#divParaOcultar").css({'display':'none'});//Aqui colocas tus estilos
});
});

Te dejo el link de este blog: http://www.anerbarrena.com/jquery-toogle-mostrar-ocultar-divs-1728/ en donde encontrarás varios ejemplos para mostrar y ocultar los elementos con animaciones y en este explica sencillamente como ocultar elementos http://www.desarrolloweb.com/articulos/mostrar-ocultar-elementos-jquery.html, te recomiendo que busques y aprendas que hacen los estilos position, display, float, pading, z-index y margin para que lo puedas colocar adecuadamente, revisa la sintaxis luego se me van las cabras y cambio un poco las cosas.
Saludos!!