Forum Moderators: not2easy
here is the css for my menu drop downs. Can anyone tell me if they see a problem? Right now the menus are stacked on top of each other. I tried to do a
margin: 5px;
but that didn't do it.
I am new to CSS so please excuse my sloppy code(and lack of knowledge)
/*links start here*/
#menu {
position: relative;
width: 69%;
background: #fdf8f2;
float: left;
padding: 0 0 0 0;
}
#menu ul {
position: absolute;
top: -.7em;
list-style: none;
margin: 0;
padding: 0;
float: left;
}
#menu ul li {
position: absolute;
top: 0em;
float: left;
width: 100%;
}
#menu ul li a {
height: 1%;
position: absolute;
top: 0em;
}
#menu a, #menu h2 {
position: absolute;
top: 0em;
font: bold 11px/16px arial, helvetica, sans-serif;
text-align: center;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
position: absolute;
top: 0em;
/*to set background color of link buttons*/
background: #0099ff;
text-transform: uppercase;
}
#menu a {
position: absolute;
top: 0em;
color: #000;
background: #efefef;
text-decoration: none;
width: 12em;
}
#menu a:hover {
position: absolute;
top: 0em;
color: #a00;
background: #dddddd;
}
#menu li {
top: 0em;
position: absolute;
}
#menu ul ul {
position: absolute;
z-index: 500;
top: 0em;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="text/html; charset=utf-8 htm8" />
<link rel="stylesheet" type="text/css" href="troubleshoot.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header-bottom">
<p id="tagline">Herzlich Willkommen</p>
<div id="menu">
<ul>
<li>
<h2>link 1</h2>
<ul>
<li><a href="" title="">drop down 1</a></li>
<li><a href="" title="">drop down 1</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<h2>link 2</h2>
<ul>
<li><a href="" title="">drop down 2</a></li>
<li><a href="" title="">drop down 2</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<h2>link 3</h2>
<ul>
<li><a href="" title="">dropdown 3</a></li>
<li><a href="" title="">dropdown 3</a></li>
</ul>
</li>
</ul>
</div><!-- menu -->
</div><!-- header bottom -->
</div><!-- header -->
</div><!-- wrapper -->
</body>
</html>
body {
margin: 0;
padding: 0;
background-color: #0099FF;
color: #fdf8f2;
background-repeat: repeat-x;
font: small Arial, Helvetica, Verdana, sans-serif;
font-size: 100%;
}
/*links start here*/
#menu {
position: relative;
width: 69%;
background: #fdf8f2;
float: left;
padding: 0 0 0 0;
}
#menu ul li {
position: absolute;
top: 0em;
float: left;
width: 100%;
}
#menu a, #menu h2 {
position: absolute;
top: 0em;
font: bold 11px/16px arial, helvetica, sans-serif;
text-align: center;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
Some more information: When specifying a zero value, you don't need to include units.
Variable (percentage) widths/heights are not a very good idea due to the fact that they can get too small if the browser window/resolution isn't big enough to fit the content. It also doesn't take advantage of larger windows/resolutions.
If you add max and min widths, then it's not a problem, and adds a nice effect... but support for min and max width isn't the best right now... you'll need to use javascript to fix it for IE6 for instance.
