View Full Version : Help with a 2 line menu

Mar 19th, 2010, 05:04 AM
I just recently started teaching myself web design (been doing mostly print design for the last 8 years) and trying to utilize CSS. On the site I'm working on I need to create a menu where each category has 2 lines of copy (see attached) and for some reason I can't get it to work inline. I've been trying different list options ul and dl but no luck so far. I don't need a drop down menu or anything, the second line of text will always show, only the top portion will rollover white on hover (which the rollover isn't the problem just getting it to format correctly). I'm getting crazy frustrated, I'm such a noob smile.gif

Mar 19th, 2010, 05:39 AM
post your code and we'll see what's wrong

Mar 19th, 2010, 09:13 AM
Hello niguangxingzou,
Try it with the smaller white text in a span.
Like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
background: #9C9;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
* {
margin: 0;
padding: 0;
#container {
width: 800px;
margin: 30px auto;
padding: 50px 0 300px;
background: #999;
ul#menu {
background: #000;
width: 800px;
overflow: hidden;
list-style-type: none;
ul#menu li {
float: left;
padding: 0 0 0 20px;
text-align: left;
background: #000;
#home {width: 135px;}
#services {width: 180px;}
#portfolio {width: 210px;}
#contact {width: 190px;}
ul#menu li a {
float: left;
color: #09c;
text-decoration: none;
font-size: 2em;
outline: none;
ul#menu li a span {
float: left;
color: #fff;
font-size: 0.5em;
ul#menu li a:hover {color: #fff;}
<div id="container">
<ul id="menu">
<li id="home"><a href="#">HOME <span>About us</span></a></li>
<li id="services"><a href="#">SERVICES <span>What we can do</span></a></li>
<li id="portfolio"><a href="#">PORTFOLIO <span>What we have done</span></a></li>
<li id="contact"><a href="#">CONTACT <span>Reach out</span></a></li>
<!--end container--></div>