Hi All,
I have been pulling my hair out over this one (all five that are left :)) I
have been working on the following css for 2 days now. Its a modification of
the Suckerfish Drop down menu over at A List Apart. I have been trying to
set it up without fixed widths on the menu's or top level li's, and have
been relatively successful. The css and XHTML below works perfectly in Opera
and IE, but there is a problem in Firefox, namely the link text pokes out of
the side of the sub-menus, not being enclosed in the ul.
I've fiddled with this every way i can think of with no success, I'm hoping
a fresh pair of eyes will see what i'm missing. Sample markup as follows.
XHTML:
<div id="nav-div">
<ul id="mainmenu" class="clearfix">
<li class="off"><a href="/pcmanager/admin/default.asp">Home</a></li>
<li class="off"><a
href="/pcmanager/admin/domains/list_overdue.asp"><span>View
Property</span></a>
<ul>
<li><a href="list_full.asp" title="View Full List">View - NOT in
Dutch</a></li>
<li><a href="list_overdue.asp" title="View Overdue Payments">View - NOT in
German</a></li>
<li><a href="client_list.asp">View - Special offers</a></li>
<li><a href="client_list.asp">View - DeLuxe</a></li>
<li><a href="client_list.asp">View - Local</a></li>
<li><a href="client_list.asp">View - status</a></li>
<li><a href="client_list.asp">View - Owner</a></li>
</ul>
</li>
<li class="off"><a href="/property/default.asp">Manage Property</a>
<ul>
<li><a href="/property/propAddEng.asp" title="Add a new property">Add
Property</a></li>
<li><a href="/property/propEdit.asp" title="Edit a property">Edit
Property</a></li>
<li><a href="/property/propDelete.asp" title="Delete a property">Delete
Property</a></li>
<li><a href="/property/propSearch.asp" title="Search property">Search
Property</a></li>
</ul>
</li>
<li class="on"><a href="/countries/default.asp"><span>Manage
Areas</span></a>
<ul>
<li><a href="/countries/listAll.asp" title="View all countries">View all
countries</a></li>
<li><a href="/countries/addArea.asp" title="Add a new country/area">Add a
new country/area</a></li>
<li><a href="/countries/listAll.asp" title="Go to month view">Edit a
country/area</a></li>
<li><a href="/countries/listAll.asp" title="Go to month view">Delete a
country/area</a></li>
</ul>
</li>
<li class="off"><a href="/admin/invoices/default.asp"><span>Manage
categories</span></a>
<ul>
<li><a href="default.asp" title="View Open Invoices">Add sub
category</a></li>
<li><a href="list_all.asp" title="View All Invoices">Edit sub
categories</a></li>
<li><a href="list_all.asp" title="View All Invoices">Delete sub
categories</a></li>
</ul>
</li>
<li class="off"><a href="/admin/clients/default.asp"><span>Manage
Currency</span></a></li>
<li class="off"><a href="/admin/quotes/default.asp"><span>Manage
dates</span></a></li>
</ul>
</div>
CSS:
/* Top level menu appearance */
#nav-div {
background: #8dc63f url(images/nav_bg.gif) repeat-x top left;
border-bottom: 1px solid #7db52e;
border-left: 1px solid #7db52e;
border-right: 1px solid #7db52e;
}
#nav-div a {
color:#fff;
font-size:1.1em;
text-decoration: none;
}
#mainmenu {
margin: 0 0 0 10px;
padding: 0;
border: none;
}
#mainmenu li {
float:left;
margin: 0;
position:relative;
margin-bottom:-1px;
}
#mainmenu li a {
display:block;
padding: 5px 10px 5px 0.5em;
}
* html #mainmenu li a {
float:left;
}
/* current section top level styling */
#mainmenu li.on a {
background:#fff url(images/on_nav_bg.gif) repeat-x top left;
color:#000;
border-bottom: 1px solid #fff;
}
#mainmenu li.on a:hover {
color:#567eb9;
}
/* === Sub menu general appearance === */
#mainmenu li ul {
/*display: none;*/
position: absolute;
z-index:6000;
top: 100%;
left: 0;
border-style: solid;
border-color:#8dc63f #ccc #ccc #ccc;
border-width:5px 1px 5px 1px;
background:#fff url(images/on_nav_bg.gif) repeat-x top left;
}
#mainmenu li>ul {
top: auto;
left: auto;
}
#mainmenu li li {
display: block;
float: none;
clear:both;
overflow:auto;
background-color: transparent;
border: 0;
}
#mainmenu li li a {
display: block;
float:none;
white-space:nowrap;
color:#517322;
border-bottom: 1px solid #fff;
}
* html #mainmenu li li a {
float:left;
}
#mainmenu li li a:hover {
color:#567eb9;
}
/* current section sub menu styling */
#mainmenu li.on ul {
border-style: solid;
border-color:#8dc63f #ccc #ccc #ccc;
border-width:5px 1px 5px 1px;
background:#fff url(images/on_nav_bg.gif) repeat-x top left;
}
#mainmenu li.on li a {
background:transparent;
}
/* Rollover */
#mainmenu li:hover ul, li.over ul {
display: block;
}
Any insight would be very much appreciated on this. Thanks in advance,
Colin
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
