PDA

View Full Version : li with class trouble



cetbal
05-02-2009, 07:53 AM
Im working in a system that creates this code when i create a menu:

<div id="menu">
<div id="menucontainer">
<ul>
<li>Topcategory
<ul>
<li class="submeny1">Subcategory
<li class="submeny2">Subsubcategory</li>
<li class="submeny2">Subsubcategory</li>
<li class="submeny2">Subsubcategory</li>
</li>
<li class="submeny1">Subcategory</li>
<li class="submeny1">Subcategory</li>
<li class="submeny1">Subcategory</li>
</ul>
</li>
<li>Topcategory</li>
<li>Topcategory</li>
<li>Topcategory</li>
</ul>
</div>
</div>

Can someone help me figure out how to control the subcategory and the subsubcategory with css? Ive tried everything but I cant seem to control the classes?

ajhauser
05-02-2009, 08:44 AM
As far as CSS goes - you already have your classes for the seperate catagories. You can style each of those with CSS - is that what you are asking?

What CSS do you have already (if any)?

abduraooft
05-02-2009, 09:26 AM
If you are trying to make a drop down menu, http://htmldog.com/articles/suckerfish/dropdowns/ is a good resource to follow.

cetbal
05-02-2009, 10:06 AM
The thing is that i cant change the html code, its created by a cms. But ive tried to control it with css like this:




#menu {
color: #000000;
margin:0px;
background-color:#ffffff;
margin-left: 40px;
width: 560px;}

#menucontainer {
margin: 0;
padding: 0px;
font: 11px arial black, georgia, trebuchet ms;}

#menucontainer ul{
margin:0px;
padding: 0;
list-style-type: none;}

#menucontainer li{
margin: 0; }

#menucontainer a{
display: block;
color: #121D31;
background:url(menucontainerbg.png) transparent no-repeat;
width: 160px;
height: 19px;
margin-bottom: 12px;
padding:2px 0px 0px 24px;
text-decoration: none;
border-bottom: 0px dotted #ccc;}

#menucontainer li a.active{
background: url(active.png) transparent no-repeat;
text-decoration: none;
color: #000;
border-bottom: 0px dotted #bbb;
font-weight: bold;}


.submeny1 a{
display: block;
color: #9BA9B9;
background: url(subbg.png) transparent no-repeat;
padding:0px;
margin: 0px;
padding-left: 30px;
text-decoration: none;
border: 0px solid #ffffff;}

.submeny1 a.active{
background: url(subactive.png) transparent no-repeat;
text-decoration: none;
color: #ffffff;}


.submeny2 a{
display: block;
color: #9BA9B9;
background: url(subsubbg.png) transparent no-repeat;
padding:0px;
margin: 0px;
font: 10px arial, georgia, trebuchet ms;
padding-left: 30px;
text-decoration: none;
border: 0px solid #ffffff;}

.submeny2 a.active{
background: url(subactive.png) transparent no-repeat;
text-decoration: none;
color: #ffffff;}

abduraooft
05-02-2009, 10:11 AM
Can someone help me figure out how to control the subcategory and the subsubcategory with css? Ive tried everything but I cant seem to control the classes?

The thing is that i cant change the html code, its created by a cms. But ive tried to control it with css like this:Control? Your intention is still not clear!

cetbal
05-02-2009, 05:25 PM
Control? Your intention is still not clear!

I want to control the style of the subcategory and the subsubcategory, change color, size etc. But i cant find the right css code to do this, ive tried different code for the classes but it doesnt affect the style of the meny.