CSS only menus
I have seen a few examples of this before, but none of them have ever really worked perfectly for me – so I created my own, as seen on this site’s drop downs. But then I was asked by my brother-in-law for some help doing something similar, but rather than use javascript, I stuck with CSS. Here’s how it works:
You use Lists to build the menu.
<div id="navigation">
<ul class="menu">
<li>Menu 1
<ul>
<li>SubMenu 1A</li>
<li>SubMenu 1B</li>
<li>SubMenu 1C</li>
<li>SubMenu 1D</li>
<li>SubMenu 1E
<ul>
<li>SubSubMenu 1Ei</li>
<li>SubSubMenu 1Eii</li>
<li>SubSubMenu 1Eiii</li>
<li>SubSubMenu 1Eiv</li>
</ul>
</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>SubMenu 2A</li>
<li>SubMenu 2B</li>
<li>SubMenu 2C</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>SubMenu 3A</li>
<li>SubMenu 3B</li>
<li>SubMenu 3C</li>
</ul>
</li>
</ul>
</div>Then in the CSS, you use the :hover pseudo element to trigger the display of the sub-menus.
#navigation {
background: blue;
position: relative;
z-index: 100;
top: 0px;
height: 32px;
color: white;
}
#navigation ul {
display: block;
margin: 0px;
padding: 0px;
text-indent: 0px;
height: 32px;
}
#navigation ul li {
display: block;
margin: 0px;
padding: 0px 10px;
text-indent: 0px;
height: 32px;
line-height: 32px;
float: left;
border-right: 1px solid white;
text-align: center;
}
#navigation ul li ul {
display: none;
width: 800px;
}
#navigation ul li:hover ul {
display: block;
position: absolute;
left: 0px;
}
#navigation ul li ul li {
}
#navigation ul li:hover ul li ul {
display: none;
}
#navigation ul li:hover ul li:hover ul {
display: block;
}Check out the demo to see how it all works.
It functions correctly in Firefox, IE7+, Safari, and Chrome. IE6 support will require the inclusion of IE7.js
About this entry
You’re currently reading “CSS only menus,” an entry on about:phalacee
- Published:
- 20 Nov 2009 at 10:57
- Tags:
- Code, css, design, development, Geek, html, menu, web, web design, web development
No comments
Jump to comment form | comments rss [?]