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 [cs...@lists.css-discuss.org] 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/