5 replies [Last post]
Emma
Emma's picture
Offline
Enthusiast
Last seen: 2 years 13 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 148
Points: 34

Is it possible to create a list within a list...and make sections of it appear differently? How are these areas targeted??
Thanks for any info,

E

Here is what I have so far but it is not working properly...I have marked the different levels which have to be styled differently.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 9 years 37 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Well, you seem to have an

Well, you seem to have an extra space in ul id ="dropdownlist". I'd get rid of that. I'd also make sure you don't repeat IDs ( #'s ). Use classes if you need to repeat a box.

Many ways to style these lists.

Declare

ul#dropdownlist { declarations } ( declares styles for dropdownlist )
ul#dropdownlist ul#linelist { declarations } ( declares styles for linelist only when it follows dropdownlist )

#dropdown ul { declarations } ( declars styles for any ul within dropdown )
#dropdown ul ul { declarations } ( declares styles for any ul within a ul that is within dropdown )

This second method makes IDs and/or classes unnecessary entirely ( on the lists, that is ).

Emma
Emma's picture
Offline
Enthusiast
Last seen: 2 years 13 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 148
Points: 34

Thanks In the css I have

Thanks

In the css I have used targeting this way...but strangely despite 'list-style-type' being there I am still getting bullets on the level 2 ...here's the css, it's difficult to manipulate.

E

#dropdown { width: 260px; margin-top: 15px; font: bold 110% Arial, Helvetica, sans-serif; text-align:center; list-style-type:none; padding:0px; }

#droplist ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
text-decoration: none;
}

#droplist a
{
display: block;
list-style-type: none;
padding: 10px;
width: 160px;
background-color: #0099CC;
border-bottom: 1px solid #eee;
color: #fff;
text-decoration: none;
margin-top: 3px;
padding-left: 5px;
}

#droplist a:link, #navlist a:visited
{
color: #fff;
list-style-type: none;
}

#dropdown a:hover
{
background-color: #369;
color: #fff;
list-style-type: none;
}
#linelist{
margin-top: 0px;
font: bold 100% Arial, Helvetica, sans-serif;
list-style-type: none;
}
#linelist a
{
display: block;
background-color: #fff;
border: 1px solid #000;
font: bold 100% Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
width: 130px;
height: 10px;
list-style-type: none;
}

#linelist a:link, #navlist a:visited
{
color: #000;
text-decoration: none;
list-style-type: none;
}

#linelist a:hover
{
background-color: #999;
color: #fff;
}

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 9 years 37 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Try adding:

Try editing to:

ul#linelist{
margin-top: 0px;
font: bold 100% Arial, Helvetica, sans-serif;
list-style-type: none;
}

if that doesn't work try adding:

#dropdown ul ul { margin-top: 0px; font: bold 100% Arial, Helvetica, sans-serif; list-style-type: none; }

Emma
Emma's picture
Offline
Enthusiast
Last seen: 2 years 13 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 148
Points: 34

the first bit of code

the first bit of code worked!

Many thanks, greatly appreciated
Em

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 9 years 37 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Glad to help.

Glad to help.