Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Custom List Example</title>
<style>
  
</style>
</head>
<body>
  <h2>Markup</h2>
 <ul class="footer-menu">
    <li>Page 3
        <ul>
            <li>Subpage 3.1</li>
            <li>Subpage 3.2</li>
            <li>Subpage 3.3</li>
        </ul>
    </li>
    <li>Page 4
        <ul>
            <li>Subpage 4.1</li>
            <li>Subpage 4.2</li>
            <li>Subpage 4.3</li>
        </ul>
   </li>
    <li>Page 3
        <ul>
            <li>Subpage 3.1</li>
            <li>Subpage 3.2</li>
            <li>Subpage 3.3</li>
        </ul>
    </li>
    <li>Page 4
        <ul>
            <li>Subpage 4.1</li>
            <li>Subpage 4.2</li>
            <li>Subpage 4.3</li>
        </ul>
   </li>
    
</ul>
​
</body>
</html>
 
​
.footer-menu, .footer-menu ul {
  list-style-type:none;
}
​
.footer-menu li {
  text-transform:uppercase;
  float:left;
  margin-right:12px;
}
​
.footer-menu li ul {
  padding:0;
  display:block;
}
​
.footer-menu li ul li {
  float:none;
  text-transform:none;
  margin:0;
  padding:0;
}
​
​
ul {list-style: none; margin: 0; padding: 0; float:left; display: inline;}
ul li {float:left; display: inline; margin: 0 5px; padding: 3px 2px;}
ul li ul {float:right;}
h2 {clear: left;}
​
 
if (document.getElementById('hello')) {
  document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript';
}
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers