?
Solved

css for vertical menu with a max of 6 sub menu

Posted on 2012-08-15
25
Medium Priority
?
653 Views
Last Modified: 2012-08-17
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
Comment
Question by:JCWEBHOST
  • 11
  • 9
  • 5
25 Comments
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38295720
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
 

Author Comment

by:JCWEBHOST
ID: 38296023
drop downs for the subs and flyout  but i do not need javascript

i am using

css menu
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38296283
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38298072
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38298271
here's an enhanced version - (I was bored):

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

:)
0
 

Author Comment

by:JCWEBHOST
ID: 38299267
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
 

Author Comment

by:JCWEBHOST
ID: 38299284
hey why do when i hover over mig process all the sub menu open?

sub open
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38299324
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
 

Author Comment

by:JCWEBHOST
ID: 38299326
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
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38299348
Did you try the code I posted earlier?
0
 

Author Comment

by:JCWEBHOST
ID: 38299384
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38299823
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38299853
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
 

Author Comment

by:JCWEBHOST
ID: 38299864
ok and the css?
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38299872
@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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38299873
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38299885
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38299899
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
 

Author Comment

by:JCWEBHOST
ID: 38299904
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38299915
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
 

Author Comment

by:JCWEBHOST
ID: 38299972
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38300008
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
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 38300470
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
 

Author Comment

by:JCWEBHOST
ID: 38303893
i still have a problem

it seem to be the css friendly in the dll
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38304157
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month13 days, 19 hours left to enroll

807 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