View Full Version : Creating Flyout Menus

January 8th, 2007, 07:50 PM
I'm trying to create flyout menus to enhance this howto article:


But for some reason I can't add an Edit menu beside it and it goes under it instead. Do you know what might be the issue? In general I'm looking for menus that sort of look like what you might see in an application except that you don't have to click File, Edit, and so on, to see the menu. Doing it purely in CSS would be ideal because it's cleaner, and since I'm doing an XUL app on Firefox, I won't need to worry about Internet Exploder.

<title>Pure CSS Menus</title>
<style type="text/css">
body {
background: #f7f7f7;
ul {
padding: 0;
margin: 0;
/* border-bottom: 1px solid silver; */
ul li {
list-style-type: none;
border-width: 1px 1px 0 3px;
position: relative;
margin: 0;
padding: 0;
ul ul {
display: none;
ul li:hover > ul {
display: block;
position: absolute;
top: -1px;
left: 100%;
border: 1px solid silver;
li a {
display: block;
padding: 5px 7px;
text-decoration: none;
background: #f7f7f7;
color: black;
font-family: Arial,sans;
font-size: 12px;
cursor: default;
ul#topmenu {
width: 6em;
ul#topmenu > li:hover > ul {
width: 10em;
top: 1.5em;
left: -3px;border: 1px solid silver;
ul ul {
width: 10em;

div#menus {
border-bottom: 1px solid Gainsboro;
li#break {
color: Gainsboro;
height: 1px;
margin-left: 6px;
margin-right: 6px;
border-top: 1px solid silver;
li#flyout > a {
background-image: url('flyout.png');
background-repeat: no-repeat;
background-position: right;
ul#topmenu a:hover {
background-color: Gainsboro;
<body topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>
<div id="menus">
<ul id="topmenu">
<li class="sub"><a href="">File</a>
<li class="sub" id="flyout"><a href="myapp/index.js?mode=new" title="">New</a>
<li><a href="myapp/index.js?mode=test1" title="">test1</a></li>
<li><a href="myapp/index.js?mode=test2" title="">test2</a></li>
<li><a href="myapp/index.js?mode=open" title="">Open</a></li>
<li><a href="myapp/index.js?mode=save" title="">Save</a></li>
<li id="break"></li>
<li><a href="myapp/index.js?mode=quit" title="">Quit</a></li>

P.S. If you have a way to make the code even tighter, that's way cool too.

January 8th, 2007, 11:29 PM
I don't do much web design, but you're using list's... If I had to guess I would say the list's don't want to be horizontal. But, thats just a guess, like I said... I don't really know how they work.

January 8th, 2007, 11:32 PM
Yeah I'm fairly sure lists default to vertical, and I don't think there's an option to have them go horizontal. You may wish to try using the 'float' css property to get certain entries in the list to float to the right.

January 9th, 2007, 01:09 AM
There is a way to make the list horizontal. You just need to add:
display: inline; In the list class, like #class1 li for example

January 9th, 2007, 09:40 AM
I finally figured out the answer to building application-style menus in CSS.


This will be useful to new developers who might be using the XUL technique (specified in the article above if you look at the whole thread) to build applications on Linux.