lobodin · October 15, 2010 16:04
diff --git a/horizontal.css b/horizontal.css
 ul.menu a {
    border-bottom: 1px solid #888;
 }

 ul.menu > li:last-child {
    border-right: 1px solid #888;
 }

 ul.menu > li {
    float: left;
 }
diff --git a/menu.html b/menu.html
 <!DOCTYPE HTML>
 <html>

 <head>
    <meta charset="UTF-8">
    
    <title>Popup menu example</title>
    
    <link href="style.css" rel="stylesheet" type="text/css">
    <link href="horizontal.css" rel="stylesheet" type="text/css">
    
 </head>

 <body>
    
    <ul class="menu">
        <li>
            <a href="#">&#63743;</a>
            <ul>
                <li><a href="#">About This Mac</a></li>
                <li><a href="#">Software Update&#133;</a></li>
                <li><a href="#">Mac OS X Software&#133;</a></li>
                <li class="separator">
                <li><a href="#">System Preferences&#133;</a></li>
                <li>
                    <a href="#">Dock&#133;</a>
                    <ul>
                        <li><a href="#">Turn Hiding On</a></li>
                        <li><a href="#">Turn Magnification Off</a></li>
                        <li class="separator">
                        <li><a href="#">Position On Left</a></li>
                        <li><a href="#">Position On Bottom</a></li>
                        <li><a href="#">Position On Right</a></li>
                        <li class="separator">
                        <li><a href="#">Dock Preferences&#133;</a></li>
                    </ul>
                </li>
                <li class="separator">
                <li><a href="#">Recent Items</a></li>
                <li class="separator">
                <li><a href="#">Force Quit&#133;</a></li>
                <li class="separator">
                <li><a href="#">Sleep</a></li>
                <li><a href="#">Restart</a></li>
                <li><a href="#">Shut Down&#133;</a></li>
                <li class="separator">
                <li><a href="#">Log Out Pavel Lobodin&#133;</a></li>
            </ul>
        </li>
        
        <li>
            <a href="#">Finder</a>
            <ul>
                <li><a href="#">About Finder</a></li>
                <li class="separator">
                <li><a href="#">Preferences&#133;</a></li>
                <li class="separator">
                <li><a href="#">Empty Trash</a></li>
                <li><a href="#">Secure Empty Trash&#133;</a></li>
                <li class="separator">
                <li><a href="#">Services</a></li>
                <li class="separator">
                <li><a href="#">Hide Finder</a></li>
                <li><a href="#">Hide Others</a></li>
                <li><a href="#">Show All</a></li>
            </ul>
        </li>
        
        <li><a href="#">File</a></li>
        
        <li><a href="#">Edit</a></li>
        
        <li><a href="#">View</a></li>
        
        <li><a href="#">Go</a></li>
        
        <li><a href="#">Window</a></li>
        
        <li><a href="#">Help</a></li>
    </ul>
       
    
 </body>

 </html>
diff --git a/style.css b/style.css
 body, ul.menu ul li {
    background: #E3EEFF;
 }

 ul {
    list-style: none; 
    padding: 0;
    margin: 0; 
    font-family: sans-serif;
 }

 ul.menu li.separator {
    border-bottom: 1px solid #E2E2E2;
    background: white;
 }

 ul.menu li {
    position: relative;
    white-space: nowrap;
 }

 ul.menu a {
    display: block;
    padding: 3px 10px;
    border-top: 1px solid #888;
    border-left: 1px solid #888;
    background-color: #E2E2E2;
    text-decoration: none;
    color: black;
 }

 ul.menu li a:hover, ul.menu li:hover > a {
    background: #4F61F6;
    color: white;
 }

 ul.menu ul {
    position: absolute;
    display: none;
    -moz-box-shadow: 0 0 3px #888;
    -webkit-box-shadow: 0 0 3px #888;
    box-shadow: 0 0 3px #888;
 }

 ul.menu ul a {
    border: none;
    padding-left: 20px;
    padding-right: 20px;
    background-color: white;
 }

 ul.menu > li:hover > ul, ul.menu ul li:hover ul {
    display: block;
 }

 ul.menu ul ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 100;
 }
diff --git a/vertical.css b/vertical.css
 ul.menu {
    float: left;
 }

 ul.menu a {
    border-right: 1px solid #888;
 }

 ul.menu > li:last-child {
    border-bottom: 1px solid #888;
 }

 ul.menu ul {
    left: 100%;
    top: 0;
 }
	ul.menu a {
	border-bottom: 1px solid #888;
	}

	ul.menu > li:last-child {
	border-right: 1px solid #888;
	}

	ul.menu > li {
	float: left;
	}
	body, ul.menu ul li {
	background: #E3EEFF;
	}

	ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: sans-serif;
	}

	ul.menu li.separator {
	border-bottom: 1px solid #E2E2E2;
	background: white;
	}

	ul.menu li {
	position: relative;
	white-space: nowrap;
	}

	ul.menu a {
	display: block;
	padding: 3px 10px;
	border-top: 1px solid #888;
	border-left: 1px solid #888;
	background-color: #E2E2E2;
	text-decoration: none;
	color: black;
	}

	ul.menu li a:hover, ul.menu li:hover > a {
	background: #4F61F6;
	color: white;
	}

	ul.menu ul {
	position: absolute;
	display: none;
	-moz-box-shadow: 0 0 3px #888;
	-webkit-box-shadow: 0 0 3px #888;
	box-shadow: 0 0 3px #888;
	}

	ul.menu ul a {
	border: none;
	padding-left: 20px;
	padding-right: 20px;
	background-color: white;
	}

	ul.menu > li:hover > ul, ul.menu ul li:hover ul {
	display: block;
	}

	ul.menu ul ul {
	display: none;
	position: absolute;
	left: 100%;
	top: 0;
	z-index: 100;
	}
	ul.menu {
	float: left;
	}

	ul.menu a {
	border-right: 1px solid #888;
	}

	ul.menu > li:last-child {
	border-bottom: 1px solid #888;
	}

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