Horizontal CSS Dropdown Popout Menu

Requirements for Horizontal CSS Menus

Grab HTML From Here

#menu {
width: 100%;
background: #eee;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

The above sets the width onto the individual lists, <ul>'s, this time as the need to float side by side to make them fit into whatever horizontal space is available to them. This horizontal width is determined by setting the width of the #menu div itself. The #menu div is also floated in order to "contain" it's floated descendants.Then we apply the required formatting to the <h2> headings and the <a> anchors, again I'm using the same formatting as the vertical menu

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

Color to taste.

Positioning the Popout Menus and Dropdown Menus

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

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

The position: relative; on the <li> elements establish containing blocks for the descendant <ul> elements.

All secondary levels and deeper are given position: absolute; and a high z-index in order to make them appear, drop down above following content. the third level and deeper lists are the ones we want to move so "offset" positioning co-ordinates only required to be input onto them.

Hiding and Revealing using :hover

This time we actually do want to hide the second level menu (top choice) as we only want the <h2> heading, inside the top level <ul> to remain visible.

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

The display: block; rules show the three levels being activated with the display: none; rules being entered afterwards to more specifically hide the unwanted (deeper nested) lists (counteract them).

Fix it for IE!

The complete conditional CSS is the same as the vertical menu's code and looks like this:<!--[if IE]>

<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->

VERTICAL CSS POP OUT MENU TUTORIAL

Requirements for Vertical CSS Menus

Grab HTML From Here

Vertical Pop Out Menu

#menu {
width: 12em; /* set width of menu */
background: #eee;
}

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

/* style, color and size links and headings to suit */
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

The CSS above removes the padding/margin and bullets from all the lists, sets the width of the the entire menu and styles the links and heading to suit.

Positioning the Pop Outs

#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}

The position: relative; applied to the #menu li makes the <li> elements into containing blocks for the nested <ul> elements.

We only want to apply positioning to third level nested lists and deeper so the #menu ul ul ul targets that and the popout is positioned over to the right edge of their containing block (parent <li> element)

Hiding and Revealing using :hover

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

This bit could be simplified with the use of child selectors, unfortunately we have to use more specific descendant selectors in order for IE to understand.

This now achieves what we want, in a non-IE browser.

Fixing it for IE!

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc); /* call hover behaviour file */
font-size: 100%; /* enable IE to resize em fonts */
}
#menu ul li {
float: left; /* cure IE5.x "whitespace in lists" problem */
width: 100%;
}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
/* if required use em's for IE as it won't resize pixels */
}
</style>
<![endif]-->

The above is the entire conditional CSS which we use to target IE/Windows only. It enables us to call the hover behaviour file and also to input some other IE "workaround" CSS without affecting other browsers.Providing the csshover.htc file has been saved to the same directory as the file you're working on you should see that the popouts are now appearing on hover as expected.

XML and XSLT Basics

The Extensible Markup Language is a powerful tool for creating documents using structured information. Learn what XML is, how to use it, and about other languages created with it.

Anatomy of an XML Document

XML documents have a very specific structure. It is something like a tree with branches off the trunk. Learn how an XML document is structured.

Attributes and XML

Attributes allow you to describe your XML elements.

The Difference Between CSS and XSLT

Not all style sheets are created equal. CSS and XSLT have two very different roles.

DTDs and Markup Languages

Learn what a DTD or Document Type Definition is and how you use them in XML and HTML documents.

Ecommerce Functions in XPath

XPath is a powerful tool for ecommerce, with many functions that help manage and manipulate the data.

Examining XML

XML is a very generic language, and as such, can be confusing to understand. However, once you understand some basic principles you can start creating XML documents that are well-formed and valid.

Form vs. Function - XML-like HTML Tags

There are several HTML tags that look a lot like XML. But what does that really mean? Learn about why some tags were deprecated in XHTML 1.0 and some specific tags that weren't.

How Should My XML Look?

XML doesn't define how a document should look when it's displayed. It's easy to use Cascading Style Sheets (CSS) to define how your XML documents should look.

How to Add RSS Feeds to a Web Site with Dreamweaver

Sometimes, it seems like the only way to get an RSS feed is to have a blog or to write the RSS by hand. But there is a Dreamweaver Extension you can use to build RSS feeds for your Web site. This extension will build feeds manually or take content from your existing Web pages to build the feed.

How to Syndicate this Site

The Web Design/HTML weblog is available for syndication. And with a simple script, it's easy to have this site and other RSS feeds right on your Web page. You can also use aggregators and newsreaders to read RSS feeds you're interested in.

Introduction to XPath

Learn the conventions for pointing to specific parts of your XML document. You should know XPath to work with both XSLT and XPointer.

Introduction to XSL

XSL is more than just transformations of XML documents, it allows you to define your presentations and provide specific maps of your documents.

Modularization of XHTML

XHTML has been broken up into modules to make it more extensible and allow it to be used on more diverse platforms.

Origin and Design Goals for XML

The ten design goals for XML and what they mean.

Privacy Policies and P3P

Use the Platform for Privacy Preferences Project (P3P) to create and use privacy policies on your Web site. And find out what browsers support this project.

Push Technology - XML In Action

It's easy to set up a Web site with push technology using the XML application CDF or Channel Definition Format.

Quirks Mode - Using the DOCTYPE Tag

If you don't use the DOCTYPE tag, your Web pages won't display in standards compliant ways and might result in some strange Web pages.

Rewriting the Web Design Site with Web Standards

It is possible to take a site that is completely non-standard HTML and convert it to XHTML. It also reduces the file size as well.

RSS - Really Simple Syndication

Really Simple Syndication or RDF Site Summary or Rich Site Summary, no matter what you think it stands for, RSS is the answer to Web site syndication.

What is the Semantic Web?

The Semantic Web was devised by Tim Berners-Lee as a way to make the Web into a giant database. With the current status of data on the Web, computers do not know what data they are displaying it. Instead, all that the markup language usually tells about a document is how to display it or structure it. The Semantic Web makes the data understandable to computers as well, so it can be cataloged and used more efficiently.

What is a Sitemap?

What is an XML sitemap and why should I use them on my site? XML sitemaps are a new schema and protocol accepted by Google, Microsoft, and Yahoo! to help assist search engines. Setting up a sitemap for your Web site allows search engines to more accurately review the files on your site, including their locations and relative importance to each other.

Simple Object Access Protocol

What is the Simple Object Access Protocol (SOAP) and how does it relate to XML, HTTP, and Web applications.

Tools to Read (Parse) Your XML

Many Web developers think that XML is just a new version of HTML that is viewed in Web browsers. Learn about XML parsers.

Top XML Books

XML is a huge topic to learn and understand, and these books offer both the beginner and the advanced programmer something to use. While there are many books on specific XML languages and specifications, these books are some of the best all-around XML information manuals. There are books for people who learn by example and for the more studious minded.

Using !DOCTYPE

If you don't define the DOCTYPE or document type definition, newer browsers (version 6+) will assume you didn't write your markup to a standard and provide some strange results. Learn how to write a DOCTYPE that says what you mean and means what you say.

VoiceXML

With VoiceXML you can not only display Web pages on phones, you can hear them over the phone.

Well Formed XML and HTML

When you write XML that can be ready by an XML parser, your XML is well formed. How does that relate to HTML and XHTML?

What are All Those "ML"s?

HTML is based off of SGML, and XHTML is based XML, but what do those letters mean? What exactly is a markup language? And how do they all relate?

What is a DTD?

The Document Type Definition or DTD is the basic building block of an XML document. Learn the parts of a DTD and how to write your own.

What is a Podcast?

There are many misconceptions about what a podcast is. This article will teach you what a podcast is, why it's called a podcast, and give you references to start your own podcast.

What is XHTML?

With the new standard for XHTML, there are lots of questions about the status of HTML and how it relates to this new proposal.

What is XML?

Extensible Markup Language is not an off-shoot of HTML, in fact, it is the creator of languages like HTML. Learn what it is and how it relates to HTML.

Who Needs Wires!

WML or Wireless Markup Language is an XML application that allows you to put your documents onto cell phones and other wireless devices. Cables and wires not required.

Who Uses XML?

XML might be the new big thing, but what are people really using it for?

Why Learn XML?

The Web development community is getting more and more complex. There are many more languages and protocols to learn, but why should you learn XML? The good news is, you don't need to, but XML does do things that HTML cannot.

Writing a Schema

If you're going to write an XML application, you should write a schema to describe your XML. Schemas are valid XML documents, so they are a bit easier to write than DTDs.

XForms

XForms allow you to create forms that work on many platforms, are accessible, and integrate directly with XML.

XHTML 2.0 - What is It?

XHTML 2.0 is the latest version of XHTML - it brings XHTML even closer to its XML origins and is no longer backwards compatible with older versions.

XLink

Using XLink, you can create more flexible links, anchors and more, than you can with HTML. The XML Linking Language is the solution for XML documents.

XML Books

There are many books available about XML. Find the one that is right for you. Three great books, one to learn XML, one reference manual, and one short pocket reference. Plus several others to help.

XML Conversions

Learn by example, how to take an XML document that is not well-formed and invalid and turn it into a well-formed and valid document.

XML Elements

Learn how to use the most basic building block of XML - the element.

XML Explained

The newest markup language can be pretty intimidating!

XML Namespaces

XML namespaces clarify XML documents and allow you to use elements and attributes using the same name.

XML Terms

An explanation of some of the more common XML jargon and what they mean.

XSL-FO - Extensible Stylesheet Language Formatting Objects

What is XSL:FO and how do you use it? Extensible Stylesheet Language: Formatting Objects is the way to make your XML look the way you want it, online or in print.

XSL: The Style of XML

Once you have XML, how do you get it displayed? XSL is the stylesheet language built to display XML.

XSLT: Advanced

Learn how to convert a more complicated XML document into HTML using eXtensible Style Sheet Language for Transformations.

XSLT - The Basics

XSLT is the style sheets language for transforming your XML into any other text based language, including HTML. This week, we'll learn how to do basic transformations.

XSLT: More Transformations

Learn some powerful tools for transforming your XML. XSLT elements give you the power to convert the XML into the format that you need.

About CSS

About CSS

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials, books, mailing lists for users, etc. can be found on the “learning CSS” page. For background information on style sheets, see the Web style sheets page.