Как я могу решить эту проблему - составление двух списков

Question

Я делаю сайт для виртуальной авиакомпании. У меня есть список, созданный для моего topnav div, но я хочу только обычный список для другого div, который я использую. Этот другой div, который я хочу использовать, - это вкладки jQuery. Проблема заключается в том, что он вызывает список, определяемый из .usual, который является основным div для вкладок jQuery, поэтому мой список не имеет точек и не работает как список, находясь в одной строке и нарушая формат.

.usual li { 
    list-style:none; 
    float:left; 
} 

HTML ...

<div class="usual"> 
    <ul class="idTabs"> 
    <li><a href="#idTab1" class="selected">Introduction</a></li> 
    <li><a href="#idTab2">Recruitment</a></li> 
    <li><a href="#idTab3">Management</a></li> 
    <li><a href="#idTab4">Operating Procedures</a></li> 
    <li><a href="#idTab5">Airline Rules & Policies</a></li> 
    </ul> 

    <div class="pilot_handbook" id="idTab1"> 
    <p>Hello there</p> 

    <br/> 
    <div class="msg-yellow"><strong>Tip:</strong> Navigate the handbook by the tabs on the top. These allow you to access different sections of the handbook.</div> 
    <br/> 

    </div> 

    <div class="pilot_handbook" id="idTab2"> 
    <p><strong>1.1 Testing<br /> 
    </strong><br /> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<ul class="basic_list"> 
    <li>Testing 1</li> 
    <li>Testing 2</li> 
    <li>Testing 3</li> 
</ul> 
    </div> 

Затем я попытался очищая стиль на .usual Ли, сделав класс на ул и делать это. Это, однако, не работает, и я немного потерял ...

.basic_list { 
    list-style-type: circle; 
    float: none; 
} 

Answer 1

Просто укажите класс idTabs в вашем селекторе:

.usual .idTabs li { 
    list-style:none; 
    float:left; 
} 

Answer 2

вместо:

.usual li { ... } 

Используйте :

.idTabs li { ... } 

Поскольку это больше специфичный для региона, который вы хотите создать.

Answer 3

Ваш <div class='usual'> не закрыт.

Редактировать для наглядности: Ваш div.usual охватывает оба списка, поэтому они получают стиль, который вы устанавливаете для списков внутри. Либо измените свой стиль только на один div, либо переместите второй список за пределами div.usual