Creating a horizontal list with vertical sub-lists

Get Started
1

Hi,

I am trying to turn the attached mockup into a website, but am struggling with the navigation section.

I can creat an inline list, however the moment I give it a sub-list it reverts back to a vertical list. Should I be using something other then lists? A list just seems so appropriate for this task.


<ul>
    <li>
        <ul>
            <li>col 1 row 1</li>
            <li>col 1 row 1</li>
        </ul>
    </li>
    <li>
    ...
</ul>


#nav_section li {
	display: inline;
}

Any help would be appreciated.

Thanks,
Cassie (Teacher @ Harristown)

2

Hi harristown, welcome to SitePoint! :wave:

Take it that the sub rows should always be visible, not dropdowns on hover? :slight_smile:

Float the main list items and they will line up horizontally as long as there is room.
Give the links display:block to take lengths.
Give the sublists a width.
Clear the sub items to stack them vertical.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">

#nav_section{
	margin: auto;
	padding: 0;
	width: 800px;
}
#nav_section li {
	list-style: none;
	float: left;
}
#nav_section a {
	display: block;
	margin: 5px;
	width: 90px;
	height: 90px;
	background: #fc0;
}
#nav_section ul{
	margin: 0;
	padding: 0;
	width: 100px;
}
#nav_section ul li {
	clear: left;
}
</style></head><body>

<ul id="nav_section">
	<li><a href="#">mainrow 1</a></li>
	<li><a href="#">mainrow 2</a></li>
	<li><a href="#">mainrow 3</a>
		<ul>
			<li><a href="#">subrow 1</a></li>
		</ul>
	</li>
	<li><a href="#">mainrow 4</a>
		<ul>
			<li><a href="#">subrow 1</a></li>
		</ul>
	</li>
	<li><a href="#">mainrow 5</a>
		<ul>
			<li><a href="#">subrow 1</a></li>
		</ul></li>
	<li><a href="#">mainrow 6</a>
		<ul>
			<li><a href="#">subrow 1</a></li>
			<li><a href="#">subrow 2</a></li>
		</ul>
	</li>
	<li><a href="#">mainrow 7</a>
		<ul>
			<li><a href="#">subrow 1</a></li>
			<li><a href="#">subrow 2</a></li>
		</ul>
	</li>
	<li><a href="#">mainrow 8</a>
		<ul>
			<li><a href="#">subrow 1</a></li>
		</ul>
	</li>
</ul>

</body></html>
3

Hi Erik,

That is great. Thanks for your help.

Thanks,
Cassie