Unordered list within an unordered list

[webuser123]

Hi all,

I have a page that has an unordered list within another list.. I would like to set the height on the mainlinks li only ( without affecting the height of the sublinks) but if I put a pixel height in ul.mainlinks li { border:1px solid #bfbfbf; }, it collapses all of the sublinks into an li of that height. How can I keep the mainlinks li and sublinks li height different? Thanks!!


<ul class="mainlinks">
<li><a href="#">Mainlink1</a></li>
<li><a href="#">Mainlink2</a></li>
<li class="selected"><a href="#">Mainlink3</a>

<ul class="sublinks">
<li class="selected"><a href="#">Sublink1</a></li>
<li><a href="#">Sublink2</a></li>
<li><a href="#">Sublink3</a></li>
<li><a href="#">Sublink4</a></li>
</ul>
</li>
</ul>


And here's the css --

ul {
margin: 0;
list-style: none;
padding: 0px;
font-size: 13px;
text-align: left;
}

ul.mainlinks li { border:1px solid #bfbfbf; }
ul li:hover, ul li.selected {
background: url(images/accordionItemActive.png) top repeat-x;
cursor: pointer;
}

ul li a, ul li a:hover {
font-weight: bold;
padding-left: 15px;
text-decoration: none;
color: #000;
}

ul li ul.sublinks {
border: 1px solid #f00;
padding-left: 30px;
padding-top: 10px;
}

ul li ul.sublinks li { border-bottom: none; height: 17px;}

ul li ul.sublinks li a { font-weight: normal; }
ul li ul.sublinks li a:hover { color: #ed8d2f; }

ul li ul.sublinks li:hover, ul li ul.sublinks li.selected {
background: none;
cursor: pointer;
}

[ryanbutler]

Do you mean?

ul.mainlinks li {line-height:1.8em; }

[webuser123]

thank you, yes that's what I meant.. I actually used line-height: 23px; and it did it for me...