• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 658
  • Last Modified:

css for vertical menu with a max of 6 sub menu

hey guy i need css for a menu while goes like this

Product
    |
Sub one  ------------------    Product
    |
Sub two
   |


but i need the width  is unkown and i could have up to 6 sub menu

please help with sum css
0
JCWEBHOST
Asked:
JCWEBHOST
  • 11
  • 9
  • 5
1 Solution
 
Julian HansenCommented:
Is the menu a horizontal menu with drop downs for the subs and flyout for the product or is it a vertical menu with a flyout to the right?
0
 
JCWEBHOSTAuthor Commented:
drop downs for the subs and flyout  but i do not need javascript

i am using

css menu
0
 
Julian HansenCommented:
Here is something to start with

<!doctype html>
<html>
<head>
<title>CSS menu</title>
<style type="text/css">
.container {

}
.header {
	height: 20px;
}
a {
  text-decoration: none;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 20px;
}
ul ul {
	display: none;
}
ul.nav li {
	float: left;
	width: auto;
	background: #ffeeee;
}
ul.nav li a {
	display: block;
	line-height: 18px;
	padding: 0 8px;
}
ul.nav ul {
	background: #ffffaa;
}
ul.nav ul li {
	float: none;
	position: relative;
	background: #e0e0e0;
}
ul.nav ul ul {
	position: absolute;
	left: 100%;
	top: 0;
	width: auto;
	white-space: nowrap;
}
ul.nav ul ul li {
	background: #ffffaa;
}
ul.nav li:hover > ul {
	display: block;
}
</style>
<body>
<div class=".container">
	<div class=".header">
		<ul class="nav">
			<li><a href="#">Home</a></li>
			<li><a href="#">Product</a>
				<ul>
					<li><a href="#">Sub 1</a></li>
					<li><a href="#">Sub 2</a>
						<ul>
							<li><a href="#">Sub 2 product 1</a></li>
							<li><a href="#">Sub 2 product 2</a></li>
							<li><a href="#">Sub 2 product 3</a></li>
						</ul>
					</li>
					<li><a href="#">Sub 2</a></li>
				</ul>
			</li>
			<li><a href="#">Contact</a></li>
			<li style="display: none; clear: both"></li>
		</ul>
	</div>
</div>
</body>
</html>

Open in new window

0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
Kyle HamiltonData ScientistCommented:
here is the most basic implementation of a vertical menu tree, with as many leafs as you please:

http://candpgeneration.com/EE/css-vert-menu.html

ul{
                margin:0;
                padding:0;
            }
            .Menu li{
                position:relative;
                width:250px;
                display:block;
                background-color:#eee;
                border-top:1px solid white;
                border-bottom:1px solid white;
                padding:0;
                margin:0;
                list-style: none;
            }
            .Menu ul{
                display:none;
                position:absolute;
                left:250px;
                top:-1px; /* accommodate the border */
            }
            .Menu li a{
                display:block;
                padding:5px;
                margin:3px;
            }
            .Menu li:hover{
                background-color: #ccc;
            }
            .Menu li:hover > ul{
                display:block;
            }         

Open in new window


you can of course enhance to your heart's content, with arrows, colors, etc....
0
 
Kyle HamiltonData ScientistCommented:
here's an enhanced version - (I was bored):

http://candpgeneration.com/EE/css-vert-menu-2.html

:)
0
 
JCWEBHOSTAuthor Commented:
menu
hey this code is great but i need the first ul to start under?

it must go products and under must be the ul

ul{
                margin:0;
                padding:0;
            }
            .Menu li{
                position:relative;
                width:250px;
                display:block;
                background-color:#eee;
                border-top:1px solid white;
                border-bottom:1px solid white;
                padding:0;
                margin:0;
                list-style: none;
            }
            .Menu ul{
                display:none;
                position:absolute;
                left:250px;
                top:-1px; /* accommodate the border */
            }
            .Menu li a{
                display:block;
                padding:5px;
                margin:3px;
            }
            .Menu li:hover{
                background-color: #ccc;
            }
            .Menu li:hover > ul{
                display:block;
            }
0
 
JCWEBHOSTAuthor Commented:
hey why do when i hover over mig process all the sub menu open?

sub open
0
 
Julian HansenCommented:
Just to point out the original questions said

but i need the width  is unkown and i could have up to 6 sub menu

Menu li{
                position:relative;
                width:250px; <==== Breaks the requirement
                display:block;
                background-color:#eee;
                border-top:1px solid white;
                border-bottom:1px solid white;
                padding:0;
                margin:0;
                list-style: none;
            }

Open in new window

0
 
JCWEBHOSTAuthor Commented:
but i need the first ul to go under and why is when i hover over the third sub menu all the sub menu open?

how can i fix it?
0
 
Julian HansenCommented:
Did you try the code I posted earlier?
0
 
JCWEBHOSTAuthor Commented:
i am using this code

.Menu
{
      font-family: 'Open Sans' , sans-serif;
      font-size: 12px;
      padding: 0px;
      margin: 0px;
}

.Menu ul
{
      margin: 0;
      padding: 0;
}
           
.Menu li
{
      position: absolute;
      width: 200px;
      display: block;
      background-color: #eee;
      border-top: 1px solid white;
      border-bottom: 1px solid white;
      padding: 0;
      margin: 0;
      list-style: none;
}

.Menu ul li ul
{
      display: none;
      position: absolute;
      left: 0px;
      top: 35px; /* accommodate the border */
}

.Menu ul li ul li ul li ul
{
      display: none;
      position: absolute;
      left: 200px;
      top: -1px; /* accommodate the border */
}

.Menu li a
{
      display: block;
      padding: 5px;
      margin: 3px;
}

.Menu li:hover
{
      background-color: #ccc;
}

.Menu li:hover > ul
{
      display: block;
}  

but when i hover over the third menu all the sub menu open
0
 
Kyle HamiltonData ScientistCommented:
it's probably something in the html. post your html.

@julianH:
width:250px; <==== Breaks the requirement

so change the width to something smaller - I can't know the exact page dimensions!
0
 
Kyle HamiltonData ScientistCommented:
here's a revised menu with the first list spread horizontally:

http://candpgeneration.com/EE/css-vert-menu-2.html

if you follow the path in the screen shot, that is where I added more submenus.

6 levels of menuSide note: There is a peice of javascript that is commented out - you DONT need it. But if you wanted to you could use it to display arrows for just the items that have submenus.
0
 
JCWEBHOSTAuthor Commented:
ok and the css?
0
 
Julian HansenCommented:
@kozaiwaniec
so change the width to something smaller - I can't know the exact page dimensions!

My point was that the original post implied that he did not want to have to define or be constrained to a fixed width.

My earlier post does not require width to be set - it auto-sizes the menus based on content.
0
 
Kyle HamiltonData ScientistCommented:
It's in the source. Always view the source. :)

Here's the whole page. Like I said, you don't need the js, but it's there if you want it:

<!doctype html>
<html>
    <head>
        <title>CSS menu</title>
        <script>
            function addArrow (){
                var $el = document.getElementsByTagName("li");
                
                if(typeof $el != "undefined"){
                    for(var i = 0, l = $el.length; i < l; i++){
                        
                        var uls = $el[i].getElementsByTagName("ul");
                        console.log(uls);
                        
                        for(var j = 0, h = uls.length; j < h; j++){
                            get_prevSibling(uls[j]).className = "parent";
                        }
                        
                    }
                }
            };
            function get_prevSibling(n) {
                var y = n.previousSibling;
                while (y.nodeType!=1){ // loop until Node.ELEMENT_NODE == 1 is found
                    y = y.previousSibling;
                    }
                return y;
            }
       
        
            window.onload = function(){
                addArrow();
            }
        </script>
        <style type="text/css">
            .nav a{
                text-decoration: none;
                text-transform: uppercase;
                color:#333;
                font-family: geneva, sans-serif;
                font-size:14px;
            }
            
            .nav ul, .nav li{
                margin:0;
                padding:0;
            }
            .menu > li{
                float:left;
            }
            .menu li{
                position:relative;
                width:170px;
                display:block;
                background:#eee;
                border-top:1px solid white;
                border-bottom:1px solid white;
                list-style: none;
                
                -webkit-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;
                -ms-transition: all 0.3s ease;
                transition: all 0.3s ease;

            }
            .menu ul{
                display:none;
                position:absolute;
            }
            .menu ul ul{
                left:170px;
                top:-1px;
            }
            
            .menu li a{
                display:block;
                padding:7px 7px 2px;
                margin:3px;
                -webkit-transition: all 0.5s ease;
                -moz-transition: all 0.5s ease;
                -o-transition: all 0.5s ease;
                -ms-transition: all 0.5s ease;
                transition: all 0.5s ease;
            }
            .menu li:hover{
                background-color: #ccc;
            
            }
            .menu li:hover > a{
                background-color: yellowgreen;
                color:darkslategray;
            }
            
            .menu li:hover > ul{
                display:block;
            }
            .parent{
                background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAUCAYAAABWMrcvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDI3NkI3QTlENkJGMTFFMUJGRTg5MzBDRDYwNkY2QUEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDI3NkI3QUFENkJGMTFFMUJGRTg5MzBDRDYwNkY2QUEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0Mjc2QjdBN0Q2QkYxMUUxQkZFODkzMENENjA2RjZBQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0Mjc2QjdBOEQ2QkYxMUUxQkZFODkzMENENjA2RjZBQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pj1JbwwAAACNSURBVHjalNPfCkAwFMfxM8/ChRvcuVA8g2cmuZIX4E00v8lqtD/nrL4Z9alZG2mtCVXvk5WdaAl0ERv+EQv6UBKGUBTGUBCmkBdykBm1i9QjYSk9lJ1kxBuH+8JBMxo/XyL/dKEN9ZKNOFEp2fIVFUhx0YIGyTEyS2okB3ZHueRqTKiTXsJWct1vAQYAvmjcHUntj7AAAAAASUVORK5CYII=');
                background-position: right center;
                background-repeat:no-repeat;
            }
        </style>
    <body>
        <div class="nav">
        <ul class="menu">
            <li>
                <a href="/cssadapters/GenericPage.aspx?goto=Products"title="Products">
                    Products</a>
                <ul>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=ProductsWindows" title="Windows">
                            Windows</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=ProductsOffice" title="Office">
                            Office</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=ProductsBusinessSolutions" title="Business Solutions">
                            Business Solutions</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=ProductsServers" title="Servers">
                            Servers</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=ProductsDeveloperTools" title="Developer Tools">
                            Developer Tools</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=ProductSubscriptions" title="Subscriptions">
                            Subscriptions</a>
                        <ul>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=ProductsSubscriptionsSoftware" title="Software">
                                    Software</a>
                            </li>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=ProductsSubscriptionsManageYourProfile" title="Manage Your Profile">
                                    Manage Your Profile</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=ProductsMore" title="More">
                            More</a>
                        <ul>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=ProductsMobileDevices" title="Mobile Devices">
                                    Mobile Devices</a>
                            </li>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=ProductsGamesXbox" title="Games and Xbox">
                                    Games and Xbox</a>
                            </li>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=ProductsHardware" title="Hardware">
                                    Hardware</a>
                            </li>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=ProductsMSN" title="MSN">
                                    MSN</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="/cssadapters/GenericPage.aspx?goto=Legal" title="Legal">
                    Legal</a>
                <ul>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=LegalLicense" title="License">
                            License</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=LegalTerms" title="Terms of Use">
                            Terms of Use</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=LegalPrivacy" title="Privacy">
                            Privacy</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="/cssadapters/GenericPage.aspx?goto=Support" title="Support">
                    Support</a>
                <ul>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=SupportLifecyclePolicies" title="Support Lifecycle and Policies">
                            Lifecycle and Policies</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=SupportContact" title="Contact Support">
                            Contact Support</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=SupportThirdPartyProviders" title="Third-Party Services">
                            Third-Party Services</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=Research" title="Research">
                            Research</a>
                        <ul>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=SupportProductCenters" title="Product Support Centers">
                                    Product Info</a>
                                <ul>
                                    <li>
                                        <a href="/cssadapters/GenericPage.aspx?goto=SupportProductCenters" title="Product Support Centers">
                                            Product Info</a>
                                        
                                    </li>
                                    <li>
                                        <a href="/cssadapters/GenericPage.aspx?goto=SupportKnowledgeBase" title="Knowledge Base">
                                            Knowledge Base</a>
                                    </li>
                                    <li>
                                        <a href="/cssadapters/GenericPage.aspx?goto=SupportCommunitiesNewsgroups" title="Communities and Newsgroups">
                                            Communities</a>
                                    </li>
                                    <li>
                                        <a href="/cssadapters/GenericPage.aspx?goto=SupportITProfessionals" title="Support for IT Professionals">
                                            IT Pros</a><ul>
                                            <li>
                                                <a href="/cssadapters/GenericPage.aspx?goto=SupportProductCenters" title="Product Support Centers">
                                                    Product Info</a>
                                                
                                            </li>
                                            <li>
                                                <a href="/cssadapters/GenericPage.aspx?goto=SupportKnowledgeBase" title="Knowledge Base">
                                                    Knowledge Base</a>
                                            </li>
                                            <li>
                                                <a href="/cssadapters/GenericPage.aspx?goto=SupportCommunitiesNewsgroups" title="Communities and Newsgroups">
                                                    Communities</a>
                                            </li>
                                            <li>
                                                <a href="/cssadapters/GenericPage.aspx?goto=SupportITProfessionals" title="Support for IT Professionals">
                                                    IT Pros</a>
                                            </li>
                                            <li>
                                                <a href="/cssadapters/GenericPage.aspx?goto=SupportDevelopers" title="Support for Developers">
                                                    Developers</a>
                                                <ul>
                                                    <li>
                                                        <a href="/cssadapters/GenericPage.aspx?goto=SupportProductCenters" title="Product Support Centers">
                                                            Product Info</a>
                                                    </li>
                                                    <li>
                                                        <a href="/cssadapters/GenericPage.aspx?goto=SupportKnowledgeBase" title="Knowledge Base">
                                                            Knowledge Base</a>
                                                    </li>
                                                    <li>
                                                        <a href="/cssadapters/GenericPage.aspx?goto=SupportCommunitiesNewsgroups" title="Communities and Newsgroups">
                                                            Communities</a>
                                                    </li>
                                                    <li>
                                                        <a href="/cssadapters/GenericPage.aspx?goto=SupportITProfessionals" title="Support for IT Professionals">
                                                            IT Pros</a>
                                                    </li>
                                                    <li>
                                                        <a href="/cssadapters/GenericPage.aspx?goto=SupportDevelopers" title="Support for Developers">
                                                            Developers</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="/cssadapters/GenericPage.aspx?goto=SupportDevelopers" title="Support for Developers">
                                            Developers</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=SupportKnowledgeBase" title="Knowledge Base">
                                    Knowledge Base</a>
                            </li>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=SupportCommunitiesNewsgroups" title="Communities and Newsgroups">
                                    Communities</a>
                            </li>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=SupportITProfessionals" title="Support for IT Professionals">
                                    IT Pros</a>
                            </li>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=SupportDevelopers" title="Support for Developers">
                                    Developers</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=Downloads" title="Downloads">
                            Downloads</a>
                        <ul>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=DownloadsWindowsUpdate" title="Windows Update">
                                    Windows Update</a>
                            </li>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=DownloadsOfficeUpdate" title="Office Update">
                                    Office Update</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=Learning" title="Learning">
                            Learning</a>
                        <ul>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=LearningBooks" title="Books">
                                    Books</a>
                            </li>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=LearningTraining" title="Training">
                                    Training</a>
                            </li>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=LearningCertification" title="Certification">
                                    Certification</a>
                            </li>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=LearningEvents" title="Events">
                                    Events</a>
                            </li>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=LearningWebcasts" title="Webcasts">
                                    Webcasts</a>
                            </li>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=LearningPatternsPractices" title="Patterns and Practices">
                                    Patterns and Practices</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=SupportSubscriptions" title="Subscriptions">
                            Subscriptions</a>
                        <ul>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=SupportSubscriptionsNewsletters" title="Newsletters">
                                    Newsletters</a>
                            </li>
                            <li>
                                <a href="/cssadapters/GenericPage.aspx?goto=SupportSubscriptionsManageYourProfile" title="Manage Your Profile">
                                    Manage Your Profile</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="/cssadapters/GenericPage.aspx?goto=Just for You" title="Just for You">
                    Just for You</a>
                <ul>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=JustForYouHomeUsers" title="Home Users">
                            Home Users</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=JustForYouMacintoshUsers" title="Macintosh Users">
                            Macintosh Users</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=JustForYouITProfessionals" title="IT Professionals (TechNet)">
                            IT Professionals</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=JustForYouDevelopersMSDN" title="Developers (MSDN)">
                            Developers (MSDN)</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=JustForYouPartners" title="Partners">
                            Partners</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=JustForYouSmallBusinesses" title="Small Businesses">
                            Small Businesses</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=JustForYouLargeBusinesses" title="Large Businesses">
                            Large Businesses</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=JustForYouGovernment" title="Government">
                            Government</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=JustForYouEducators" title="Educators">
                            Educators</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=JustForYouJournalists" title="Journalists">
                            Journalists</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="/cssadapters/GenericPage.aspx?goto=About" title="About">
                    About</a>
                <ul>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=AboutAccessibility" title="Accessibility">
                            Accessibility</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=AboutCareers" title="Careers">
                            Careers</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=AboutCommunityAffairs" title="Community Affairs">
                            Community Affairs</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=AboutDiversity" title="Diversity">
                            Diversity</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=AboutInvestorRelations" title="Investor Relations">
                            Investor Relations</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=AboutResearch" title="Research">
                            Research</a>
                    </li>
                    <li>
                        <a href="/cssadapters/GenericPage.aspx?goto=AboutSecurityPrivacy" title="Security and Privacy">
                            Security and Privacy</a>
                    </li>
                </ul>
            </li>
        </ul>

        </div>
    </body>
</html>

Open in new window


That big narly string of numbers is the arrow. Again, you can use a plain image instead if you want.
0
 
Kyle HamiltonData ScientistCommented:
If you want to support IE7, you'll need a small fix for the way it renders margins, which creates a gap between the items, and causes flickers.

No matter what code you use, you will always be fixing IE crap - so I don't even want to hear any complaints! :)

Let me know and I can supply it for you.
0
 
Kyle HamiltonData ScientistCommented:
Here is a tutorial for multilevel CSS drop-downs that takes into account all kinds of issues that are like to come up on a page and across browsers. It's more involved than the code I posted, but you might want to have a look at it:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/A_10316-Animated-multi-level-drop-down-menus-without-Javascript.html
0
 
JCWEBHOSTAuthor Commented:
this is my code when i view source

<div class="Menu" id="ctl00_mnu">
	<div class="AspNet-Menu-Horizontal">
			<ul class="AspNet-Menu">
				<li class="AspNet-Menu-WithChildren">
					<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS')" class="AspNet-Menu-Link" title="PRODUCTS">
						PRODUCTS</a>
					<ul>
						<li class="AspNet-Menu-WithChildren">
							<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Industrial \\ Domestic Gases')" class="AspNet-Menu-Link" title="Industrial / Domestic Gases">
								Industrial / Domestic Gases</a>
							<ul>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Industrial \\ Domestic Gases\\Industrial Gases')" class="AspNet-Menu-Link" title="Industrial Gases">
										Industrial Gases</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Industrial \\ Domestic Gases\\LP \\ Domestic Gases')" class="AspNet-Menu-Link" title="LP / Domestic Gases">
										LP / Domestic Gases</a>
								</li>
							</ul>
						</li>
						<li class="AspNet-Menu-WithChildren">
							<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares')" class="AspNet-Menu-Link" title="Welding Machines / Torches /Spares">
								Welding Machines / Torches /Spares</a>
							<ul>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\MIG Welding Machines')" class="AspNet-Menu-Link" title="MIG Welding Machines">
										MIG Welding Machines</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\TIG Welding Machines')" class="AspNet-Menu-Link" title="TIG Welding Machines">
										TIG Welding Machines</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Plasma Cutting Machines')" class="AspNet-Menu-Link" title="Plasma Cutting Machines">
										Plasma Cutting Machines</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\ARC Welding Machines')" class="AspNet-Menu-Link" title="ARC Welding Machines">
										ARC Welding Machines</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Mig Torches')" class="AspNet-Menu-Link" title="Mig Torches">
										Mig Torches</a>
								</li>
								<li class="AspNet-Menu-WithChildren">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Mig Torch Spares')" class="AspNet-Menu-Link" title="Mig Torch Spares">
										Mig Torch Spares</a>
									<ul>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Mig Torch Spares\\BZ 15 Contact tips')" class="AspNet-Menu-Link" title="BZ 15 Contact tips">
												BZ 15 Contact tips</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Mig Torch Spares\\BZ 24- 501 Contact Tips')" class="AspNet-Menu-Link" title="BZ 24- 501 Contact Tips">
												BZ 24- 501 Contact Tips</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Mig Torch Spares\\Gas Diffusers')" class="AspNet-Menu-Link" title="Gas Diffusers">
												Gas Diffusers</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Mig Torch Spares\\Tip Adaptor')" class="AspNet-Menu-Link" title="Tip Adaptor">
												Tip Adaptor</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Mig Torch Spares\\Swan Necks')" class="AspNet-Menu-Link" title="Swan Necks">
												Swan Necks</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Mig Torch Spares\\Bz Nozzles')" class="AspNet-Menu-Link" title="Bz Nozzles">
												Bz Nozzles</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Mig Torch Spares\\Bz Liners')" class="AspNet-Menu-Link" title="Bz Liners">
												Bz Liners</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Mig Torch Spares\\Switches')" class="AspNet-Menu-Link" title="Switches">
												Switches</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Mig Torch Spares\\Torch Handles')" class="AspNet-Menu-Link" title="Torch Handles">
												Torch Handles</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Mig Torch Spares\\Central \\Torch Adaptor & Plug')" class="AspNet-Menu-Link" title="Central /Torch Adaptor & Plug">
												Central /Torch Adaptor & Plug</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Mig Torch Spares\\Power Cables')" class="AspNet-Menu-Link" title="Power Cables">
												Power Cables</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Mig Torch Spares\\Gun Body')" class="AspNet-Menu-Link" title="Gun Body">
												Gun Body</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Mig Torch Spares\\Power Conduit & Gas Pipe')" class="AspNet-Menu-Link" title="Power Conduit & Gas Pipe">
												Power Conduit & Gas Pipe</a>
										</li>
									</ul>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Tig Torches')" class="AspNet-Menu-Link" title="Tig Torches">
										Tig Torches</a>
								</li>
								<li class="AspNet-Menu-WithChildren">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Tig Torch Spares')" class="AspNet-Menu-Link" title="Tig Torch Spares">
										Tig Torch Spares</a>
									<ul>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Tig Torch Spares\\Tig Torch Body')" class="AspNet-Menu-Link" title="Tig Torch Body">
												Tig Torch Body</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Tig Torch Spares\\Back Caps')" class="AspNet-Menu-Link" title="Back Caps">
												Back Caps</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Tig Torch Spares\\Ceramic Nozzle')" class="AspNet-Menu-Link" title="Ceramic Nozzle">
												Ceramic Nozzle</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Tig Torch Spares\\Ceramic Gas Lens Nozzle')" class="AspNet-Menu-Link" title="Ceramic Gas Lens Nozzle">
												Ceramic Gas Lens Nozzle</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Tig Torch Spares\\Gas Lens')" class="AspNet-Menu-Link" title="Gas Lens">
												Gas Lens</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Tig Torch Spares\\Collets')" class="AspNet-Menu-Link" title="Collets">
												Collets</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Tig Torch Spares\\Collet Body')" class="AspNet-Menu-Link" title="Collet Body">
												Collet Body</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Tig Torch Spares\\Switches')" class="AspNet-Menu-Link" title="Switches">
												Switches</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Machines \\ Torches \\Spares\\Tig Torch Spares\\Tungston')" class="AspNet-Menu-Link" title="Tungston">
												Tungston</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="AspNet-Menu-WithChildren">
							<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories')" class="AspNet-Menu-Link" title="Gas Cutting & Welding Accessories">
								Gas Cutting & Welding Accessories</a>
							<ul>
								<li class="AspNet-Menu-WithChildren">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\Gas Cut & Weld Accessories')" class="AspNet-Menu-Link" title="Gas Cut & Weld Accessories">
										Gas Cut & Weld Accessories</a>
									<ul>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\Gas Cut & Weld Accessories\\Regulators')" class="AspNet-Menu-Link" title="Regulators">
												Regulators</a>
										</li>
									</ul>
								</li>
								<li class="AspNet-Menu-WithChildren">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\MIG Process')" class="AspNet-Menu-Link" title="MIG Process">
										MIG Process</a>
									<ul>
										<li class="AspNet-Menu-WithChildren">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\MIG Process\\Mig Spares')" class="AspNet-Menu-Link" title="Mig Spares">
												Mig Spares</a>
											<ul>
												<li class="AspNet-Menu-WithChildren">
													<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\MIG Process\\Mig Spares\\Nozzles')" class="AspNet-Menu-Link" title="Nozzles">
														Nozzles</a>
													<ul>
														<li class="AspNet-Menu-Leaf">
															<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\MIG Process\\Mig Spares\\Nozzles\\BZ15 Connicle Nozzle')" class="AspNet-Menu-Link" title="BZ15 Connicle Nozzle">
																BZ15 Connicle Nozzle</a>
														</li>
														<li class="AspNet-Menu-Leaf">
															<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\MIG Process\\Mig Spares\\Nozzles\\BZ25 Connicle Nozzle')" class="AspNet-Menu-Link" title="BZ25 Connicle Nozzle">
																BZ25 Connicle Nozzle</a>
														</li>
														<li class="AspNet-Menu-Leaf">
															<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\MIG Process\\Mig Spares\\Nozzles\\BZ36 Connicle Nozzle')" class="AspNet-Menu-Link" title="BZ36 Connicle Nozzle">
																BZ36 Connicle Nozzle</a>
														</li>
														<li class="AspNet-Menu-Leaf">
															<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\MIG Process\\Mig Spares\\Nozzles\\BZ40 Connicle Nozzle')" class="AspNet-Menu-Link" title="BZ40 Connicle Nozzle">
																BZ40 Connicle Nozzle</a>
														</li>
														<li class="AspNet-Menu-Leaf">
															<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\MIG Process\\Mig Spares\\Nozzles\\BZ501 Connicle Nozzle')" class="AspNet-Menu-Link" title="BZ501 Connicle Nozzle">
																BZ501 Connicle Nozzle</a>
														</li>
													</ul>
												</li>
												<li class="AspNet-Menu-Leaf">
													<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\MIG Process\\Mig Spares\\BZ Contact Tips')" class="AspNet-Menu-Link" title="BZ Contact Tips">
														BZ Contact Tips</a>
												</li>
												<li class="AspNet-Menu-Leaf">
													<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\MIG Process\\Mig Spares\\Swan Necks')" class="AspNet-Menu-Link" title="Swan Necks">
														Swan Necks</a>
												</li>
												<li class="AspNet-Menu-Leaf">
													<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\MIG Process\\Mig Spares\\BZ Tip Adaptors')" class="AspNet-Menu-Link" title="BZ Tip Adaptors">
														BZ Tip Adaptors</a>
												</li>
												<li class="AspNet-Menu-Leaf">
													<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\MIG Process\\Mig Spares\\Power Cables')" class="AspNet-Menu-Link" title="Power Cables">
														Power Cables</a>
												</li>
												<li class="AspNet-Menu-Leaf">
													<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\MIG Process\\Mig Spares\\BZ Gas Diffusers')" class="AspNet-Menu-Link" title="BZ Gas Diffusers">
														BZ Gas Diffusers</a>
												</li>
												<li class="AspNet-Menu-Leaf">
													<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\MIG Process\\Mig Spares\\Liners')" class="AspNet-Menu-Link" title="Liners">
														Liners</a>
												</li>
											</ul>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\MIG Process\\MIG Torches')" class="AspNet-Menu-Link" title="MIG Torches">
												MIG Torches</a>
										</li>
									</ul>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\Hoses')" class="AspNet-Menu-Link" title="Hoses">
										Hoses</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\Flashback Arrestors')" class="AspNet-Menu-Link" title="Flashback Arrestors">
										Flashback Arrestors</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Cutting & Welding Accessories\\Gas Equipment Accessories')" class="AspNet-Menu-Link" title="Gas Equipment Accessories">
										Gas Equipment Accessories</a>
								</li>
							</ul>
						</li>
						<li class="AspNet-Menu-Leaf">
							<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Electrodes')" class="AspNet-Menu-Link" title="Welding Electrodes">
								Welding Electrodes</a>
						</li>
						<li class="AspNet-Menu-WithChildren">
							<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Safety Wear')" class="AspNet-Menu-Link" title="Safety Wear">
								Safety Wear</a>
							<ul>
								<li class="AspNet-Menu-WithChildren">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Safety Wear\\Head Protection')" class="AspNet-Menu-Link" title="Head Protection">
										Head Protection</a>
									<ul>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Safety Wear\\Head Protection\\Spectacles')" class="AspNet-Menu-Link" title="Spectacles">
												Spectacles</a>
										</li>
										<li class="AspNet-Menu-WithChildren">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Safety Wear\\Head Protection\\Ear Plugs')" class="AspNet-Menu-Link" title="Ear Plugs">
												Ear Plugs</a>
											<ul>
												<li class="AspNet-Menu-Leaf">
													<a href="product.aspx?name=SFT025&amp;category=ear-plugs&amp;id=25" class="AspNet-Menu-Link" title="SFT025">
														SFT025</a>
												</li>
											</ul>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Safety Wear\\Head Protection\\Hard Hats & Helmets')" class="AspNet-Menu-Link" title="Hard Hats & Helmets">
												Hard Hats & Helmets</a>
										</li>
									</ul>
								</li>
								<li class="AspNet-Menu-WithChildren">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Safety Wear\\Body Protection')" class="AspNet-Menu-Link" title="Body Protection">
										Body Protection</a>
									<ul>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Safety Wear\\Body Protection\\Overalls')" class="AspNet-Menu-Link" title="Overalls">
												Overalls</a>
										</li>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Safety Wear\\Body Protection\\Gloves')" class="AspNet-Menu-Link" title="Gloves">
												Gloves</a>
										</li>
									</ul>
								</li>
								<li class="AspNet-Menu-WithChildren">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Safety Wear\\Foot Wear')" class="AspNet-Menu-Link" title="Foot Wear">
										Foot Wear</a>
									<ul>
										<li class="AspNet-Menu-Leaf">
											<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Safety Wear\\Foot Wear\\Safety Shoes')" class="AspNet-Menu-Link" title="Safety Shoes">
												Safety Shoes</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="AspNet-Menu-WithChildren">
							<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Cutting & Grinding')" class="AspNet-Menu-Link" title="Cutting & Grinding">
								Cutting & Grinding</a>
							<ul>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Cutting & Grinding\\Cutting Discs')" class="AspNet-Menu-Link" title="Cutting Discs">
										Cutting Discs</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Cutting & Grinding\\Grinding Discs')" class="AspNet-Menu-Link" title="Grinding Discs">
										Grinding Discs</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Cutting & Grinding\\Flap Discs')" class="AspNet-Menu-Link" title="Flap Discs">
										Flap Discs</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Cutting & Grinding\\Flap Wheels')" class="AspNet-Menu-Link" title="Flap Wheels">
										Flap Wheels</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Cutting & Grinding\\Grinding Stones')" class="AspNet-Menu-Link" title="Grinding Stones">
										Grinding Stones</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Cutting & Grinding\\Mop Wheels')" class="AspNet-Menu-Link" title="Mop Wheels">
										Mop Wheels</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Cutting & Grinding\\Pencil Grinders')" class="AspNet-Menu-Link" title="Pencil Grinders">
										Pencil Grinders</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Cutting & Grinding\\Tungston Burrs')" class="AspNet-Menu-Link" title="Tungston Burrs">
										Tungston Burrs</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Cutting & Grinding\\Sanding Abrasives')" class="AspNet-Menu-Link" title="Sanding Abrasives">
										Sanding Abrasives</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Cutting & Grinding\\Velcro Discs')" class="AspNet-Menu-Link" title="Velcro Discs">
										Velcro Discs</a>
								</li>
							</ul>
						</li>
						<li class="AspNet-Menu-WithChildren">
							<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tools')" class="AspNet-Menu-Link" title="Tools">
								Tools</a>
							<ul>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tools\\Drills')" class="AspNet-Menu-Link" title="Drills">
										Drills</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tools\\Grinders')" class="AspNet-Menu-Link" title="Grinders">
										Grinders</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tools\\Spanners')" class="AspNet-Menu-Link" title="Spanners">
										Spanners</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tools\\Pliers')" class="AspNet-Menu-Link" title="Pliers">
										Pliers</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tools\\Screw Drivers')" class="AspNet-Menu-Link" title="Screw Drivers">
										Screw Drivers</a>
								</li>
							</ul>
						</li>
						<li class="AspNet-Menu-WithChildren">
							<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Brushware')" class="AspNet-Menu-Link" title="Brushware">
								Brushware</a>
							<ul>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Brushware\\Bass Brooms')" class="AspNet-Menu-Link" title="Bass Brooms">
										Bass Brooms</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Brushware\\Platform Brooms')" class="AspNet-Menu-Link" title="Platform Brooms">
										Platform Brooms</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Brushware\\Yard Brooms')" class="AspNet-Menu-Link" title="Yard Brooms">
										Yard Brooms</a>
								</li>
							</ul>
						</li>
						<li class="AspNet-Menu-WithChildren">
							<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tig Torches & Spares')" class="AspNet-Menu-Link" title="Tig Torches & Spares">
								Tig Torches & Spares</a>
							<ul>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tig Torches & Spares\\Tig Torches')" class="AspNet-Menu-Link" title="Tig Torches">
										Tig Torches</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tig Torches & Spares\\Tig Torch Body')" class="AspNet-Menu-Link" title="Tig Torch Body">
										Tig Torch Body</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tig Torches & Spares\\Back Caps')" class="AspNet-Menu-Link" title="Back Caps">
										Back Caps</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tig Torches & Spares\\Ceramic Nozzles')" class="AspNet-Menu-Link" title="Ceramic Nozzles">
										Ceramic Nozzles</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tig Torches & Spares\\Ceramic Gas Lens Nozzles')" class="AspNet-Menu-Link" title="Ceramic Gas Lens Nozzles">
										Ceramic Gas Lens Nozzles</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tig Torches & Spares\\Gas Lens')" class="AspNet-Menu-Link" title="Gas Lens">
										Gas Lens</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tig Torches & Spares\\Collets')" class="AspNet-Menu-Link" title="Collets">
										Collets</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tig Torches & Spares\\Collet Body')" class="AspNet-Menu-Link" title="Collet Body">
										Collet Body</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tig Torches & Spares\\2%25 Thoriated Tungsten Electrodes')" class="AspNet-Menu-Link" title="2% Thoriated Tungsten Electrodes">
										2% Thoriated Tungsten Electrodes</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tig Torches & Spares\\Tungstons')" class="AspNet-Menu-Link" title="Tungstons">
										Tungstons</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tig Torches & Spares\\Switches')" class="AspNet-Menu-Link" title="Switches">
										Switches</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Tig Torches & Spares\\Switch Boot')" class="AspNet-Menu-Link" title="Switch Boot">
										Switch Boot</a>
								</li>
							</ul>
						</li>
						<li class="AspNet-Menu-WithChildren">
							<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Mig Torch & Spares')" class="AspNet-Menu-Link" title="Mig Torch & Spares">
								Mig Torch & Spares</a>
							<ul>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Mig Torch & Spares\\BZ15 X 4m Torch & Spares')" class="AspNet-Menu-Link" title="BZ15 X 4m Torch & Spares">
										BZ15 X 4m Torch & Spares</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Mig Torch & Spares\\BZ24 X 4m MIG Torch')" class="AspNet-Menu-Link" title="BZ24 X 4m MIG Torch">
										BZ24 X 4m MIG Torch</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Mig Torch & Spares\\BZ25 X 4m MIG Torch')" class="AspNet-Menu-Link" title="BZ25 X 4m MIG Torch">
										BZ25 X 4m MIG Torch</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Mig Torch & Spares\\Bz36 X 4m MIG Torch')" class="AspNet-Menu-Link" title="Bz36 X 4m MIG Torch">
										Bz36 X 4m MIG Torch</a>
								</li>
							</ul>
						</li>
						<li class="AspNet-Menu-Leaf">
							<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Welding Chemicals & Fluxes')" class="AspNet-Menu-Link" title="Welding Chemicals & Fluxes">
								Welding Chemicals & Fluxes</a>
						</li>
						<li class="AspNet-Menu-Leaf">
							<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Safety Gloves & Protection')" class="AspNet-Menu-Link" title="Safety Gloves & Protection">
								Safety Gloves & Protection</a>
						</li>
						<li class="AspNet-Menu-WithChildren">
							<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Torches')" class="AspNet-Menu-Link" title="Gas Torches">
								Gas Torches</a>
							<ul>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Torches\\Universal Cutting Torch')" class="AspNet-Menu-Link" title="Universal Cutting Torch">
										Universal Cutting Torch</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Torches\\Shank \\ Torch Handle')" class="AspNet-Menu-Link" title="Shank / Torch Handle">
										Shank / Torch Handle</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Torches\\Cutting Attachment')" class="AspNet-Menu-Link" title="Cutting Attachment">
										Cutting Attachment</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Torches\\Mixer (SAF OXY \\ Act)')" class="AspNet-Menu-Link" title="Mixer (SAF OXY / Act)">
										Mixer (SAF OXY / Act)</a>
								</li>
								<li class="AspNet-Menu-Leaf">
									<a href="javascript:__doPostBack('ctl00$mnu','bPRODUCTS\\Gas Torches\\Nozzle Nut Type2 Universal')" class="AspNet-Menu-Link" title="Nozzle Nut Type2 Universal">
										Nozzle Nut Type2 Universal</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>

	</div>
</div>

Open in new window

0
 
Kyle HamiltonData ScientistCommented:
OK, I changed it, so you can have auto width. click the link again, and view source.

I have to run. I will look at your html later.
0
 
JCWEBHOSTAuthor Commented:
i am using:

<div style="width: 108px; height: 25px; display: block;">
                                <asp:Menu ID="mnu" DataSourceID="xmlDataSource" runat="server" MaximumDynamicDisplayLevels="10" CssSelectorClass="Menu" Orientation="Horizontal">
                                    <DataBindings>
                                        <asp:MenuItemBinding DataMember="MenuItem" TextField="Text" ToolTipField="ToolTip" NavigateUrlField="NavigateUrl" />
                                    </DataBindings>
                                </asp:Menu>
                                </div>
                                <div style="display: none">
                                    <asp:XmlDataSource ID="xmlDataSource" runat="server" TransformFile="~/TransformXSLT.xsl" XPath="MenuItems/MenuItem" CacheExpirationPolicy="Absolute" EnableCaching="False" />
                                </div>
0
 
Kyle HamiltonData ScientistCommented:
the container div has some inline styles. you should remove them. if you want your menus to be 108px wide, that should go in the menu css rules.

i dont use asp, but i suspect that asp:Menu throws in its own css and/or javascript that you'll be fighting to overwrite.

if you can post a link to your page, that would be the best way to see whats actually going on.

(im not going to be in front a computer for while, so it might take some time for me to get back to you.)
0
 
Kyle HamiltonData ScientistCommented:
http://candpgeneration.com/EE/asp-menus-5.html

this has your html from post ID: 38299904 above, and revised class names in the style sheet to fit.

(View source for code.)
0
 
JCWEBHOSTAuthor Commented:
i still have a problem

it seem to be the css friendly in the dll
0
 
Kyle HamiltonData ScientistCommented:
thats really a different question.

The CSS as it is works. im not an asp expert.

You should probably open a new question as regards to the DLL.
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 11
  • 9
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now