Old Forums
Search:
Design and CSS styles
Version 5.x > Design and CSS styles > How to make CSS Drop-down menu with more than 2 levels? View modes: 
User avatar
Member
Member
ahmed.hassan-dream-makers - 10/14/2010 11:38:11 AM
   
How to make CSS Drop-down menu with more than 2 levels?
I have found this on the Web parts Examples list: http://mysitetraining.com/Examples/Webparts/Navigation/CSS-list-menu.aspx

But wondering how to make it Horizontal instead of Vertical? I appreciate any Help on this!

User avatar
Member
Member
gavin.eggheaddesign - 10/15/2010 3:12:42 AM
   
RE:How to make CSS Drop-down menu with more than 2 levels?
Hi - Which menu are you looking at using, the bullet point list?

Are you comfortable with HTML and CSS? as from what i can remember you need to amend the CSS so the top level items (<li>) are set to display: inline. This will have a knock on effect to other styling but will give you a starting point to work from.

Thanks

Gav

User avatar
Member
Member
ahmed.hassan-dream-makers - 10/15/2010 4:11:01 AM
   
RE:How to make CSS Drop-down menu with more than 2 levels?
Yes I ok with HTML and CSS but it would be better to see an example, I have already done the drop-down menu level, now need to extend another 2 levels added.

User avatar
Member
Member
gavin.eggheaddesign - 10/18/2010 2:58:43 AM
   
RE:How to make CSS Drop-down menu with more than 2 levels?
Hi

So you now have the navigation horizontally aligned instead of vertically? If you have the 1st level drop-downs working i would expect that a similar process would be used to get level 2 and 3 to work correctly as well. Is there a URL to see what you have got so far?

Thanks

User avatar
Member
Member
ahmed.hassan-dream-makers - 10/18/2010 6:34:12 AM
   
RE:How to make CSS Drop-down menu with more than 2 levels?
Hi,

Thanks for your reply. Yes I have the first level correctly aligned, but I have a problem aligning the second and third levels that I need help on it.

Here is a sample URL: http://www2.alalfifoundation.org/test.aspx?lang=en-us

It is the one in the middle, the first one is a Tab Menu and the third is the Drop-down menu which is rendered in a huge amount of tables code.

I need help on the second one which is CSS list menu.

Thanks. Appreciate your fast reply.

User avatar
Member
Member
gavin.eggheaddesign - 10/19/2010 3:01:24 AM
   
RE:How to make CSS Drop-down menu with more than 2 levels?
Hi

Ok before you start looking into fixing these levels, just wondering if it needs to be a CSS list menu? Could you use the standard drop-down webpart (cmsmenu)?

Thanks

User avatar
Member
Member
ahmed.hassan-dream-makers - 10/19/2010 8:13:22 AM
   
RE:How to make CSS Drop-down menu with more than 2 levels?
Hi,

I believe the CSS list menu should be the best choice as it is better in html code rendered than the cmsmenu which is rendered in a big chunk of table codes and that is the recommended option from kentico. Also it is done the Corporate Portal Examples that comes with Kentico but as a Vertical menu, do not know why they did not place it as Horizontal!

User avatar
Member
Member
a.laccetti@elogic.it - 10/21/2010 4:00:51 AM
   
RE:How to make CSS Drop-down menu with more than 2 levels?
Hi...

Did you fixed this? Or you still need help?

User avatar
Member
Member
ahmed.hassan-dream-makers - 10/21/2010 4:40:34 AM
   
RE:How to make CSS Drop-down menu with more than 2 levels?
Hi,

Not yet fixed, do you have any solution?

User avatar
Member
Member
a.laccetti@elogic.it - 10/21/2010 5:24:49 AM
   
RE:How to make CSS Drop-down menu with more than 2 levels?
Can you send me all the HTML code?
Or you have a website where I can grab the full HTML with nested ULs and LIs?

And, correct me if I'm wrong... You have to do a vertical menu (for the second level), then 2 horizontal menus (for 3rd and 4th) right?

User avatar
Member
Member
ahmed.hassan-dream-makers - 10/21/2010 5:51:46 AM
   
RE:How to make CSS Drop-down menu with more than 2 levels?
Here is a sample URL: http://www2.alalfifoundation.org/test.aspx?lang=en-us

I need it to be as in the above URL; Level 1 Horizontal and from level 2 it would be Vertical.

User avatar
Member
Member
Antonio.Laccetti_eLogic - 10/21/2010 5:53:46 AM
   
RE:How to make CSS Drop-down menu with more than 2 levels?
I can't see the website!

I get this error:
"[Error loading the layout '']
c:\windows\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files\root\46bc7df5\e0f13252\App_Web_alalfifoundationinsiderpage.ascx.11a7e82d.qxz9ckz2.0.cs(171): error CS0012: The type 'Global' is defined in an assembly that is not referenced. You must add a reference to assembly 'App_Code.zbksph3j, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null'."

User avatar
Member
Member
ahmed.hassan-dream-makers - 10/21/2010 6:12:17 AM
   
RE:How to make CSS Drop-down menu with more than 2 levels?
Thanks for notification, It is now working fine.

User avatar
Member
Member
Antonio.Laccetti_eLogic - 10/21/2010 6:18:12 AM
   
RE:How to make CSS Drop-down menu with more than 2 levels?
Ok, I see the code... I see that you've done this the right way on the last menu, 1 vertical and 2 hor. menu!
You only need to style it better... right?

Or are you looking for something else?

User avatar
Member
Member
ahmed.hassan-dream-makers - 10/21/2010 6:30:00 AM
   
RE:How to make CSS Drop-down menu with more than 2 levels?
The issue is that the html code of it is a big chunk, the css list menu is better in the code, can you help in it?

User avatar
Member
Member
Antonio.Laccetti_eLogic - 10/22/2010 3:15:11 AM
   
RE:How to make CSS Drop-down menu with more than 2 levels?
Ok, I copied you code and added just 2 divs:"container" and "menu4". I'll paste you the HTML and CSS code here, hope that it solves your problem

HTML

<div class="container">
<div class="menu4">
 <div class="csslistmenu">
	<ul class="CMSListMenuUL" id="menuElem">
		<li class="CMSListMenuLI"><a href="/Homepage.aspx" class="CMSListMenuLink" >Home</a></li>
		<li class="CMSListMenuLI"><a href="/About-the-Foundation.aspx" class="CMSListMenuLink" >About the Foundation</a>
		<ul class="CMSListMenuUL">
			<li class="CMSListMenuLI"><a href="/About-the-Foundation/Message-from-the-Founder.aspx" class="CMSListMenuLink" >Message from the Founder</a></li>
			<li class="CMSListMenuLI"><a href="/About-the-Foundation/Our-Mission---Focus.aspx" class="CMSListMenuLink" >Our Mission & Focus</a></li>
			<li class="CMSListMenuLI"><a href="/About-the-Foundation/Al-Alfi-Family-History.aspx" class="CMSListMenuLink" >Al Alfi Family History</a></li>
		</ul>
		</li>
		<li class="CMSListMenuLI"><a href="/Programs.aspx" class="CMSListMenuLink" >Programs</a>
		<ul class="CMSListMenuUL">
			<li class="CMSListMenuLI"><a href="/Gifted-Children/Introduction.aspx" class="CMSListMenuLink" >Gifted Children Program</a>
			<ul class="CMSListMenuUL">
				<li class="CMSListMenuLI"><a href="/Programs/Gifted-Children/Introduction.aspx" class="CMSListMenuLink" >Introduction</a></li>
				<li class="CMSListMenuLI"><a href="/Programs/Gifted-Children/Program-Design.aspx" class="CMSListMenuLink" >Program Design</a></li>
				<li class="CMSListMenuLI"><a href="/Programs/Gifted-Children/The-Pilot-Project-at-Old-Agouza.aspx" class="CMSListMenuLink" >The Pilot Project at Old Agouza</a></li>
			</ul>
			</li>
			<li class="CMSListMenuLI"><a href="/Programs/Scholarships.aspx" class="CMSListMenuLink" >Scholarships</a>
			<ul class="CMSListMenuUL">
				<li class="CMSListMenuLI"><a href="/Programs/Scholarships/AUC-Fellowships.aspx" class="CMSListMenuLink" >AUC Fellowships</a></li>
				<li class="CMSListMenuLI"><a href="/Programs/Scholarships/BUE-Scholarships.aspx" class="CMSListMenuLink" >BUE Scholarships</a></li>
				<li class="CMSListMenuLI"><a href="/Programs/Scholarships/Leaders-Scholarships.aspx" class="CMSListMenuLink" >Leaders Scholarships</a></li>
			</ul>
			</li>
			<li class="CMSListMenuLI"><a href="/Programs/Student-Loan-Program.aspx" class="CMSListMenuLink" >Student Loan Program</a></li>
		</ul>
		</li>
		<li class="CMSListMenuLI"><a href="/Activities.aspx" class="CMSListMenuLink" >Activities</a></li>
		<li class="CMSListMenuLI"><a href="/Media-Center.aspx" class="CMSListMenuLink" >Media Center</a>
		<ul class="CMSListMenuUL">
			<li class="CMSListMenuLI"><a href="/Media-Center/Photo-Gallery.aspx" class="CMSListMenuLink" >Photo Gallery</a>
			<ul class="CMSListMenuUL">
				<li class="CMSListMenuLI"><a href="/Media-Center/Photo-Gallery/Photo-Gallery-(5).aspx" class="CMSListMenuLink" >Al Alfi Award at AUC</a></li>
				<li class="CMSListMenuLI"><a href="/Media-Center/Photo-Gallery/Photo-Gallery-(1).aspx" class="CMSListMenuLink" >Gifted Children</a></li>
				<li class="CMSListMenuLI"><a href="/Media-Center/Photo-Gallery/Photo-Gallery-(2).aspx" class="CMSListMenuLink" >Al Alfi Award</a></li>
				<li class="CMSListMenuLI"><a href="/Media-Center/Photo-Gallery/Photo-Gallery-(4).aspx" class="CMSListMenuLink" >Al Alfi Award at AUC</a></li>
				<li class="CMSListMenuLI"><a href="/Media-Center/Photo-Gallery/Photo-Gallery-(3).aspx" class="CMSListMenuLink" >Scholarships</a></li>
				<li class="CMSListMenuLI"><a href="/Media-Center/Photo-Gallery/Photo-Gallery.aspx" class="CMSListMenuLink" >Gifted Children Program</a></li>
			</ul>
			</li>
			<li class="CMSListMenuLI"><a href="/Media-Center/Press-Gallery.aspx" class="CMSListMenuLink" >Press Gallery</a></li>
		</ul>
		</li>
		<li class="CMSListMenuLI"><a href="/Our-Partners.aspx" class="CMSListMenuLink" >Our Partners</a></li>
		<li class="CMSListMenuLI"><a href="/Contact-Us.aspx" class="CMSListMenuLink" >Contact Us</a></li>
	</ul>

</div>
</div>
</div>


CSS

.container4 {
text-align:center; background:#eee; height:30px; position: relative;
margin:0 0 20px 0; /* for this demo only */
}
.menu4 {
text-align:left; font-family: verdana, sans-serif; position:relative; font-size:0.85em; background:transparent; width:800px; height:30px; margin:0 auto;
}
.menu4 ul {
padding:0; margin:0; list-style-type: none;
}
.menu4 ul li {
float:left; position:relative;
}

.menu4 ul li a, .menu4 ul li a:visited {
display:block; text-decoration:none;  height:30px; color:#333; padding: 5px 10px; background: #DDD; margin:0px 1px 1px 0px; font: 12px/29px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; }
* html .menu4 ul li a, .menu4 ul li a:visited {
width:140px; w\idth:70px; color: #333;
}

.menu4 ul li ul {
visibility:hidden; position:absolute; top:0; left:0; height:0; overflow:hidden;
}
.menu4 table {
margin:-1px; border-collapse:collapse; font-size:1em;
}

/* fist line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menu4 ul li:hover a,
.menu4 ul li a:hover {
color:#333; text-decoration:underline; border:0;
}
.menu4 ul li:hover ul,
.menu4 ul li a:hover ul {
visibility:visible; width:170px; height:auto; position:absolute; top:40px; left:-1px; background:#fff; overflow:visible;
}
.menu4 ul li:hover ul li a,
.menu4 ul li a:hover ul li a {
display:block; background:#EEE; text-decoration:none; color:#333; height:auto; line-height:1.5em; padding:5px 10px 5px 10px; width:170px; w\idth:125px;
}
.menu4 ul li:hover ul li a.drop,
.menu4 ul li a:hover ul li a.drop {
display:block; color:#333; height:auto; line-height:1.5em; padding:5px 10px 5px 10px; width:170px; w\idth:125px;
}
.menu4 ul li:hover ul li ul,
.menu4 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; top:0; left:0; height:0; overflow:hidden;
}
.menu4 ul li:hover ul li a:hover,
.menu4 ul li a:hover ul li a:hover {
color:#000; text-decoration:underline;
}
.menu4 ul li:hover ul li:hover ul,
.menu4 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; top:0; color:#000; left:146px; height:auto;
}
.menu4 ul li:hover ul li:hover ul.left,
.menu4 ul li a:hover ul li a:hover ul.left {
left:-166px;
}
.menu4 ul li:hover ul li:hover ul li a,
.menu4 ul li a:hover ul li a:hover ul li a {
display:block; color:#333; height:auto; line-height: 1.5em; padding:5px 10px 4px 10px; width:170px; w\idth:140px; font-size: 11px; }
* html .menu4 ul li a:hover ul li a:hover ul li a {padding:4px 10px 4px 10px;}

.menu4 ul li:hover ul li:hover ul li:hover a,
.menu4 ul li a:hover ul li a:hover ul li a:hover {
color:#000; text-decoration:underline;
}
User avatar
Member
Member
kentico_michal - 10/29/2010 4:22:24 AM
   
RE:How to make CSS Drop-down menu with more than 2 levels?
Hi,

Are you still encountering with this issue?

Anyway, CSS List Menu contains CSS Prefix property that allows allows you to set up different CSS styles for particular menu levels. Every level of the menu will use the prefix for CSS class names that you specify (http://devnet.kentico.com/docs/controls/index.html?using_the_cssprefix_property_for_design_of_sub_menus.htm)

More information about CSS List Menu styling and properties can be found in following article http://devnet.kentico.com/docs/controls/index.html?cmslistmenu.htm

Best regards,
Michal Legen

User avatar
Member
Member
ahmed.hassan-dream-makers - 11/1/2010 9:08:07 AM
   
RE:How to make CSS Drop-down menu with more than 2 levels?
Thanks for your reply, I have found my way to do it in English Culture, but I am having a trouble making the CSS List Menu work in Arabic Culture correctly, this is the URL: http://www2.alalfifoundation.org/Contact-Us.aspx?lang=ar-eg

The English Culture is working perfectly, the Arabic is not, Could you please help me find the problem!

User avatar
Kentico Developer
Kentico Developer
kentico_ivanat - 11/12/2010 3:28:37 AM
   
RE:How to make CSS Drop-down menu with more than 2 levels?
Hi,

I can see that you have already fixed the issue. Could you please share the solution?

Best regards,
Ivana Tomanickova

Top