Hello,
I am trying to combine chapter 6 and 7 things to make a horizontal bar of
options with stylish rounded options that also has drop-down menu options. The
problem is that if if use something like:
<ul id="nav">
<li><a href="/empower/weblogic/createDataSource.jsp">Weblogic
Deployment</a></li>
<li><a href="/sasshare/">Share Administration</a></li>
<li><a href="/dax/">Rock Administration</a></li>
<li><a href="/gidb/">Moon Administration</a></li>
<li><a href="/outage/">Schedule Outage</a></li>
</ul>
The bar looks fine. But, if I use:
<div id="nav">
<ul>
<li><a href="/empower/index.jsp">Home</a></li>
</ul>
<ul class="level1">
<li class="submenu"><a href="">Profile</a>
<ul class="level2">
<li><a
href="/empower/weblogic/deleteProfile.jsp">Delete</a></li>
</ul>
</li>
</ul>
<ul class="level1">
<li class="submenu"><a href="">Datasource</a>
<ul class="level2">
<li><a
href="/empower/weblogic/createDataSource.jsp">Create</a></li>
<li><a
href="/empower/weblogic/deleteDataSource.jsp">Delete</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="/empower/weblogic/help.jsp">Help</a></li>
</ul>
</div>
The last item on the menu bar has a gray box outline. I do not know how to get
rid of the gray image outline (is that an image border?)
The css I use:
CHARSET "ISO-8859-1";
html, body {margin: 0; padding: 0; background: #FFF; color:#4A4344;
font-family: Verdana, Arial, sans-serif;
behavior: url(/empower/csshover.htc);
} /* WinIE behavior call */
h1 {
color: #FFF;
background: rgb(0%,56%,84%);
font: bold 200%/1em Arial, Verdana, sans-serif;
padding: 1em 1em 0; margin: 0;
border: 1px solid rgb(0%,31%,46%);
border-width: 2px 0;
}
#main {
font-size: small;
color: #AAA;
background: #FFF;
margin: 0;
padding: 2.5% 12.5%;
clear: left;
}
#nav {margin: 0; padding: 0;}
#nav li {
list-style: none; float: left;
margin-left: 1px; padding-left: 16px;
font-size: 10px; line-height: 20px; white-space: nowrap;
background: #BBB url('/empower/images/tabs2-big.gif') 0 100% no-repeat;
}
#nav a {
display: block; float: left; padding: 0 16px 0 0;
text-decoration: none; font-weight: bold;
background: #DDD url('/empower/images/tabs2-big.gif') 100% 100%
no-repeat;
color: #333;
width: .1em;
}
html>body #nav a {width: auto;} /* fixes IE6 hack */
/* Commented Backslash Hack hides rule from IE5-Mac hack \*/
#nav a {float: none;} /* End IE5-Mac hack */
#nav a:hover {color: rgb(62%,35%,22%);}
#nav #current, #nav #current a {
color: #FDB;
background-image: url('/empower/images/tabs2-big-ct.gif');
}
img{border-style: none;}
#ds table { margin: 0; padding: 0; width="100%"}
#ds td { font-weight: bold; font-size: 12px; align="right"; }
.cssform nbb {
font-variant:small;
color:#369;
background:#fff;
border:2px;
}
.cssform p{
width: 305px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}
.cssform label{
font-weight: bold;
font-size: 12px;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to
create some right margin*/
}
.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand
this attribute*/
width: 305px;
border: 1px solid gray;
}
.cssform input[type="password"]{ /*width of text boxes. IE6 does not understand
this attribute*/
width: 305px;
border: 1px solid gray;
}
.cssform textarea{
width: 250px;
height: 150px;
}
/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug:
http://www.positioniseverything.net/explorer/threepxtest.html
*/
* html .threepxfix{
margin-left: 3px;
}
div#nav h2 { font: 2em/1em "Times New Roman", serif; letter-spacing: 0.1em;
text-transform: lowercase; text-align: center;
margin: 1.25em 1em 0; padding: 0.5em 0.25em;
}
#content { margin: 0 2em 2.5em; padding: 1.5em;
border: 1px solid black;
background: url(/images/wildwind.jpg) 0 0 no-repeat;
}
#cpdefaults {
position: relative; top: 0px; left: 0px; wrap;
padding: 0.75em; border: 1px solid #600; border-width: 2px 1px 2px 1px;
}
#cpdefaults ul { list-style: none; margin: 1em; padding: 0; font-size: small; }
#cpdeftitle { text-decoration: underline; font-size: medium; font: Arial,
Verdana, Helvetica, sans-serif; }
/* drop down menu system */
div#nav { margin:0; padding: 0; float: left;
/* margin: -1px 0 0 7em; */
background: #FFF; border: 1px solid #AAA;
}
div#nav ul { margin: 0; padding: 0; background: white; border: 1px solid #CCC;
border-width: 0 1px; }
div#nav li {
list-style: none; float: left;
margin-left: 0px; padding-left: 0px;
margin-right: 0px; padding-right: 0px;
font-size: 10px; line-height: 20px; white-space: nowrap;
background: #BBB url('/empower/images/tabs2-big.gif') 0 100% no-repeat;
width: 10em;
position: relative;
line-height: 1em;
/* position: relative; list-style: none; margin: 0 float: left; width:
7em; line-height: 1em; */
}
div#nav li:hover {background: #EBB; }
div#nav li.submenu {background: url(/empower/images/dropmenu.gif) 95% 50%
no-repeat; }
div#nav li.submenu:hover { background-color: #EDD; }
div#nav li a {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 6.5em;
}
div#nav ul a { width: auto; }
div#nav ul ul { position: absolute; width: 7em; display: none; }
div#nav ul ul li { border-bottom: 1px solid #CCC; }
div#nav li.submenu li.submenu { background-image:
url(/empower/images/submenu.gif); }
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 { display:block; }
div#nav ul.level2 { top: 1.5em; left: -1px; }
div#nav ul.level3 { top: -1px; left: 7px; border-top: 1px solid #CCC;}
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
