Initial commit

## Example files for the title:  

# CSS3 Dropdown Menus, by Ben Jaffe

[![CSS3 Dropdown Menus, by Ben Jaffe](http://akamaicovers.oreilly.com/images/9781771371995/cat.gif)](https://www.safaribooksonline.com/library/view/title/9781771371995//)

The following applies to example files from material published by O’Reilly Media, Inc. Content from other publishers may include different rules of usage. Please refer to any additional usage rights explained in the actual example files or refer to the publisher’s website.

O'Reilly books are here to help you get your job done. In general, you may use the code in O'Reilly books in your programs and documentation. You do not need to contact us for permission unless you're reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from our books does not require permission. Answering a question by citing our books and quoting example code does not require permission. On the other hand, selling or distributing a CD-ROM of examples from O'Reilly books does require permission. Incorporating a significant amount of example code from our books into your product's documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN.

If you think your use of code examples falls outside fair use or the permission given here, feel free to contact us at <permissions@oreilly.com>.

Please note that the examples are not production code and have not been carefully testing. They are provided "as-is" and come with no warranty of any kind.

{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf350

{\fonttbl\f0\fswiss\fcharset0 Helvetica;}

{\colortbl;\red255\green255\blue255;}

\margl1440\margr1440\vieww9000\viewh8400\viewkind0

\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\ql\qnatural\pardirnatural

\f0\fs24 \cf0 No work files for this lesson...}

 No newline at end of file

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Hover</title>

	<style>

	.hoverable {

		background-color: #F99;

		padding: 20px;

		width: 150px;

		text-align: center;

	}

	.links {

		background-color: #f99;

		border: 1px solid black;

	}

	.link {

		background-color: #9f9;

		margin:4px;

	}

	.sub-links {

		background-color: #fcc;

		margin:4px;

		border: 1px solid black;

	}

	.sub-link {

		background-color: #cfc;

		margin:4px;

	}

	</style>

</head>

<body>

	<div class="hoverable">Hover over me!</div>

	<hr>

	<ul class="links">

		<li class="link">Item 1</li>

		<li class="link">Item 2</li>

		<li class="link">Item 3</li>

		<li class="link">Item 4</li>

		<li class="link">Item 5

			<ul class="sub-links">

				<li class="sub-link">Item 5-1</li>

				<li class="sub-link">Item 5-2</li>

				<li class="sub-link">Item 5-3</li>

			</ul>

		</li>

	</ul>

</body>

</html>

 No newline at end of file

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Hover</title>

	<style>

	.hoverable {

		background-color: #F99;

		width: 150px;

		padding: 20px;

		margin:30px auto;

		text-align: center;

	}

	.hoverable:hover {

		background-color: #222;

		color: white;

	}

	.links {

		background-color: #f99;

		border: 1px solid black;

	}

	.link {

		background-color: #9f9;

		margin:4px;

	}

	.sub-links {

		background-color: #fcc;

		margin:4px;

		border: 1px solid black;

		display: none;

	}

	.sub-link {

		background-color: #cfc;

		margin:4px;

	}

	.link:hover {

		padding-left: 5px;

	}

	.link:hover .sub-links {

		display: block;

	}

	</style>

</head>

<body>

	<div class="hoverable">Hover over me!</div>

	<hr>

	<ul class="links">

		<li class="link">Item 1</li>

		<li class="link">Item 2</li>

		<li class="link">Item 3</li>

		<li class="link">Item 4</li>

		<li class="link">Item 5

			<ul class="sub-links">

				<li class="sub-link">Item 5-1</li>

				<li class="sub-link">Item 5-2</li>

				<li class="sub-link">Item 5-3</li>

			</ul>

		</li>

	</ul>

</body>

</html>

 No newline at end of file

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Hover Tabs</title>

	<style>

	.tabs {

		border: 4px solid #CCC;

		width: 400px;

		margin: 0 auto;

		padding: 0px;

		list-style: none;

	}

	.tab {

		border: 1px solid black;

		margin-bottom: 10px;

	}

	.tab-name {

		background-color: #cfc;

	}

	.tab-content {

		background-color: #fcc;

	}

	</style>

</head>

<body>

	<ul class="tabs">

		<li class="tab">

			<div class="tab-name">Tab 1</div>

			<div class="tab-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti magnam ipsam deserunt facere ex suscipit explicabo maiores. Eius, temporibus, earum, tempora delectus atque et autem quasi amet quos natus iste error nesciunt officiis at laudantium omnis quisquam sit consectetur. Aliquam, neque ipsa officiis dolore dolorem illo esse possimus sit quam! ipsum dolor sit amet, consectetur adipisicing elit. Quod, voluptatem.</div>

		</li>

		<li class="tab">

			<div class="tab-name">Tab 2</div>

			<div class="tab-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, adipisci, accusantium, dolorum, similique reprehenderit nesciunt suscipit perspiciatis optio beatae incidunt libero quibusdam asperiores quasi sequi quis natus fugiat hic illo dicta necessitatibus possimus consequuntur earum laborum voluptas culpa corrupti assumenda ab repellat a magni praesentium aperiam vel qui tempore sint explicabo tempora minima nemo veniam cum voluptatum voluptate voluptates sed commodi quos harum! Quo, necessitatibus, inventore ducimus tempore consectetur nulla qui modi natus consequuntur possimus placeat repellendus quod commodi voluptatem. ipsum dolor sit amet, consectetur adipisicing elit. Quas repellendus quia excepturi fuga vitae exercitationem delectus? Quidem id magni provident!</div>

		</li>

		<li class="tab">

			<div class="tab-name">Tab 3</div>

			<div class="tab-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, amet, officiis, in, temporibus eaque maxime vitae laborum soluta repellendus quam sunt assumenda quia sed obcaecati earum perferendis qui unde vel vero aliquid alias rem nisi dolorum dicta iste laudantium sint et error corporis ipsa minima necessitatibus suscipit recusandae. Adipisci, non ab labore nesciunt officia libero saepe ea soluta inventore optio. ipsum dolor sit amet, consectetur adipisicing elit. Excepturi dignissimos dolor eos ut impedit temporibus.</div>

		</li>

	</ul>

</body>

</html>

 No newline at end of file