/    Sign up×
Community /Pin to ProfileBookmark

Need help with nested list

Copy linkTweet thisAlerts:
Oct 27.2004

First of all: I’m from the Netherlands, so excuse my poor English.

Second: In the world of HTML & CSS I would consider myself a n00b. So maybe my problem is very easy to solve (I really hope so ?). I’ve worked with Dreamweaver and try to look at the code from time to time to see if I uderstand it. I sometimes do ?

I want to create a nested list for my new website, but stranded on some problems. I’ve used [URL=http://css.maxdesign.com.au/listamatic2/horizontal02.htm#]this[/URL] code. Put the HTML in the body of my nav-page, and the CSS in my style sheet. Then I tried to make a subitem for Item Two. But when I cope-paste the Item One code, the new Subitems (I renamed them) stand there. Problem is: they won’t go away, doesn’t matter what Item I click or rollover.

Of course I would like to see a menu like this: when I rollover Item One, I see the Subitems of Item One. When I rollover Item Two, I see the Subitems of Item Two, etc. Does anybody know what I should do? I tried to play with the HTML code, but I just don’t know enough of it to get it working.

Can anybody help?

Hope this makes sense to one of you… Thanks.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@DaveSWOct 27.2004 — If you paste the actual code you're working on in here maybe someone will be able to help.
Copy linkTweet thisAlerts:
@TimothyauthorOct 27.2004 — Well, the code is still the same as the original (as seen on the link in my message), because I don't know where to begine and what to do.

The original code:

HTML

<div id="navcontainer">

<ul id="navlist">

<li id="active"><a href="#" id="current">Item one</a>

<ul id="subnavlist">

<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>

<li><a href="#">Subitem two</a></li>

<li><a href="#">Subitem three</a></li>

<li><a href="#">Subitem four</a></li>

</ul></li>

<li><a href="#">Item two</a></li>

<li><a href="#">Item three</a></li>

<li><a href="#">Item four</a></li>

</ul>

</div>

CSS

#navcontainer { }

#navcontainer a { text-decoration: none; }

#navcontainer ul

{

padding: 0;

margin: 0;

list-style-type: none;

position: relative;

}

#navcontainer li { display: inline; }

/*1st level elements*/

#navcontainer ul

{

border-top: 1px solid #36c;

border-bottom: 1px solid #36c;

background-color: #36c;

padding: 2px 0;

margin-bottom: 2em;

}

#navcontainer li { margin: 0 0 0px; }

#navcontainer ul a,

#navcontainer ul a:link,

#navcontainer ul a:visited

{

background-color: #36c;

border: 1px solid #36c;

color: white;

padding: 0px 5px;

}

#navcontainer ul a:hover,

#navcontainer ul a:focus

{

background-color: #9CD4F7;

border: 1px solid black;

color: black;

}

/*current Link*/

#navcontainer ul a#current,

#navcontainer ul a#current:link,

#navcontainer ul a#current:visited { font-weight: bold; }

/*Second and subsequent levels*/

#navcontainer ul ul

{

font-size: 80%;

position: absolute;

top: 23px;

left: 0;

width: 100%;

border-top: none;

background-color: #95B1BB;

}

#navcontainer ul ul li { display: inline; }

#navcontainer ul ul a,

#navcontainer ul ul a:link,

#navcontainer ul ul a:visited

{

background-color: #95B1BB;

border: 1px solid #95b1bb;

color: black;

}

#navcontainer ul ul a:hover,

#navcontainer ul ul a:focus

{

background-color: #9CD4F7;

border: 1px solid black;

color: black;

}

/*current Link*/

#navcontainer ul ul a#subcurrent,

#navcontainer ul ul a#subcurrent:link,

#navcontainer ul ul a#subcurrent:visited { font-weight: bold; }
Copy linkTweet thisAlerts:
@FangOct 27.2004 — It sounds like you are attempting [URL=http://www.howtocreate.co.uk/tutorials/testMenu.html]pure CSS menus[/URL]
Copy linkTweet thisAlerts:
@TimothyauthorOct 27.2004 — I see that site's got some explanations, I'll look at them as soon as I get home. Then I hope I can decypher them and put it to use in my original code ('cause I just like the horizontal menu better ?)

Thanks, and I'll be sure to let you guys know if it succeded.

Greetz,

Timothy
Copy linkTweet thisAlerts:
@TimothyauthorOct 27.2004 — No matter what I try (and it's not much, I gotta be fair, because I wouldn't know whát to change) I just can't seem to get it right. This is the menu I want:

<html>

<head>

<title>Navigation</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="navcontainer">

<ul id="navlist">

<li id="active"><a href="#" id="current">All About Me</a>

<ul id="subnavlist">

<li id="subactive"><a href="#">Biografie</a></li>

<li><a href="#">Best Of...</a></li>

</ul>

</li>

<li id="active"><a href="#" id="current">Design</a>

<ul id="subnavlist">

<li id="subactive"><a href="#" id="subcurrent">2D</a></li>

<li><a href="#">Internet</a></li>

<li><a href="#">Projecten</a></li>

<li><a href="#">Comics</a></li>

</ul>

</li>

<li id="active"><a href="#" id="current">Muziek</a>

<ul id="subnavlist">

<li id="subactive"><a href="#" id="subcurrent">Biografie</a></li>

<li><a href="#">Discografie</a></li>

<li><a href="#">Pics</a></li>

</ul>

</li>

<li><a href="#">Links</a></li>

<li id="active"><a href="#" id="current">Contact</a>

<ul id="subnavlist">

<li id="subactive"><a href="#" id="subcurrent">Gastenboek</a></li>

<li><a href="#">Mailformulier</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

But you just see the last item Contact, with subitems Gastenboek & Mailformulier. I can't see any of the other subitems...

[IMG]http://img.photobucket.com/albums/v457/mopperkont/css.jpg[/IMG]

What am I doing wrong? ?
×

Success!

Help @Timothy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...