Question

Today I tried something unique, so I decided to code my template.

You know some menus have a title and a description?

EXAMPLE:

Homepage
Our main page

Twitter
Follow us!

Thats how the menu should look like:

http://gyazo.com/360b81db32cf61922e9ff8f55274d779

Okay I tried adding a description simply by using
in a li item and it didnt work at all!

<div class="header">
     <div class="container">
           <div id="logo"><a href="#"><img src="img/logo.png"/></a></div>
                <div class="menu">
                <ul>
                <li>Home<br /> Main Page</li>
                <li>Home<br /> Main Page</li>
                <li>Home<br /> Main Page</li>
                <li>Home<br /> Main Page</li>
                <li>Home<br /> Main Page</li>
                </ul>
            </div>
     </div>
</div>

That’s the CSS I used:

.header {
background: #6b6353 url("../img/header.png");
width: 100%;
height: 112px;
}

#logo {
float: left;
margin-top:22px;
}

.subheader {
background: #deac12 url("../img/subheader.png");
width: 100%;
height: 36px;
}

.menu ul li{
display: inline;
}

Why doesn’t it work even though it has inline & a break?

What happens with that code:

http://gyazo.com/a585ed4b408f3c6ed2583244ea4ff236

Thank you!

Answer 1

You should use display: inline-block for your li and for God’s sake stop using <br> tags, use a <span> or a <p> instead.