Vertical dropdown menu

I’ve started to modify my theme (I’m using twentyten) but got stuck on the menu.

I would like my menu to work like this: https://stureplan.se/

Features
1. Submenu to “drop down” vertically on mouse over. (Works today.)
2. The submenu to “stop” at the last mainmenu choise on mouse out.
3. If you choose one subpage – the submenu should show up directly.
4. The active color showing witch page you’re at, should work on both main and submenu.
5. The submenu should start to the left.
See my link (stureplan.se) for examples.

This is how my menu looks today: https://ateensonline.com/

And here’s my source code

header.php

<div id="access" role="navigation">
			  <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
				<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
				<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>
				<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
			</div>

style.css

#access {
	background: url(images/menu_bg.jpg) no-repeat;
	margin: 0 auto;
	width: 931px;
	display:block;
	float:left;
}

#access .menu-header,
div.menu {
	font-size: 13px;
	margin-left: 12px;
}

#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}

#access .menu-header li,
div.menu li {
	float:left;
	position: relative;
}

#access a {
	display:block;
	text-decoration:none;
	color:#555;
	padding:0 10px;
	line-height:36px;
	font-weight:bold;
	font-size:11px;
}

#access ul ul {
	display:none;
	position: absolute;
	width: 900px;
	z-index:999;
}

#access ul ul li {
	float:left;
}

#access ul ul ul {
	left:100%;
	top:0;
}

#access ul ul a {
	height:auto;
	line-height: 0px;
	padding:9px;
	font-size:11px;
}

#access li:hover > a,
#access ul ul :hover > a {
	color:#000;
}

#access ul li:hover > ul {
	display:block;
}

#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #fff;
	background:#24187f;
}

* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color:#fff;
}

Any suggestions?
Sorry for my bad english by the way.