Category: menu

Lists are a perfect example of good semantic code for accessibility. Dennis and guest host Ross Johnson from 3point7designs talk about the types of lists, the benefits of using them, and the ways they can be used. Also listen for a couple announcements about future shows.

Download Web Axe Episode 26 (Lists and Accessibility — How and Why?)

[Transcript of Web Axe 26]

Here’s sample code for a horizonal menu using list items:

#menu {
width: 100%;
background: #eee;
color: inherit;
padding-top:0;
border: 1px solid #666;
overflow: hidden;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menu ul li{
margin: 0;
padding: 0;
float: left;
}
#menu a {
display: block;
padding: 10px;
font-weight: bold;
text-decoration: none;
border-right: 1px solid #888;
}
#menu a:hover, #menu a:focus {
background-color:#ccc;
}