[x]
Posted via EE Mobile

Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.
Question
[x]
Attachment Details

What is the Joomla class name of a level two menu?

Asked by FKoutchouk in Cascading Style Sheets (CSS), Joomla

Tags: Joomla, CSS

My website uses a custom template built by someone else.  
The menus are only two deep.  Top level shows an image that changes when hovered above.
But the second level insists on showing the same image as its parent from the top level.
Looking at the HTML of the page, I see that the top level has a class of "menu" but not the sublevel doesn't (it just says "UL").  See attached code.
That seems to confuse the CSS (and me...), see attached code and image.

If there a way to name the Joomla "child" menus so that I can refer to them in the CSS?
Keeping in mind that I am not an expert at CSS... how about an easy fix, even an ugly second level menu is better than what I have.
Thanks.


1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:

/**** THE SOURCE CODE IN THE HTML ****/
<div id="wrapper">
<div id="header">
<a href="/"><div class="logo"></div></a>
<div class="navigation">
<a href="/index.php/cs"><img class="tele" src="/images/tele_but.gif" border="0" align="right" /></a>
<br class="clear" />
<ul class="menu"><li class="item1"><a href="http://vegas/"><span>Home</span></a></li><li class="item55"><a href="/index.php/light-panels"><span>Light Panels</span></a></li><li class="item60"><a href="/index.php/po"><span>Portfolio</span></a></li><li class="item61"><a href="/index.php/rs"><span>References</span></a></li><li id="current" class="parent active item69"><a href="/index.php/mnubenefits"><span>Benefits</span></a><ul><li class="item70"><a href="/index.php/mnubenefits/mnuelegance"><span>Elegance</span></a></li><li class="item71"><a href="/index.php/mnubenefits/mnuease"><span>Ease of use</span></a></li><li class="item72"><a href="/index.php/mnubenefits/mnurobustness"><span>Robustness</span></a></li></ul></li><li class="parent item63"><a href="/index.php/tl"><span>Technical</span></a></li><li class="item62"><a href="/index.php/iy"><span>Image Library</span></a></li></ul> 

/*** CSS ***/
.navigation {
padding-top:35px;
width:798px;
float:left;
} 
.navigation ul.menu {
margin-top:7px;
float:left;
list-style:none;
width:898px;
border-top:1px solid #9bc4b3;
} 
/* FK format second level works */
.navigation ul ul {
margin-top:7px;
position: absolute;
left: 100;
display: block;
list-style:none; 
width:298px;
} 
.navigation ul.menu li {
float:left;
padding:0px 6px 0 6px;
} 
/* FK second level -- not sure if it works */
.navigation ul.menu li ul li {
padding:0px 2px 0 2px;
} 
.navigation ul.menu li.item63 {
padding-left:0 !important;
}
.navigation ul.menu li a {
cursor:pointer;
display:block;
padding-top:15px;
padding-left:5px; 
padding-right:5px;
letter-spacing:1px;
text-decoration:none;
font-family:"trajan Pro", "times New Roman", serif ;
color:#274b5a;
font-size:13px;
font-weight:bold;
line-height:25px;
} 
/* FK second level -- seems to work */
.navigation ul.menu li.menu ul.menu li.menu a {
cursor:pointer;
display:block;
padding-top:5px;
padding-left:5px; 
padding-right:5px;
letter-spacing:1px;
text-decoration:none;
font-family:"trajan Pro", "times New Roman", serif ;
color:#274b5a;
font-size:13px;
font-weight:bold;
line-height:25px;
} 
.navigation ul.menu li.item1 a {
background:url(../images/menu_home.png) no-repeat left top ;
text-indent:-9000px;
width:45px; 
}
.navigation ul.menu li.item1 a:hover {
background:url(../images/menu_home_hover.png) no-repeat left top ;
width:45px;
} 

.navigation ul.menu li.item55 a {
background:url(../images/menu_light.png) no-repeat;
text-indent:-9000px;
width:99px;
}
.navigation ul.menu li.item55 a:hover {
background:url(../images/menu_light_hover.png) no-repeat left top !important;
width:99px;
} 

/* That's the image being repeated (see screenshot) */
.navigation ul.menu li.item69 a {
background:url(../images/menu_benefits.png) no-repeat  left top;
text-indent:-9000px;
width:67px;
}
.navigation ul.menu li.item69 a:hover {
background:url(../images/menu_benefits_hover.png) no-repeat left top !important;
width:67px;
}  
/* added FK 2009-11-07 .item70 -- DOES NOT WORK */
.navigation li li.item70 a {
background:url(../images/menu_elegance.png) no-repeat  left top;
text-indent:-9000px;
width:73px;
}
.navigation li li.item70 a:hover { 
background:url(../images/menu_elegance_hover.png) no-repeat  left top !important;
width:73px;
}
Attachments:
 
menu-level2-repeats.png (35 KB) (File Type Details) 
Screenshot incorrectly displayed second level menu
Screenshot incorrectly displayed second level menu
 
[+][-]11/08/09 08:41 PM, ID: 25773429Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]11/08/09 11:33 PM, ID: 25773968Author Comment

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]11/08/09 11:52 PM, ID: 25774038Author Comment

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]11/09/09 01:01 AM, ID: 25774303Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]11/09/09 03:01 AM, ID: 25774815Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]11/09/09 08:58 AM, ID: 25777717Author Comment

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20091111-EE-VQP-89 - Hierarchy / EE_QW_3_20080625