CSS Forum

**Arch_Angel_X** · 04-27-2007, 10:47 PM

Hi All,

I am trying to create this specific vertical list.

The challenge that I am having is trying to create the static sub menu BUT not the drop down like the usual drop down menu.

I have been trying to make it but so far nothing works

**vangogh** · 04-27-2007, 11:51 PM

If you can post some code or a link to the page if it's online somewhere it will be easier to help with specifics, but the general approach is going to be to nest one list inside another.

HTML Code:

<ul>
 <li>menu item 1</li>
 <li>menu item 2</li>
 <li>menu item 3
  </ul>
    <li>sub-menu item 1</li>
    <li>sub-menu item 1</li>
   </ul>
  </li>
 <li>menu item 4</li>
</ul>

**Arch_Angel_X** · 03:17 AM

Hi guys,thanks for the comments

I am having problem because the links that I want to be nesting is not nesting

also, I want most of my text go the right side little bit.

other than that I am trying to do anchor linking
for example, when I click to one of my button its go to the same page with tothe other but directly going to the bottom page/middle page

my html codes:

Code:

div id="navcontainer">
                <ul id="navlist">
                    <li id="active"><a href="#" id="current">Home</a></li>
                    <li><a href="#">Company Profile</a></li>
                    <li><a href="#">Properties for Sale</a></li>
                </ul>
                        <li><a href="#">Sydney</a></li>
                        <li><a href="#">Melbourne</a></li>
                        <li><a href="#">Brisbane</a></li>
                        <li><a href="#">Bali,Indonesia</a></li>
                        <li><a href="#">Re Sale</a></li>
                <ul id="navlist">
                    <li><a href="#">Commercial Properties</a></li>
                </ul>
                        <li><a href="#">Sydney</a></li>
                        <li><a href="#">Melbourne</a></li>
                        <li><a href="#">Bali</a></li>
                <ul id="navlist">
                    <li><a href="#">Location Maps</a></li>
                    <li><a href="#">Property Management</a></li>
                    <li><a href="#">Migration</a></li>
                    <li><a href="#">Finance</a></li>
                    <li><a href="#">Lawyer/Solitor</a></li>
                    <li><a href="#">Travel/Accomodation</a></li>
                    <li><a href="#">Calculators</a></li>
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Disclaimer</a></li>
                </ul>
            </div>

my css codes:

Code:

    #navcontainer
{
width: 173px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font:12px verdana, sans-serif;
background-color: #950014;
color: #333;
}

#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}


#navcontainer li a
{
display: block;
padding: 3px 3px 2px 0.1em;

background-color: #950014;
color: #fff;
text-decoration: none;
width: 100%;
}

 #navcontainer li a { width: auto; }

#navcontainer li a:hover
{

background-color: #cc6633;
color: #fff;
}

**chrishirst** · 04-29-2007, 07:14 AM

Quote:

because the links that I want to be nesting is not nesting

Thats because your sub cat <li> links are outside of the <ul>s

a few minutes playing time gets this

HTML Code:

 <div id="navcontainer">
                <ul>
                    <li id="active"><a href="#" id="current">Home</a></li>
                    <li><a href="#">Company Profile</a></li>
                    <li><a href="#">Properties for Sale</a></li>
<ul class="level_2">
                        <li><a href="#">Sydney</a></li>
                        <li><a href="#">Melbourne</a></li>
                        <li><a href="#">Brisbane</a></li>
                        <li><a href="#">Bali,Indonesia</a></li>
                        <li><a href="#">Re Sale</a></li>
</ul>
                </ul>
                <ul>
                    <li><a href="#">Commercial Properties</a></li>
                </ul>
<ul class="level_2">
                        <li><a href="#">Sydney</a></li>
                        <li><a href="#">Melbourne</a></li>
                        <li><a href="#">Bali</a></li>
</ul>
                <ul>
                    <li><a href="#">Location Maps</a></li>
                    <li><a href="#">Property Management</a></li>
                    <li><a href="#">Migration</a></li>
                    <li><a href="#">Finance</a></li>
                    <li><a href="#">Lawyer/Solitor</a></li>
                    <li><a href="#">Travel/Accomodation</a></li>
                    <li><a href="#">Calculators</a></li>
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Disclaimer</a></li>
                </ul>
            </div>

CSS Changes

HTML Code:

#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navcontainer ul.level_2 {
	text-indent:30px;
}

#navcontainer li a
{
display: block;
/*padding: 3px 3px 2px 0.1em;*/

background-color: #950014;
color: #fff;
text-decoration: none;
width: 100%;
}

/* #navcontainer li a { width: auto; }*/

#navcontainer li a:hover
{

background-color: #cc6633;
color: #fff;
}

http://www.candsdesign.co.uk/article...nordered-list/

you have several items with the same id of "navlist" only ONE element can have that ID, for several identically styles elements you should use class

Quote:

when I click to one of my button its go to the same page with tothe other but directly going to the bottom page/middle page

No idea we can't see the code you have used.
But I would suspect it's because that's where the only named anchor is.

A url would give us more of a chance.

**Arch_Angel_X** · 04-29-2007, 10:19 AM

Thanks Chris!

thats really help me a lot othe than that I tried to apply

Code:

#navcontainer li a:hover
                {

                    background-color: #cc6633;
                    }

but again its not working with the codes above.

hmmm what I am trying to said about "anchoring" for example:
I have 5 links but actually all off the links just go to one page but the only different things is link 1 after you clicked id going to the bottom of the page, link 2 is going to the middle of the page

I remembered it long time ago I can do it with dreamweaver but now, I am trying to learn more css and xhtml from the scratch

**vangogh** · 04-29-2007, 09:41 PM

If I'm understanding what you want on the page that the links go to you want to add an id or name parameter to elements on the page.

So for the the place you want people to get to in the middle of the page you need to add that attribute. It could be any xhtml element I think. I'll assume you have a level 2 heading. Your code would be

<h2 id="middle">Middle of the page heading</h2>

You can call the id anything you want.

In the menu your link would look like:

<a href="pathToThePage#middle">Link to middle of page</a>

The part you want to pay attention to is the #middle at the end. As long as it matches what you have on the other page it will work. It's called 'named anchors' if you want to look up more on it.

It's usually not the best though to use them in navigation like you are. It has a tendency to confuse people. Someone who clicks the link that takes them to the top of the page and then clicks the link to take them to the middle of the page won't necessarily realize they're on the same page.

Named anchors tend to get used more within one page. If you have a long page you might create an in page table of contents that uses them.

I'm not saying you shouldn't use them like you're planning, but I wanted to mention the possible confusion it can create.