Ul li list help ~ vertical linked list

I am trying to create a list with vertical elements all contained within a link however I am having some cross-browser issues… things are seemingly fine in Chrome but off in Firefox.

I have uploaded an example here: http://www.tekulated.com/list.php

ul.item { margin: 0px; padding: 0px; position: relative; }
ul.item li { border-bottom: 1px solid #eee; }
ul.item li a { padding: 2px 0px; text-decoration: none; color: #777; display: block; }
ul.item li a:hover { text-decoration: none; color: #555; background: #fffcdf; }
ul.item ul { display: inline; }
ul.item ul li { border-bottom: none; }
ul.item ul ul {  }
ul.item li li { display: inline; position: absolute; left: 250px; }
<ul class="item">
<li><a href="#">Product One
<!-- problem here-->
<ul><li>Information
<ul><li>Price</li></ul>
</li></ul>
<!-- problem end here-->
</a></li>
<li><a href="#">Product Two</a></li>
<li><a href="#">Product Three</a></li>
<li><a href="#">Product Four</a></li>
</ul>

What am I doing wrong? ~ Obviously this is something to do with the inline display and/or the ul within a link…

Any help would be greatly appreciated, I’ve been pulling my hair out over this! :injured:

Thank you,
Dan

I just remembered of a clickable table row demo that was done by Erik J. some time ago.

Here is a simplified version of it.

You may want to consider using something like that since you really do have tabular data there. The drawback though is that the links don’t work if css is disabled.

Hi Dan,
Let’s take a different approach to your code. You are nesting the sub ULs’ in the anchor and that is invalid code. Anchors are inline elements and they cannot have block level elements nested within them. We can use a <b> element and a <span> to nest in the anchor, and then we can float them both left to keep them on the same line.

Give this a try :slight_smile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>List Test</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font:100&#37;/1.3 arial,helvetica,sans-serif;
    color:#777;
}
ol, ul { 
    margin:0;
    padding:0;
    list-style:none;
}
ul.item {
    margin:40px;
    font:12px/16px arial,helvetica,sans-serif;
}
.item li {
    float:left;/*kill whitespace in IE6/7 */
    width:100%;/*prevent shrinkwrapping*/
    border-bottom:1px solid #eee;
}
.item a {
    float:left;/*contain floated spans*/
    width:100%;/*prevent shrinkwrapping*/
    padding:2px 0;
    text-decoration:none;
    color:#777;
    cursor:pointer;
}
.item a:hover {
    color:#555;
    background:#fffcdf;
}
.item a b,
.item a span {
    float:left;
    width:250px;
}
.item a:hover b {
    color:#00F
}
.item a:hover span {
    color:#F00
}
</style>
</head>
<body>

<ul class="item">
    <li><a href="#">
            <b>Product One</b>
            <span>Information</span>
            <span>Price</span>
        </a>
    </li>
    <li><a href="#">
            <b>Product Two</b>
            <span>Information</span>
            <span>Price</span>
        </a>
    </li>
    <li><a href="#">
            <b>Product Three</b>
            <span>Information</span>
            <span>Price</span>
        </a>
    </li>
    <li><a href="#">
            <b>Product Four</b>
            <span>Information</span>
            <span>Price</span>
        </a>
    </li>
</ul>

</body>
</html>