Меню и подменю проблема?

Question

Использование таблицы стилей CSS

На моей веб-странице у меня есть два класса, такие как меню и левая сторона. В меню есть классы ul, li. я хочу использовать ul, li и в левой части, но проблема в том, что если я использовал ul, li, он совпадает с меню ul, li

ul -underlist, li - список

Я пытался изменить код листа,

мой код CSS.

#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

<li>                    
<ul>
<li><a href="#">Company Profile</a></li>
<li><a href="#">Enquiry</a></li>
<li><a href="#">Career</a></li>
<li><a href="#">Location Map</a></li>
</ul>
</li>

ul, список совпадает с меню ul, li

Как решить эту проблему. Пожалуйста.

Answer 1

Чтобы уменьшить объем пространства над внутренним списком, измените отступ для ul, чтобы он был 0 или отрицательным.

Например:

ul {
    padding: 0 10px 2px 0;
    margin: 0px;
    list-style: none;
}

Вы также можете использовать специальную таблицу стилей для устранения проблемы в Internet Explorer, выполнив что-то вроде этого:

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->

Затем вам понадобится второй файл CSS с именем iespecific.css, в котором есть вышеуказанный стиль ul.

Answer 2

Используйте идентификатор, чтобы различать два.

Например, HTML будет:

<ul id="outter">
<li>The Outter List</li>
<li>More Outter List                    
  <ul id="inner">
   <li>This is the inner list</li>
   <li><a href="#">Company Profile</a></li>
   <li><a href="#">Enquiry</a></li>
   <li><a href="#">Career</a></li>
   <li><a href="#">Location Map</a></li>
  </ul>
</li>
<li>Still The Outter</li>
</ul>

В CSS у вас будет что-то вроде этого:

#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%;
}

Это выглядит примерно так:

альтернативный текст http://img16.imageshack.us/img16/2376/examplesg.png