Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1336
  • Last Modified:

CSS navigation menu with sub menu

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
rowfei
Asked:
rowfei
3 Solutions
 
sajay_jCommented:
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
 
rowfeiAuthor Commented:
What should I edit the <li> values? Please help.
0
 
sajay_jCommented:
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
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
rowfeiAuthor Commented:
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
 
brundoCommented:
rowfei,

your menu is single-level menu. Do you want something like http://www.dynamicdrive.com/dynamicindex1/anylinkcss2.htm?
0
 
scrathcyboyCommented:
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
 
rowfeiAuthor Commented:
Thanks, all
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now