Marusya's School Notes

List: Extra Styling

With a little extra style, you can make a horizontal list look like a menu:

HTML file:	Displayed by browser:
<style> ul#menu { padding: 0; } ul#menu li { display: inline; } ul#menu li a { background-color: midnightblue; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: orange; } </style> <body> <h2>Horizontal List</h2> <ul id="menu"> <li><a href="prh.html">HTML</a></li> <li><a href="prc.html">CSS</a></li> <li><a href="prj.html">JavaScript</a></li> <li><a href="prp.html">PHP</a></li> </ul> </body> </html>	Horizontal List HTML CSS JavaScript PHP

HTML file:

Displayed by browser:

<body>
<h2>Horizontal List</h2>
<ul id="menu">
  <li><a href="prh.html">HTML</a></li>
  <li><a href="prc.html">CSS</a></li>
  <li><a href="prj.html">JavaScript</a></li>
  <li><a href="prp.html">PHP</a></li>
</ul>
</body>
</html>

Horizontal List

Yeah, I know, complicated! Definitely an entry on a sticky note! The really awesome stuff IS complicated, but there's nothing stopping you from copying from a source viewed.