CSS only megamenu

enormousrodent · February 2, 2011, 12:51pm

Hi there guys…

I know this subject has been touched on before however i have a different problem to one that has been done before with a unique goal also.

My platform that i am using is SharePoint 2010 so i cannot adjust the output of the control (without c# code which is not an option in this deployment).

my attempt so far…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

.megamenu ul {padding:0; margin:0; list-style: none;}

.megamenu ul li
{
	float:left;
	list-style-type:none;
	position: relative;
}

.megamenu ul li a
{
	padding:4px;	
	color:red;	
}

.megamenu ul li ul li ul
{
	display:none;	
}

.megamenu ul li ul li:hover ul 
{
	display:block; 
	position:absolute; 
	width:800px;
}

.megamenu ul li ul li ul li
{
	color:green;
}

.megamenu ul li ul li ul li a
{
	padding:4px;	
	color:green;	
}

.megamenu ul li ul li ul li ul li
{
	color:orange;
	float:none;
	border:1px solid red;
}

.megamenu ul li ul li ul li ul li a
{
	padding:4px;	
	color:orange;	
}
</style>
</head>

<body>
<div class='megamenu'>
<ul>
   	<li><a href=''>Home</a>
        <ul>

            <li><a href=''>Main Category</a>
                <ul>
                    <li><a href=''>Sub Menu</a>
                        <ul>
                            <li><a href=''>Sub Menu</a></li>                
                            <li><a href=''>Sub Menu</a></li>                
                            <li><a href=''>Sub Menu</a></li>                
                            <li><a href=''>Sub Menu</a></li>                
                            <li><a href=''>Sub Menu</a></li>                
                            <li><a href=''>Sub Menu</a></li>                                                                                                         
                        </ul>

                    </li>    
                    <li><a href=''>Sub Menu</a>
                        <ul>
                            <li><a href=''>Sub Menu</a></li>                
                            <li><a href=''>Sub Menu</a></li>                
                            <li><a href=''>Sub Menu</a></li>                
                            <li><a href=''>Sub Menu</a></li>                
                            <li><a href=''>Sub Menu</a></li>

                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>                                        
                        </ul>
                    </li>   
                    <li><a href=''>Sub Menu</a>
                        <ul>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>

                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>                                         
                        </ul>

                    </li>      
                    <li><a href=''>Sub Menu</a>
                        <ul>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>

                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>                                         
                        </ul>
                    </li>  
                    <li><a href=''>Sub Menu</a>

                        <ul>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>

                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>                                         
                        </ul>
                    </li>  
                    <li><a href=''>Sub Menu</a>
                        <ul>
                            <li><a href=''>Sub Menu</a></li>

                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>
                            <li><a href=''>Sub Menu</a></li>

                            <li><a href=''>Sub Menu</a></li>                                         
                        </ul>
                    </li>                                                                   
                </ul>
            </li>
            <li><a href=''>Main Category</a>
                <ul>
                    <li><a href=''>Sub Menu</a></li>

                    <li><a href=''>Sub Menu</a></li>
                    <li><a href=''>Sub Menu</a></li>         
                </ul>
            </li>
            <li><a href=''>Main Category</a>
                <ul>
                    <li><a href=''>Sub Menu</a></li>

                    <li><a href=''>Sub Menu</a></li>
                    <li><a href=''>Sub Menu</a></li>         
                </ul>
            </li>    
            <li><a href=''>Main Category</a></li>
            <li><a href=''>Main Category</a></li>
            <li><a href=''>Main Category</a></li>

            <li><a href=''>Main Category</a></li>              
        </ul>
	</li>
</ul>
</div>
</body>
</html>

what i need help getting to…

Can someone help me please

Thanks

enormousrodent · February 2, 2011, 3:54pm

Can anyone help please?

PicnicTutorials · February 2, 2011, 4:12pm

Not quite sure what problem your having but here is how I did it. Just copy and paste and customize to your likeing. http://www.visibilityinherit.com/code/mega-drop-down.php

enormousrodent · February 2, 2011, 4:24pm

yea…i cannot change the HTML that is being rendered…it has to be true nested ul li setup…thanks anyhow

PaulOB · February 2, 2011, 4:45pm

I assume you mean that you can’t adjust the html at all?

It looks like your code has a double sub menu unlike the drawing.

You could do something like this which should give you a start but you can refer to Erics for more details.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.megamenu ul {
    padding:0;
    margin:0;
    list-style: none;
    position: relative;
}
.megamenu ul li {
    float:left;
    list-style-type:none;
}
.megamenu ul li a {
    padding:4px;
    color:red;
}
.megamenu ul li ul li ul {
    display:none;
    background:blue;
    width:800px;
    position:absolute;
    left:0;
}
.megamenu ul li ul li ul ul{
    width:auto;
    display:block;
    position:static;
}
.megamenu ul li ul li:hover ul {
    display:block;
}
.megamenu ul li ul li ul li {
    color:#000;
    float:green;
    margin:0 5px 0 0;
    padding:5px;
}
.megamenu ul li ul li ul li ul{clear:both;}
.megamenu ul li ul li ul li a {
    padding:4px;
    color:green;
}
.megamenu ul li ul li ul li ul li {
    color:orange;
    float:none;
}
.megamenu ul li ul li ul li ul li a {
    padding:4px;
    color:orange;
}
.megamenu li li a:hover{color:yellow}
.megamenu li li:hover {background:blue}
</style>
</head>
<body>
<div class='megamenu'>
    <ul>
        <li><a href=''>Home</a>
            <ul>
                <li><a href=''>Main Category</a>
                    <ul>
                        <li><a href=''>Sub Menu header</a>
                            <ul>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                            </ul>
                        </li>
                        <li><a href=''>Sub Menu header</a>
                            <ul>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                            </ul>
                        </li>
                        <li><a href=''>Sub Menu header</a>
                            <ul>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                            </ul>
                        </li>
                        <li><a href=''>Sub Menu header</a>
                            <ul>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                            </ul>
                        </li>
                        <li><a href=''>Sub Menu header</a>
                            <ul>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                            </ul>
                        </li>
                        <li><a href=''>Sub Menu header</a>
                            <ul>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                                <li><a href=''>Sub Menu</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href=''>Main Category</a>
                    <ul>
                        <li><a href=''>Sub Menu</a></li>
                        <li><a href=''>Sub Menu</a></li>
                        <li><a href=''>Sub Menu</a></li>
                    </ul>
                </li>
                <li><a href=''>Main Category</a>
                    <ul>
                        <li><a href=''>Sub Menu</a></li>
                        <li><a href=''>Sub Menu</a></li>
                        <li><a href=''>Sub Menu</a></li>
                    </ul>
                </li>
                <li><a href=''>Main Category</a></li>
                <li><a href=''>Main Category</a></li>
                <li><a href=''>Main Category</a></li>
                <li><a href=''>Main Category</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

enormousrodent · February 2, 2011, 5:09pm

thanks paul…i will finish css’ing it up and post it back when i have finished…that is pretty much what i wanted…thanks v.much

enormousrodent · February 3, 2011, 9:40am

UPDATE

Can i please have some assistance with a final tweak to this design please… the first level UL / LI is in the wrong position and it needs to rest inline with the other “top” level nav items. How do i get them to line up?

http://www.invisiblewebdesign.co.uk/temp/ics/

Thanks

Chris

PaulOB · February 3, 2011, 11:01am

Hi,

You’ll have to clarify that a bit as I can’t wortk out what you mean.

If you mean that when you hover over “What we do” you want the “productivity and collaboration” text to start exactly under the “what we do heading” then that will be awkward because there is not enough room for all the menus to fit.

In a mega menu you usually make all content start at the left because that’s where you get most room for the mega menu.

If that’s not what you meant you may need to post a couple of screenshots showing what’s wrong or showing what you want.

enormousrodent · February 3, 2011, 11:05am

Sorry Paul,

What i mean is to get the HOME inline with the other items…as the Home is a sinle UL Li on the first level.

link to example http://www.invisiblewebdesign.co.uk/temp/ics/

Thanks

Chris

PaulOB · February 3, 2011, 11:31am

Try something like this:


[B].megamenu ul li a{float:left}[/B]
.megamenu ul li {
   [B] float:none;[/B]
    list-style-type:none;
}
[B].megamenu ul li li {
    float:left;
}[/B]

enormousrodent · February 3, 2011, 11:46am

.megamenu ul li a{float:left}
.megamenu ul li {
    float:none;
    list-style-type:none;
	margin-top:5px;
}
.megamenu ul li li {
    float:left;
	margin-top:-4px;
}

.megamenu ul li li a{float:none}

with this code it seems to get closer, i have had to adjust it so that the margins fix the positioning, however it appears different in ie and firefox…perfect in firefox (no surprise) and off in ie…

link above has been updated with code

enormousrodent · February 3, 2011, 12:10pm

I have also noticed that this does not render correctly at all in IE7…

PaulOB · February 3, 2011, 1:47pm

Hi,

You put the rules I gave you above the other rules which meant they became null and void.

Ie7 seems to need a width on the nested ul so try this in this order.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin:0;
    padding:0;
    border:0;
    font-weight:inherit;
    font-size:100%;
    font-family:inherit;
    vertical-align:baseline;
}
table {
    border-collapse:separate;
    border-spacing:0;
}
caption, th, td {
    text-align:left;
    font-weight:normal;
}
table, td, th {
    vertical-align:top;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
}
blockquote, q {
    quotes:'' '';
}
a img {
    border:none;
}
.megamenu ul {
    width:955px;
}
body {
    margin:0;
    padding:0;
    width:100%;
    min-width:600px;        /* Minimum width of layout - remove line if not required */
    font:11px verdana, arial !important;
    text-align:left;
    background-color:#121212;
    color:#666 !important;
}
.navigation-wrapper {
    float:left;
    width:977px;
    height:51px;
    background-image:url(nav_bg.png);
    background-repeat:no-repeat;
    margin:20px;
}
.megamenu {
    margin:0px 0px 0px 10px;
}
.megamenu a {
    text-decoration:none;
    font-size:1.2em;
}
.megamenu ul {
    padding:0;
    margin:0;
    list-style: none;
    position: relative;
}
.megamenu ul li a{float:left}
.megamenu ul li {
    float:none;
    list-style-type:none;
}
.megamenu ul li li {
    float:left;
}
.megamenu ul li li li li{clear:left}
.megamenu ul li a {
    padding:12px;
    color:white;
    border-right:1px solid #292929;
}
.megamenu ul li ul li a {
    padding:12px;
    color:yellow;
    border-right:1px solid #292929;
}
.megamenu ul li ul li ul li a {
    padding:12px;
    color:white;
    border:none;
}
.megamenu ul li a:hover {
    background-color:#666666;
}
.megamenu ul li ul li ul {
    display:none;
    background:#181818;
    border:1px solid #292929;
    width:955px;
    position:absolute;
    left:0;
    top:38px;
}
.megamenu ul li ul li ul ul {
    width:auto;
    display:block;
    position:static;
    border:none;
}
.megamenu ul li ul li:hover ul {
    display:block;
}
.megamenu ul li ul li ul li {
    color:#000;
    float:white;
    margin:0 5px 0 0;
    padding:5px;
    font-weight:bold;
}
.megamenu ul li ul li ul li ul {
    clear:both;
}
.megamenu ul li ul li ul li a {
    padding:4px;
    color:#fff;
}
.megamenu ul li ul li ul li a:hover {
    background:none;
}
.megamenu ul li ul li ul li ul li {
    color:orange;
    float:none;
}
.megamenu ul li ul li ul li ul li a {
    padding:4px 0px 4px 0px;
    color:white !important;
    font-weight:normal;
}
.megamenu li li a:hover {
    color:#000
}
.megamenu li li:hover a {
    background:#666;
    color:#000;
}
.megamenu li li:hover li a{background:transparent;color:#fff;}
ul.static{float:left;width:750px;position:static;}

</style>
</head>
<body>
<div class="navigation-wrapper">
    <div class='megamenu'>
        <ul>
            <li><a href=''>Home</a>
                <ul class="static">
                    <li class="static dynamic-children"><a class="static dynamic-children menu-item" title="About ICS" href="/aboutics/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">About ICS</span></span></a>
                        <ul class="dynamic">
                            <li class="dynamic"><a class="dynamic menu-item" href="/aboutics/credentials/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Credentials</span></span></a></li>
                            <li class="dynamic"><a class="dynamic menu-item" href="/aboutics/microsoftgoldpartner/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Microsoft Gold Partner</span></span></a></li>
                        </ul>
                    </li>
                    <li class="static dynamic-children"><a class="static dynamic-children menu-item" href="/whatwedo/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">What we do</span></span></a>
                        <ul class="dynamic">
                            <li class="dynamic dynamic-children"><a class="dynamic dynamic-children menu-item" href="/whatwedo/productivityandcollaboration/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Productivity &amp; Collaboration</span></span></a>
                                <ul class="dynamic">
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/productivityandcollaboration/businessintelligence/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Business Intelligence</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/productivityandcollaboration/collaboration/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Collaboration</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/productivityandcollaboration/contentmanagement/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Content Management</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/productivityandcollaboration/enterprisesearch/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Enterprise Search</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/productivityandcollaboration/extranet/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Extranet</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/productivityandcollaboration/intranet/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Intranet</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/productivityandcollaboration/projectmanagement/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Project Management</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/productivityandcollaboration/recordsmanagement/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Records Management</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/productivityandcollaboration/socialnetworking/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Social Networking</span></span></a></li>
                                </ul>
                            </li>
                            <li class="dynamic dynamic-children"><a class="dynamic dynamic-children menu-item" href="/whatwedo/applicationdevelopment/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Application Development</span></span></a>
                                <ul class="dynamic">
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/applicationdevelopment/applicationintegration/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Application Integration</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/applicationdevelopment/applicationmigration/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Application Migration</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/applicationdevelopment/azuredevelopment/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Azure Development</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/applicationdevelopment/datamigration/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Data Migration</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/applicationdevelopment/ecommercedevelopment/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">eCommerce Development</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/applicationdevelopment/mobiledevelopment/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Mobile Development</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/applicationdevelopment/websitedevelopment/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Website Development</span></span></a></li>
                                </ul>
                            </li>
                            <li class="dynamic dynamic-children"><a class="dynamic dynamic-children menu-item" href="/whatwedo/coreplatform/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Core Platform</span></span></a>
                                <ul class="dynamic">
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/coreplatform/hosting/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Hosting</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/coreplatform/imconferencing/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">IM &amp; Conferencing</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/coreplatform/mailscheduling/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Mail &amp; Scheduling</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/coreplatform/platformmanagement/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Platform Management</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/coreplatform/security/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Security</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/coreplatform/virtualisation/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Virtualisation</span></span></a></li>
                                </ul>
                            </li>
                            <li class="dynamic dynamic-children"><a class="dynamic dynamic-children menu-item" href="/whatwedo/professionalservices/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Professional Services</span></span></a>
                                <ul class="dynamic">
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/professionalservices/collaborate/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Collaborate</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/professionalservices/empower/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Empower</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/professionalservices/manage/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Manage</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/professionalservices/support/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Support</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/professionalservices/training/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Training</span></span></a></li>
                                </ul>
                            </li>
                            <li class="dynamic dynamic-children"><a class="dynamic dynamic-children menu-item" href="/whatwedo/technologyservices/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Technology Services</span></span></a>
                                <ul class="dynamic">
                                    <li class="dynamic"><a class="dynamic menu-item new-window" href="http://www.azureadvantage.co.uk/services/azureazvantageprogram/Pages/default.aspx" target="_blank"><span class="additional-background"><span class="menu-item-text">Azure Advantage Program </span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/technologyservices/biztalkadvantageprogram/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">BizTalk Advantage Program</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/technologyservices/cloudadvantageprogram/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Cloud Advantage Program</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item new-window" href="http://www.office365advantage.co.uk/services/Pages/default.aspx" target="_blank"><span class="additional-background"><span class="menu-item-text">Office 365 Advantage Program </span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/technologyservices/sharepoint2010advantageprogram/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">SharePoint 2010 Advantage Program</span></span></a></li>
                                    <li class="dynamic"><a class="dynamic menu-item" href="/whatwedo/technologyservices/sharepoint2010adoptionframework/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">SharePoint 2010 Adoption Framework</span></span></a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="static dynamic-children"><a class="static dynamic-children menu-item" title="Seminars" href="/seminars/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Seminars</span></span></a>
                        <ul class="dynamic">
                            <li class="dynamic"><a class="dynamic menu-item" href="/seminars/azureseminars/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Azure Seminars</span></span></a></li>
                            <li class="dynamic"><a class="dynamic menu-item" href="/seminars/office365seminars/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Office 365 Seminars</span></span></a></li>
                            <li class="dynamic"><a class="dynamic menu-item" href="/seminars/sharepoint2010seminars/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">SharePoint 2010 Seminars</span></span></a></li>
                        </ul>
                    </li>
                    <li class="static dynamic-children"><a class="static dynamic-children menu-item" title="Clients" href="/clients/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Clients</span></span></a>
                        <ul class="dynamic">
                            <li class="dynamic"><a class="dynamic menu-item" title="Success Stories" href="/clients/successstories/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Success Stories</span></span></a></li>
                        </ul>
                    </li>
                    <li class="static dynamic-children"><a class="static dynamic-children menu-item" href="/partners/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Partners</span></span></a>
                        <ul class="dynamic">
                            <li class="dynamic"><a class="dynamic menu-item" href="/partners/sharepointadvantageprogramforpartners/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">SharePoint Advantage Program for Partners</span></span></a></li>
                        </ul>
                    </li>
                    <li class="static"><a class="static menu-item" title="News" href="/news/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">News</span></span></a></li>
                    <li class="static"><a class="static menu-item" href="/videos/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Videos</span></span></a></li>
                    <li class="static"><a class="static menu-item" title="Careers" href="/careers/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Careers</span></span></a></li>
                    <li class="static"><a class="static menu-item" title="Contact" href="/contact/Pages/default.aspx"><span class="additional-background"><span class="menu-item-text">Contact</span></span></a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

enormousrodent · February 3, 2011, 1:53pm

I love you

Thanks Paul! u should teach this as a course (unless you do already)

Thanks again…