css horizontal dropdown navigation menu

Question

I'm trying to implement a horizontal dropdown menu into my website and I've run into a few problems:

1.I want to display the dropdown menu permanently,even when the user has moved the mouse pointer away from one of the link in the main menu like in this example: www.msn.com . I think that I have to use jQuery for that,but I don't have any experience with javascript.

2.How do I center the text in the dropdown ul? At the moment it looks like this: https://i.sstatic.net/J3TQx.png

3.When I use chrome dev tools I can see that nav ul items are outside the nav block,why is this happening? How can I fix it without using position: absolute; ,it's not a problem atm but It will be if someone wants to add another main menu item with wordpress but doesn't know how to edit the css. https://i.sstatic.net/CYyfn.png

html:

<header>
<div id="wrap">     
    <a id="logo" href="<?php bloginfo('siteurl');?>" title="Vratite se na  početnu stranicu" >
         <img src="<?php bloginfo('template_url');?>/images/logo.png"     alt="Obrtnička Škola Koprivnica Logo" width="53" height="70" />
    </a>
    <h1>OBRTNIČKA ŠKOLA KOPRIVNICA</h1>
    <nav>
         <?php wp_nav_menu( array('menu' => 'Main' , 'container' => none)); ?>
    </nav>
</div>

css:
header { height: 75px; background: url(images/background.png); background-repeat-x: repeat; border-bottom: 4px solid #0094e4; box-shadow: 0 2px 5px #ccc; padding: 1px; }

#wrap {
min-width: 740px;
max-width: 1180px;
height: 75px;
margin: 0 auto;
}

#logo {
position: relative;
float: left;
margin: 3px 15px 3px 0;

}

nav {
width: 535px;
height: 25px;
}

nav ul li {
margin: 0 10px 0 1px;
display: inline;
list-style: none;
line-height: 25px; 
padding-bottom: 14px;
}

nav ul li a {
color: white;
line-height: 25px;
font-size: 1.2em;
}

nav ul ul {
display: none;
position: absolute;
top: 75px;
}

nav ul ul a {
color: black;
font-size: 0.9em;
}

nav ul li:hover > ul {
display: block;
}

Answer 1

Here's a fiddle example.

I used the horizontal links pattern from pea.rs. Complimented it with the clearfix micro hack and did some simple jQuery.

There are multiple ways to do this. What I did is do the basic nested horizontal list. I used CSS to position the the secondary sub-menu below the main menu with absolute positioning. Just like MSN.com, I allocated space for there to always be some kind of menu or empty space by adding padding to the bottom of the main nav to fit the sub-nav.

With CSS, I moved the sub-nav off the screen with the common "left:-999em" pattern and re-positioned it when the main menu item has the "active" class.

All that is left is a small jQuery script to remove all "active" classes when hoving over a new item and re-adding the "active" class to the newly hovered item.

1. To permanently display the item, you use only the "onMouseOver" javascript function. This way, it only fires when you first hover the item and isn't removed or reset when you hover off.

2. To easily align center the sub-nav to the main-nav, you make the sub-nav items inline-block. However note, inline-block isn't well supported in older versions of IE but there are things you can do to work with that.

3. Sorry, I didn't spend any time on this question because my code isn't based off your code.

Hopefully this will help! Cheers!