Menu Styling Problem

[MasterRenny]

Ok this is basically my first ever menu navigation and im having a few problems with it, that is problem when it drops down

http://test.masterrenny.com/ <<< thats it in action

nav { font-family:'BebasNeueRegular'; display:block; border:1px solid #222; position:relative; margin-top: 0; margin-right: auto; margin-bottom: 20px; margin-left: auto; text-transform:uppercase; font-size:18px }
nav ul { padding:0; margin:0; }
nav li { position:relative; float:left; list-style-type:none; height:50px; }
nav li:hover { background:#111; color: white; text-shadow: 0 1px black; }
nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
nav li a { color: #999; display: block; line-height: 11px; height: 10px; padding: 20px; border-right: 1px solid #333; box-shadow: -1px 0 #000 inset; -moz-box-shadow: -1px 0 #000 inset; -webkit-box-shadow: -1px 0 #000 inset; text-shadow: 0 -1px black; }
nav li a:focus { outline:none; text-decoration:underline; }
nav li:first-child a { border-left:none; }
nav li.last a { border-right:none; }
nav a span { display:block; float:right; margin-left:5px; }
nav ul ul { display:none; min-width:168px; padding:20px; position:absolute; left:0; background:#565656; }
nav ul ul li { float:none; }
nav ul ul a { padding:5px 10px; border-left:none; border-right:none; font-size:14px; }
nav ul ul a:hover { background-color:#555; }

The CSS code im using

<nav>
    <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Test</a>
<ul>
              <li><a href="#">Test link</a>
<ul>
                  <li><a href="#">Example</a></li>
                  <li><a href="#">Hehe</a></li>
                </ul>
              </li>
              <li><a href="#">Link</a></li>
            </ul>
          </li>
          <li><a href="#">Last link ok </a></li>
    </ul>
</nav>
		                <script>
$(document).ready(function () { 
     
    $('nav li').hover(
        function () {
            //show its submenu
            $('ul', this).slideDown(100);
 
        }, 
        function () {
            //hide its submenu
            $('ul', this).slideUp(100);         
        }
    );
     
});
</script>

the link "test" is the drop down part, its surpose to have a arch of two but as u can see, its messed up and its really frustrating me

[SB65]

This is a jQuery problem really. Your problem is here:

		                <script>
$(document).ready(function () { 
     
    $('nav li').hover(
        function () {
            //show its submenu
            $('ul', this).slideDown(100);
 
        }, 
        function () {
            //hide its submenu
            $('ul', this).slideUp(100);         
        }
    );
     
});
</script>

So, what this is saying is "on hover of an li within nav, show any ul within that li". Result - both the second and third level uls within your menu are shown.

Your script should be (for example, there's a few ways of doing this):

$(this).children('ul').slideDown(100);

The .children selector restricts the selection to the immediate children only, which is what you want.

Worth mentioning that this is possible with css only, as currently your menu wouldn't work at all for a user with js disabled.

Your page also appears to be rendering the php code directly if you view the source, so there's something else not right on your server/page.

[MasterRenny]

Well that was just a testing ground just so i could have some idea what its like, but even on my wordpress theme which its intended for (www.masterrenny.com) the drop down still doesnt work correctly

[SB65]

Not surprising, since that page uses css not jQuery for the dropdown.

Are you trying to implement the jQuery on your Wordpress page - I can't see it anywhere?

And, actually, the dropdown appears OK on that page, in that only one level is displayed on the initial hover.

What, exactly, is the problem you're trying to fix?

[MasterRenny]

Originally Posted by SB65

Not surprising, since that page uses css not jQuery for the dropdown.

Are you trying to implement the jQuery on your Wordpress page - I can't see it anywhere?

And, actually, the dropdown appears OK on that page, in that only one level is displayed on the initial hover.

What, exactly, is the problem you're trying to fix?

On the Guildwars drop down menu when you get to the uncategorized the links that appear should be at the right but i cant seem to get it to do it :/ Ive aded the jquery animation for it to slide down but it doesnt work for some reason so i removed it

[MasterRenny]

Edit: Dont Matter, Problem solved thanks for your help.