Help with CSS Drop Down Menus

[linton]

I will be very thankful for a detailed instruction on how to create regular HTML pages for drop down menus.

I finally managed to gain a better understanding on how to create CSS drop down menus but I can't figure out how to create html pages with the links like we usually do. For instance, how do I create a page for Link Item #2 or 3 etc.

I am confused because the 'child links' are hidden etc.

 

I have tried the regular 'save as' way for creating a single link, done some searches and tried different things to no avail. Maybe, Am I trying too hard ...?

Here is a link to it, http://www.lookupyoursite.com/DropDownMenu/DropdownTest/drpdwntest1.html

 

Thanks in advance for your help.

Edited February 25, 2012 by linton

[newseed]

You will have a define styles for the second level (sub-level) to override the parent link.

 

Here's your style for the links as you have it now:

 

#navMenu ul li a {

color: #000000;

display: block;

font-family: "Comic Sans MS",cursive;

height: 30px;

text-align: center;

text-decoration: none;

width: 150px;

}

 

Based on this css this will style the parent and all sub-levels.

 

To style the sub-level differently you will need to create a new css like this:

 

#navMenu ul ul li a {

 

}

 

You will notice it is similar to the css I've posted earlier with the exception of a new ul. This will tell it to style to sub-level only. So if you want to change the color to be different from the parent link then you will simply just add your color to the new css:

 

#navMenu ul ul li a {

color: #ff0000;

}

 

This will change the sublevel links to red. Remember, only add what you want to change from the parent link.

[linton]

You will have a define styles for the second level (sub-level) to override the parent link.

 

Here's your style for the links as you have it now:

 

#navMenu ul li a {

color: #000000;

display: block;

font-family: "Comic Sans MS",cursive;

height: 30px;

text-align: center;

text-decoration: none;

width: 150px;

}

 

Based on this css this will style the parent and all sub-levels.

 

To style the sub-level differently you will need to create a new css like this:

 

#navMenu ul ul li a {

 

}

 

You will notice it is similar to the css I've posted earlier with the exception of a new ul. This will tell it to style to sub-level only. So if you want to change the color to be different from the parent link then you will simply just add your color to the new css:

 

#navMenu ul ul li a {

color: #ff0000;

}

 

This will change the sublevel links to red. Remember, only add what you want to change from the parent link.

 

Thanks for your answer. I did not state my question clearly. I have changed my question and I hope it is much clearer now.

Your comments has shown me that I can even style each link individually. The CSS life is not easy for a newbie like me.

[linton]

I finally figured it out. I recreated the drop down menus on a properly designed layout page, renamed the links and used the usual 'save as' method etc to create my pages and it turned out fine. It can be a bit confusing and it takes time to get used to for a newbie like me.