Menus and sub Menus problem? - html

Question

Using CSS Style Sheet
In my web page, i have two class like menu and leftside. In menu i have the ul, li classes. i want to use a ul, li in left side also, but the problem is if i used the ul, li, it was matching with menu ul, li
ul -underlist, li - list
I tried to change the code of sheet,
my css code.
#leftside{
float: left;
width: 230px;
margin-left: 5px;
margin-top: 15px;
overflow: hidden;
font: 13px Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
color: maroon;
}
ul {
padding: 10px 10px 2px 0;
margin: 0px;
list-style: none;
}
li li {
margin-left: 10px;
margin-right: 10px;
line-height: 30px;
padding-left: 15px;
border-bottom: 1px dashed #BDBDBD;
background: url(images/img04.jpg) no-repeat left 50%;
}
Html Code
<li>
<ul>
<li>Company Profile</li>
<li>Enquiry</li>
<li>Career</li>
<li>Location Map</li>
</ul>
</li>
ul, list are matching with the menu ul, li
How to solve this issue. Please.

Answer 1

To reduse the amount of space above the inner list change the padding for the ul so that it is 0 or negative.
For Example:
ul {
padding: 0 10px 2px 0;
margin: 0px;
list-style: none;
}
You can also use a special style sheet to correct the problem in Internet Explorer by doing something like this:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
You would then need a second CSS file named iespecific.css which has the above ul styling in it.

Answer 2

Use an id to distinguish between the two.
For example the HTML would be:
<ul id="outter">
<li>The Outter List</li>
<li>More Outter List
<ul id="inner">
<li>This is the inner list</li>
<li>Company Profile</li>
<li>Enquiry</li>
<li>Career</li>
<li>Location Map</li>
</ul>
</li>
<li>Still The Outter</li>
</ul>
In the CSS you would have something like this:
#outter ul {
padding: 10px 10px 2px 0;
list-style: none;
}
#outter li {
margin-left: 10px;
line-height: 30px;
padding-left: 15px;
}
#inner ul {
padding: 10px 10px 2px 15px;
list-style: none;
}
#inner li {
margin-left: 10px;
margin-right: 10px;
line-height: 30px;
padding-left: 15px;
border-bottom: 1px dashed #BDBDBD;
background: url(images/img04.jpg) no-repeat left 50%;
}
This looks something like this:
alt text http://img16.imageshack.us/img16/2376/examplesg.png