Log in

View Full Version : Matt blacks menu


jmc92
10-23-2009, 09:31 PM
Ok I have this code




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 0px solid black; /*bottom horizontal line that runs beneath tabs*/
}

.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 3px; /*offset of tabs relative to browser left edge*/
font: bold 11px Verdana;
list-style-type: none;
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 3px 6px; /*padding inside each tab*/
border-right: 3px solid black; /*right divider between tabs*/
color: white;
background: #000000; /*background of tabs (default state)*/
}

.mattblacktabs li a:visited{
color: black;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: silver; /*background of tabs for hover state, plus tab with "selected" class assigned

to its LI */
}

</style>
<title></title>
</head>
<body>
<div class="mattblacktabs">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="apps.html">Apps</a></li>
<li><a href="games.html">Games</a></li>
<li><a href="../web/search.html">Search</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="chat.html">Chat</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</body>
</html>



How do I make this a multilevel menu?
bluewalrus
10-24-2009, 05:24 PM
Usually multi-level menus are

<ul>
<li><a href="">First category</a>
<ul>
<li><a href="">Sub Category one</a></li>
<li><a href="">Sub Category two</a></li>
</ul>
</li>
<li><a href="">Second category</a></li>
<li><a href="">Third category</a></li>
</ul>

Then some code to hide the second and any further unordered lists within a list item (i.e <ul><li><ul> for further subs <ul><li><ul><li><ul>).

Then in css


ul li ul {
visibility:hidden;
or
display:none;
or
position:absolute;
left:-999px;
}
ul li:hover ul {
visibility:visible;
or
display:block (maybe);
or
position:absolute;
left:auto;
}

I think that'd work...