Menus et sous-menus Problème?

Question

Utilisation de la feuille de style CSS

Dans ma page Web, j'ai deux classes comme menu et leftside. Dans le menu, j'ai les classes ul, li. je veux utiliser un ul, li dans le côté gauche aussi, mais le problème est que si je l'ai utilisé ul, li, il a été le menu correspondant à ul, li

ul -underlist, li - Liste

J'ai essayé pour changer le code de la feuille,

mon code 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%; 
} 

Code 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, liste assortissent avec le menu ul, li

Comment résoudre ce problème. S'il vous plaît.

Answer 1

Pour réutiliser la quantité d'espace au-dessus de la liste interne, modifiez la pa dding pour le ul de sorte qu'il soit 0 ou négatif.

Par exemple:

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

Vous pouvez également utiliser une feuille de style spécial pour corriger le problème dans Internet Explorer en faisant quelque chose comme ceci:

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

Vous aurez alors besoin d'un second fichier CSS nommé iespecific.css qui a le style ul ci-dessus en elle.

Answer 2

Utilisez un ID pour faire la distinction entre les deux.

Par exemple le code HTML serait:

<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> 

Dans le CSS, vous auriez quelque chose comme ceci:

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

Cela ressemble à quelque chose comme ceci:

alt text http://img16.imageshack.us/img16/2376/examplesg.png