Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS navigation menu with sub menu

Posted on 2008-06-17
7
Medium Priority
?
1,311 Views
Last Modified: 2013-11-19
Hi,
I am using the following codes for my nagivation menu. Now I would like to have sub menu under each nagivation menu. For example, if user click CSS Library then sub menu appears, such as CSS Library A, CSS LIbrary B.

http://www.dynamicdrive.com/style/csslibrary/item/image-marker-list-menu/

I would like to know what codes should I modified, just like attached scrrenshot of other website.

Thanks
Navigation.gif
0
Comment
Question by:rowfei
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 4

Expert Comment

by:sajay_j
ID: 21809848
If I got your problem clear;

You need to edit the <li> values;

<li><a href="http://www.dynamicdrive.com/" >Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Library</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM  Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li>      

Hope it would crack... Regards
Sajay.
0
 

Author Comment

by:rowfei
ID: 21809880
What should I edit the <li> values? Please help.
0
 
LVL 4

Accepted Solution

by:
sajay_j earned 1200 total points
ID: 21809887
Easy here;

Edit your values and hurray!!!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title></title>
<style type="text/css">
 
.markermenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 170px;
border: 1px solid #9A9A9A;
}
 
.markermenu li a{
background: white url(media/arrow-list.gif) no-repeat 2px center;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 20px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
}
 
 
* html .markermenu li a{ /*IE only. Actual menu width minus left padding of LINK (20px) */
width: 150px;
}
 
.markermenu li a:visited, .markermenu li a:active{
color: #00014e;
}
 
.markermenu li a:hover{
color: black;
background-color: #ffffcb;
background-image:url(media/arrow-list-red.gif); /*onMouseover image change. Remove if none*/
}
 
.markermenu li li a{
background: white url(media/arrow-list.gif) no-repeat 2px center;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 20px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
}
 
 
* html .markermenu li li a{ /*IE only. Actual menu width minus left padding of LINK (20px) */
width: 150px;
}
 
.markermenu li li a:visited, .markermenu li a:active{
color: #00014e;
}
 
.markermenu li li a:hover{
color: black;
background-color: #ffffcb;
background-image:url(media/arrow-list-red.gif); /*onMouseover image change. Remove if none*/
}
 
</style>
 
</head>
<body>
        <ul class="markermenu">
<li><a href="link here">Home</a></li>
<li><a href="link here">About us</a></li>
<li><a href="link here">Products</a>
<ul>
<li><a href="link here">A-Z list</a></li>
<li><a href="link here">Order Info</a></li>
<li><a href="link here">Order Form</a></li>
<li><a href="link here">All Products</a></li>
<li><a href="link here">New Products</a></li>		
</ul>
</li>
<li><a href="link here">Training</a></li>		
</ul>
</body>
</html>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:rowfei
ID: 21809966
Thanks, but how can I hide all submenu under products? I would like those submenu appears until user click? For example, if user click "Product," then A-Z, Order Info, ... appears.

Thanks
0
 
LVL 13

Assisted Solution

by:brundo
brundo earned 400 total points
ID: 21816750
rowfei,

your menu is single-level menu. Do you want something like http://www.dynamicdrive.com/dynamicindex1/anylinkcss2.htm?
0
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 400 total points
ID: 21836383
simply look at either www.dynamicdrive.com or dhtml-menu.com/

They have HUNDREDS of ready made, FREE, multi-level menus.  Don't try to reinvent the wheel.
0
 

Author Comment

by:rowfei
ID: 21837622
Thanks, all
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question