Responsive css menu with additional text

Introduction

This is something I don’t see done as often anymore. Frequently these drop down menus with additional text below the link are done with images but we should never replace text with images. The following example is valid HTML with some pretty simple css. You can take this and skin it to look however you want. I hope to explore more ways to accomplish similar menus in future posts.

Sample

Hopefully by keeping this simple you can have a better idea of what’s going on. I’m not going to explain the HTML I’m using, it’s pretty straight forward. Just follow the same formula and you’ll be ok.

The HTML

<div id="main-nav">
  <ul>
    <li><a href="#"><strong>Start</strong>
    <em>Go here if you get lost</em></a></li>
    <li><a href="#"><strong>Rants</strong>
    <em>Basically our blog</em></a></li>
    <li><a href="#"><strong>Informatis</strong>
    <em>Stuff you never wanted to know</em></a>
	<ul id="secondary-nav">
          <li><a href="#">Item 1</a></li>
	  <li><a href="#">Item 2</a></li>
	</ul>
    </li>
</ul>

The CSS

#sc-main-nav {
	width:100%;
	float:left;
}
#sc-main-nav ul li {
	position:relative;
	list-style:none;
	display:table-cell;
	border-right:1px solid gray;
}
#sc-main-nav ul li a {
	display:block;
	padding:10px;
}
#sc-main-nav ul li:first-child {
	border-left:1px solid gray;
}
#sc-main-nav ul li strong {
	display:block;	
	font-size:1.25em;
}

#sc-main-nav ul li em {
	clear:left;
}

	#sc-main-nav ul li:hover ul {
		display:block;
	}
	
#secondary-nav {
	position:absolute;
	display:none;
	text-indent:0;
	margin:0;
	padding:0;
	background:white;
}
	#sc-main-nav ul li #secondary-nav li {
		display:block;
		border-bottom:1px solid gray;
		border-left:0;
		border-right:0;
		width:100%;
		margin-left:0;
		text-indent:0;
	}

	@media screen and (max-width: 520px) { /* extra small screen */
		#sc-main-nav ul li em {
			display:none;
		}
		#sc-main-nav ul li strong {
			font-size:1em;
		}
	}