Sub-menu problem with :focus

HTML & CSS
1

I recently needed a drop-down menu, and used a simplified version of http://css-class.com/articles/ursidae/bears5ddh-kbaccess.htm. (I only needed the drop-downs, not the fly-out sub-menus.) I changed the styling to make it fluid, rather than fixed-width.

The client has now decided to add in an internediate page, meaning I do now require one fly-out menu. It works fine on hover, but on focus (using keyboard) the items on the fly-out display at a reduced width. I can fix this by removing margin-left from here:

#nav li li li a:focus, #nav li li li a:active {
	left: 20000px;
	margin-left:9em;
	top:-2.38em;
	}

but then the fly-out items shift left, which is disorientating.

<body>
<div id="wrap">

<div id="navwrap">
<ul id="nav">
	<li><a href="index.html">About Me</a></li>
	<li><a href="poetry.html">Poetry</a>
		<ul>
			<li><a href="first-book.html">First Book</a></li>
			<li><a href="second-book.html">Second Book</a></li>
			<li><a href="third-book.html">Third Book</a></li>
		</ul>
	</li>
	<li><a href="children.html">Children's Fiction</a>
		<ul>
			<li><a href="series-one.html">Series One</a>
				<ul>
					<li><a href="book-one.html">Book One</a></li>
					<li><a href="book-two.html">Book Two</a></li>
					<li><a href="book-three.html">Book Three</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="non-fiction.html">Non-Fiction</a>
		<ul>
			<li><a href="magazine1.html">Magazine</a></li>
			<li><a href="magazine2.html">Another Magazine</a></li>
			<li><a href="magazine3.html">A Different Magazine</a></li>
		</ul>
	</li>
	<li><a href="blog.html">Blog</a></li>
</ul>
</div>

</div>

</body>

body {font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
		font-size: 100%;
		line-height: 1.4;
		}
		
#wrap {width: auto;
	max-width: 54em;
	margin: auto;
	}

/* Adapted from Sons of Ursidae - keyboard accessible */
#navwrap{position:relative;
	z-index:1001;
	border-top: 2px groove #5388B3;
	border-bottom: 2px groove #5388B3;
	clear: both;
	text-align: center;
	margin-bottom: 0.5em;
	}

ul#nav {
	margin: auto;
	width: 100%;
	}
	
ul#nav, ul#nav ul {
	padding: 0;
	list-style: none;
	display: table;
	}
	
ul#nav ul {width: 100%;}
	
ul#nav li {
	position: relative;
	display: table-cell;
	width: 19%;
	}

ul#nav>li li {display: table-row;}

#nav li a {
	display: block;
	text-align:center;
	background-color: #FFFFFF;
	padding: 0.5em 0.5em;
	}
	
ul#nav a:link {color:#1300DD;}
ul#nav ul a:link	{outline: 1px solid #5388B3;}

ul#nav a:visited {color:#663399;}	

ul#nav li a:hover {background-color: #DDE5FA;}

ul#nav li a:focus {background-color: #DDE5FA;}

ul#nav li a:active {background-color: #DDE5FA;}

#nav li li a:focus, #nav li li a:active {
	position : relative;
	left: 10000px;
	top:0;
	z-index:1;
	}

#nav li:hover li a:focus, #nav li:hover li a:active{
	position : relative;
	left: 0;top:0;
	margin-left:0;
	}

#nav li a:focus {outline: 2px solid #5388B3;}

#nav li li a:focus {outline: 2px solid #5388B3;}


#nav li ul {
	position : absolute;
	left: -10000px;
	}

#nav li:hover ul ul{
	left: -10000px;
}

#nav li:hover ul, #nav li li:hover ul{
	top: 0;
	left: 0;
	margin-left: 100%;
}

#nav li a:focus+ul {
	top: 0;
	left: 0;
	margin-left: 0;
	top: 2.35em;
	}
	
#nav li:hover a:focus+ul {
	margin-left: 0;
	}

#nav li:hover ul{
	top:100%;
	margin-left: 0;
	}

#nav li li li a:focus, #nav li li li a:active {
	left: 20000px;
	margin-left:9em;
	top:-2.38em;
	}

#nav li:hover li li a:focus, #nav li:hover li li a:active {
	position : relative;
	left: 0;margin-left:0;
}

#nav li li a:focus+ul {
	top: 0;
	left: 10000px;
	margin-left:100%;
}
#nav li:hover li a:focus+ul {
	left: -10000px;
	margin-left:100%;
}
#nav li li:hover a:focus+ul {
	left: 0;
	margin-left:100%;
}
2

Hi,

Try these adjustments (in bold):


body {
	font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
	font-size: 100%;
	line-height: 1.4;
}
#wrap {
	width: auto;
	max-width: 54em;
	margin: auto;
}
/* Adapted from Sons of Ursidae - keyboard accessible */
#navwrap {
	position:relative;
	z-index:1001;
	border-top: 2px groove #5388B3;
	border-bottom: 2px groove #5388B3;
	clear: both;
	text-align: center;
	margin-bottom: 0.5em;
}
ul#nav {
	margin: auto;
	width: 100%;
}
ul#nav, ul#nav ul {
	padding: 0;
	list-style: none;
	display: table;
}
ul#nav ul {
	width: 100%;
}
ul#nav li {
	position: relative;
	display: table-cell;
	width: 19%;
}
ul#nav>li li {
	display: table-row;
}
#nav li a {
	display: block;
	text-align:center;
	background-color: #FFFFFF;
	padding: 0.5em 0.5em;
}
ul#nav a:link {
	color:#1300DD;
}
ul#nav ul a:link {
	outline: 1px solid #5388B3;
}
ul#nav a:visited {
	color:#663399;
}
ul#nav li a:hover {
	background-color: #DDE5FA;
}
ul#nav li a:focus {
	background-color: #DDE5FA;
}
ul#nav li a:active {
	background-color: #DDE5FA;
}
#nav li li a:focus, #nav li li a:active {
	position : relative;
	left: 10000px;
	top:0;
	z-index:1;
}
#nav li:hover li a:focus, #nav li:hover li a:active {
	position : relative;
	left: 0;
	top:0;
	margin-left:0;
}
#nav li a:focus {
	outline: 2px solid #5388B3;
}
#nav li li a:focus {
	outline: 2px solid #5388B3;
}
#nav li ul {
	position : absolute;
	left: -10000px;
}
#nav li:hover ul ul {
	left: -10000px;
}
#nav li:hover ul, #nav li li:hover ul {
	top: 0;
	left: 0;
	margin-left: 100%;
}
#nav li a:focus+ul {
	top: 0;
	left: 0;
	margin-left: 0;
	top: 2.35em;
}
#nav li:hover a:focus+ul {
	margin-left: 0;
}
[B]#nav li li a +ul {
	margin-left: 100%;
}
[/B]#nav li:hover ul {
	top:100%;
	margin-left: 0;
}
#nav li li li a:focus, #nav li li li a:active {
	left: 20000px;
	top:-2.38em;
}
[B]#nav li:hover li li a:focus, #nav li:hover li li a:active {
	position : relative;
	left:0;
}[/B]


#nav li li a:focus+ul {
	top: 0;
	left: 10000px;
	margin-left:100%;
}
#nav li:hover li a:focus+ul {
	left: -10000px;
	margin-left:100%;
}
#nav li li:hover a:focus+ul {
	left: 0;
	margin-left:100%;

Seems to work ok.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
	font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
	font-size: 100%;
	line-height: 1.4;
}
#wrap {
	width: auto;
	max-width: 54em;
	margin: auto;
}
/* Adapted from Sons of Ursidae - keyboard accessible */
#navwrap {
	position:relative;
	z-index:1001;
	border-top: 2px groove #5388B3;
	border-bottom: 2px groove #5388B3;
	clear: both;
	text-align: center;
	margin-bottom: 0.5em;
}
ul#nav {
	margin: auto;
	width: 100%;
}
ul#nav, ul#nav ul {
	padding: 0;
	list-style: none;
	display: table;
}
ul#nav ul {
	width: 100%;
}
ul#nav li {
	position: relative;
	display: table-cell;
	width: 19%;
}
ul#nav>li li {
	display: table-row;
}
#nav li a {
	display: block;
	text-align:center;
	background-color: #FFFFFF;
	padding: 0.5em 0.5em;
}
ul#nav a:link {
	color:#1300DD;
}
ul#nav ul a:link {
	outline: 1px solid #5388B3;
}
ul#nav a:visited {
	color:#663399;
}
ul#nav li a:hover {
	background-color: #DDE5FA;
}
ul#nav li a:focus {
	background-color: #DDE5FA;
}
ul#nav li a:active {
	background-color: #DDE5FA;
}
#nav li li a:focus, #nav li li a:active {
	position : relative;
	left: 10000px;
	top:0;
	z-index:1;
}
#nav li:hover li a:focus, #nav li:hover li a:active {
	position : relative;
	left: 0;
	top:0;
	margin-left:0;
}
#nav li a:focus {
	outline: 2px solid #5388B3;
}
#nav li li a:focus {
	outline: 2px solid #5388B3;
}
#nav li ul {
	position : absolute;
	left: -10000px;
}
#nav li:hover ul ul {
	left: -10000px;
}
#nav li:hover ul, #nav li li:hover ul {
	top: 0;
	left: 0;
	margin-left: 100%;
}
#nav li a:focus+ul {
	top: 0;
	left: 0;
	margin-left: 0;
	top: 2.35em;
}
#nav li:hover a:focus+ul {
	margin-left: 0;
}
#nav li li a +ul {
	margin-left: 100%;
}
#nav li:hover ul {
	top:100%;
	margin-left: 0;
}
#nav li li li a:focus, #nav li li li a:active {
	left: 20000px;
	top:-2.38em;
}
#nav li:hover li li a:focus, #nav li:hover li li a:active {
	position : relative;
	left:0;
}
#nav li li a:focus+ul {
	top: 0;
	left: 10000px;
	margin-left:100%;
}
#nav li:hover li a:focus+ul {
	left: -10000px;
	margin-left:100%;
}
#nav li li:hover a:focus+ul {
	left: 0;
	margin-left:100%;
}
</style>
</head>

<body>
<body>
<div id="wrap">
		<div id="navwrap">
				<ul id="nav">
						<li><a href="index.html">About Me</a></li>
						<li><a href="poetry.html">Poetry</a>
								<ul>
										<li><a href="first-book.html">First Book</a></li>
										<li><a href="second-book.html">Second Book</a></li>
										<li><a href="third-book.html">Third Book</a></li>
								</ul>
						</li>
						<li><a href="children.html">Children's Fiction</a>
								<ul>
										<li><a href="series-one.html">Series One</a>
												<ul>
														<li><a href="book-one.html">Book One</a></li>
														<li><a href="book-two.html">Book Two</a></li>
														<li><a href="book-three.html">Book Three</a></li>
												</ul>
										</li>
										<li><a href="series-one.html">Series xxx</a></li>
								</ul>
						</li>
						<li><a href="non-fiction.html">Non-Fiction</a>
								<ul>
										<li><a href="magazine1.html">Magazine</a></li>
										<li><a href="magazine2.html">Another Magazine</a></li>
										<li><a href="magazine3.html">A Different Magazine</a></li>
								</ul>
						</li>
						<li><a href="blog.html">Blog</a></li>
				</ul>
		</div>
</div>
</body>
</html>
3

It does indeed. Thank you. :slight_smile: