How to put a DIV inside ul list?

HTML & CSS
1

I need your help,
I have a html code below:


<div id="leftmenu">
<ul>
<li><a href="#">INTRODUCTION</a></li>
<li class="focus"><a href="#">PRODUCTS</a></li>
	<div id="leftin"><ul>
		<li><a href="#">item 1</a></li>
		<li><a href="#">item 2</a></li>
		<li><a href="#">item 3</a></li>
		<li><a href="#">item 4</a></li>				
	</ul></div>
</ul>
</div>

and the CSS code is:


#leftmenu {
	background: url(../img/bg_leftmenu.jpg) #92c9dd repeat-x;
	padding: 5px 13px 5px 17px;
	font: 0.6em Century Gothic, "Times New Roman", Times, serif;
	font-weight: bold;
	line-height: 250%;	}
	
#leftmenu ul{
	width: 100%;
	list-style-type: none;		}
	
#leftmenu li{
	vertical-align: middle;
	border-bottom: 1px solid #5583a8;	}
	
#leftmenu .bottom{
	border-bottom: none;	}
	
#leftmenu li a{
	color: #fff;}
	
#leftmenu li a:hover{
	color: #db0000;}
	
#leftmenu .focus {
	background: transparent url("../img/bullet3.gif") no-repeat 0px 9px;
	padding-left: 7px;}

#leftin {
	width: 90%; float: left; clear: both;
	display: block;
	padding: 5px 0 2px 0px;
	font: 0.9em tahoma;
	letter-spacing: 0.1em; 	}
	
#leftin ul{
	border-bottom: 0;
	line-height: 200%;}
	
#leftin li{
	border-bottom: 0;
	line-height: 200%; padding-left: 5px;
	background: transparent url("../img/bullet1.gif") no-repeat 0px 8px;}

The problem is: Mozilla firefox doesn’t allow to show correctly, IE is very good. Pls tell me to fix it. Thanks.

2

Take the DIV out … you can’t put a block level element inside like that. Why not just apply the ID #leftin to the UL you are trying to apply the styles to?


<div id="leftmenu">
<ul>
<li><a href="#">INTRODUCTION</a></li>
<li class="focus"><a href="#">PRODUCTS</a></li>
	<ul id="leftin">
		<li><a href="#">item 1</a></li>
		<li><a href="#">item 2</a></li>
		<li><a href="#">item 3</a></li>
		<li><a href="#">item 4</a></li>				
	</ul>
</ul>
</div>
3

Thanks Tramp, but it doesn’t work. Here is the picture in I.E:

and in Firefox:

why??

4

Actually, you CAN put a block level element inside a list item. Why do you think nested lists validate? Lists are block level elements in and of themselves. So are DIV containers.

Nguyetquang, are you trying to create a dropdown menu with that code?  If you are, you will want to [check out a tutorial I wrote](http://www.sitepoint.com/forums/showthread.php?p=2975538#post2975538) here on the SitePoint forums that will show you how to create one.

Basically, as far as the HTML goes, you don’t need the <div> container in there (since the list is a block level element). All you have to do is reposition the closing LI tag so it comes AFTER the nested list.


    <div id="leftmenu">
   <ul>
   <li><a href="#">INTRODUCTION</a></li>
   <li class="focus"><a href="#">PRODUCTS</a></li>
   	<div id="leftin"><ul>
   		<li><a href="#">item 1</a></li>
   		<li><a href="#">item 2</a></li>
   		<li><a href="#">item 3</a></li>
 		<li><a href="#">item 4</a></li>				
   	</ul></div>
   </ul>
   </div>

is NOT valid HTML.


 <ul id="leftmenu">
  	<li><a href="#">INTRODUCTION</a></li>
  	<li class="focus"><a href="#">PRODUCTS</a>
  		<ul id="leftin">
 		 	<li><a href="#">item 1</a></li>
 		 	<li><a href="#">item 2</a></li>
 		 	<li><a href="#">item 3</a></li>
 		 	<li><a href="#">item 4</a></li>			 
  			</ul>
  		</li>
  </ul>

This, however IS valid HTML. One other thing I would do is type the links normally, and then style them with CSS so they all appear capitalized.


 <ul id="leftmenu">
  	<li><a href="#">Introduction</a></li>
  	<li class="focus"><a href="#">Products</a>
  			<ul id="leftin">
 		 	<li><a href="#">item 1</a></li>
 		 	<li><a href="#">item 2</a></li>
 		 	<li><a href="#">item 3</a></li>
 		 	<li><a href="#">item 4</a></li>			 
  			</ul>
  		</li>
  </ul>
   


   #leftmenu a {
   	text-transform: uppercase;
   }