Navegación submenús no se deslice hacia afuera.Es mi javascript no funciona?

Question

Yo soy un novato, así que no estoy realmente seguro de lo que estoy haciendo mal aquí!

Aquí está mi jsfiddle: http://jsfiddle.net/alh3168/UwG7h.

Estoy tratando de hacer una simple fly-out menú de navegación donde el sub-menús que se deslice a la derecha del menú de navegación.Quiero que sea similar a este: http://jsfiddle.net/ReuLr/6.Lo he intentado todo;es posible hacer esto con CSS en lugar de javascript?¿Ves algún error en el resto de mi código que es la prevención de la slideout navbar de trabajo?Gracias de antemano!

Aquí está mi javascript, que he copiado de la anterior jsfiddle:

$(document).ready(function () {
    var secs1 = $('ul.first > li');
    secs1.hover(
    function () {
        $(this).find('ul.second').animate({
            width: 'toggle'
        }, 500);
    },
    function () {
        $(this).find('ul.second').animate({
            width: 'toggle'
        }, 250);
    });
});

Answer 1

A partir del ejemplo que usted siempre, he hecho las siguientes modificaciones:

• Eliminado el h1 etiqueta de HTML
• Poner el navigation's style el valor del atributo en CSS
• Agrega un poco de CSS para los elementos div.menu ul

Aquí un Violín, incluyendo las modificaciones realizadas

Notas:

• el código JS no fue modificado (es el mismo que el de su ejemplo el código JS).
• cuando se utiliza JSFiddle, no olvides seleccionar el jQuery de los "Marcos y Extensiones" de la lista ;)

---

CSS:

#navigation {
    background-color:#FFF;
    height:100%;
    width:250px;
    float:left;
}

/********************/
/* MENU            */
/*******************/
 div.menu {
    width: 200px;
    float: left;
    position: relative;
}
/* ADDITIONAL CSS */
 div.menu ul {
    list-style-type: none;
    margin-top: 0;
    padding-left: 0;
}
div.menu ul li {
    margin-bottom: 1px;
}
div.menu ul.first li a {
    width: 190px;
    height: 22px;
    background-color: #00293E;
    color: #ffffff;
    text-decoration: none;
    display: block;
    padding: 7px 10px 0 0;
    text-align: right;
    font-weight: bold;
    cursor: pointer;
    cursor: hand;
}
div.menu ul.first li a:hover {
    background-color: #B2CC7F;
    color: #00293E;
}
div.menu ul.second {
    position: absolute;
    left: 200px;
    top: 0;
    z-index: 10;
    display: none;
    width: 190px;
}
div.menu ul.second:hover {
    display: block;
}
div.menu ul.second li a {
    width: 190px;
    height: 22px;
    background-color: #B2CC7F;
    color: #00293E;
    text-decoration: none;
    display: block;
    padding: 7px 10px 0 0;
    text-align: right;
    font-weight: bold;
    cursor: pointer;
    cursor: hand;
}
div.menu ul.second li a:hover {
    background-color: #597A5E;
    color: #ffffff;
}

HTML:

<div id="navigation">
    <header id="header-main">
        <img src="Logos/headerlogo.jpg" width="215" height="80" longdesc="Logos/headerlogo.jpg">
        <hr size=1 width=175 align=left style=margin-left:35px>
        <div class="menu">
            <ul class="first">
                <li> <a href="" title="" runat="server">Home</a>
                </li>
                <li> <a href="" title="" runat="server">Blog</a>

                    <ul class="second">
                        <li><a href="" title="" runat="server">Sub category 1</a>
                        </li>
                        <li><a href="" title="" runat="server">Sub category 2</a>
                        </li>
                        <li><a href="" title="" runat="server">Sub category 3</a>
                        </li>
                        <li><a href="" title="" runat="server">Sub category 4</a>
                        </li>
                        <li><a href="" title="" runat="server">Sub category 5</a>
                        </li>
                        <li><a href="" title="" runat="server">Sub category 6</a>
                        </li>
                    </ul>
                </li>
                <li> <a href="" title="" runat="server">Instagram</a>
                </li>
                <li><a href="" title="" runat="server">About</a>
                </li>
                <li><a href="" title="" runat="server">Store</a>

                    <ul class="second">
                        <li><a href="" title="" runat="server">Etsy</a>
                        </li>
                        <li><a href="" title="" runat="server">Society6</a>
                        </li>
                    </ul>
                </li>
                <li><a href="" title="" runat="server">Portfolio</a>

                    <ul class="second">
                        <li><a href="" title="" runat="server">Capstone</a>
                        </li>
                        <li><a href="" title="" runat="server">Visual Communications</a>
                        </li>
                        <li><a href="" title="" runat="server">Illustration</a>
                        </li>
                        <li><a href="" title="" runat="server">Photography</a>
                        </li>
                        <li><a href="" title="" runat="server">Painting</a>
                        </li>
                        <li><a href="" title="" runat="server">Printmaking</a>
                        </li>
                        <li><a href="" title="" runat="server">Fibers</a>
                        </li>
                    </ul>
                </li>
                <li><a href="" title="" runat="server">Contact</a>

                    <ul class="second">
                        <li><a href="" title="" runat="server">E-mail</a>
                        </li>
                        <li><a href="" title="" runat="server">Linked In</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <hr size=1 width=175 align=left style=margin-left:35px>
        <ul id="search-list">
            <form method="get" action="http://www.andreahock.com">
                <table cellpadding="0px" ; cellspacing="0px">
                    <tr>
                        <td style="border-style:solid none solid solid; border-color:#C93;border-width:1px;">
                            <input type="text" name="zoom_query" placeholder="  search the blog" style="width:150px; font-family: Neou-Bold; src: url('Neou-Bold.otf'); font-size:8px;letter-spacing:1px ;border:#FFF; height:17px; padding:0px 3px; position:relative;">
                        </td>
                        <td style="border-style:solid; border-left:#FFF;border-color:#C96;border-width:1px;">
                            <input type="submit" value="" style="border-style: none; border-left:#FFF ;background: url('jpegs/magnifyingglass.jpg') no-repeat; width: 20 px; height:23 px;">
                        </td>
                    </tr>
                </table>
            </form>
        </ul>
    </header>
</div>
<div id="content">Content goes here</div>
<div id="footer" style="background-color:#DABC69; font-family: Neou-Bold; src: url('Neou-Bold.otf'); font-size:10px;letter-spacing:1px; clear:both; text-align:center;">All designs belong to Andrea Hock</div>
</div>

JS:

$(document).ready(function () {
    $('ul ul').each(function () {
        $(this).parent('li').mouseover(function () {
            $(this).find('ul.second').stop(true, true).animate({
                width: "toggle"
            }, {
                queue: false,
                duration: 250
            });
        }).mouseout(function () {
            $(this).find('ul.second').stop(true, true).animate({
                width: "toggle"
            }, {
                queue: false,
                duration: 250
            });
        });
    });
});

Answer 2

¡Solo necesitaba llamar a Javascript correctamente!Por eso no estaba trabajando en Dreamweaver.¡Gracias por su ayuda!

<script type="text/javascript">
    $(document).ready(function() {

$('ul ul').each(function () {
    $(this).parent('li').mouseover(function () {
        $(this).find('ul.second').stop(true, true).animate({
            width: "toggle"
        }, {
            queue: false,
            duration: 450
        });
    }).mouseout(function () {
        $(this).find('ul.second').stop(true, true).animate({
            width: "toggle"
        }, {
            queue: false,
            duration: 450
        });
    });
});

});