PDA

View Full Version : Nested li's and matching with css


eduard
16 Jul 2009, 05:28 PM
Situation:
My CMS (joomla) provides me with the following structure for menu's:

1th level -> ul.menu li <menu-items>
2th level -> ul.menu li ul li <menu-items>
3th level -> ul.menu li ul li ul li <menu-items>

Goal:
My goal i to make a menu navigation with css, so i can seperate layout from the data. I am currently working in firefox, when i run into the following problem:

Problem:
With the :hoover i was able to get the menu working to the 2th level, but i aint able to get it a level deeper. The ".menu li ul li ul" doenst affect the page, however ".menu li ul li ul a" does!

Demo:
Demo can be found at [only for firefox right now]: http://res-bolsward.nl/webdevforums/ and problem is that the 3th level won't show when i hoover over the items.

Expected result:
(expected result: when "Heren" > "Senioren Zondag RES 1" one would expect the following menu items to popup: "Teamfoto" / "Selectie / namen spelers" / .. )

data.html:

<html>
<head>
<link rel="stylesheet" href="layout.css" type="text/css" />
</head>
<body>
<ul class="menu">
<li>
<a href="level-1"><span>Level1-item1</span></a>
<ul>
<li>
<a href="level-2">
<span>Level2-item1</span></a>
<ul>
<li><a href="level3">
<span>Level3-item1</span></a></li>
<li><a href="level3">
<span>Level3-item2</span></a></li>
<li><a href="level3">
<span>Level3-item3</span></a></li>
</ul>
</li>
<li>
<a href="level-2">
<span>Level2-item2</span></a>
<ul>
<li><a href="level3">
<span>Level3-item1</span></a></li>
<li><a href="level3">
<span>Level3-item2</span></a></li>
<li><a href="level3">
<span>Level3-item3</span></a></li>
</ul>
</li>
<li>
<a href="level-2">
<span>Level2-item3</span></a>
<ul>
<li><a href="level3">
<span>Level3-item1</span></a></li>
<li><a href="level3">
<span>Level3-item2</span></a></li>
<li><a href="level3">
<span>Level3-item3</span></a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="level-1"><span>Level1-item2</span></a>
<ul>
<li>
<a href="level-2">
<span>Level2-item1</span></a>
<ul>
<li><a href="level3">
<span>Level3-item1</span></a></li>
<li><a href="level3">
<span>Level3-item2</span></a></li>
<li><a href="level3">
<span>Level3-item3</span></a></li>
</ul>
</li>
<li>
<a href="level-2">
<span>Level2-item2</span></a>
<ul>
<li><a href="level3">
<span>Level3-item1</span></a></li>
<li><a href="level3">
<span>Level3-item2</span></a></li>
<li><a href="level3">
<span>Level3-item3</span></a></li>
</ul>
</li>
<li>
<a href="level-2">
<span>Level2-item3</span></a>
<ul>
<li><a href="level3">
<span>Level3-item1</span></a></li>
<li><a href="level3">
<span>Level3-item2</span></a></li>
<li><a href="level3">
<span>Level3-item3</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>


layout.css:


.menu
{
/* background-image:url(../images/menu_bg.jpg); */
background-color:#000000;
height: 35px;
float:left;
width:960px;
list-style-type:none;
margin:0;
padding:0;
z-index:99;
}

a
{
color:#FFFFFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
text-decoration:none;
}

#current a {
color:#F0F;
}

/* ====================================================================== */
/* === The horizontal menu items (home / nieuws/ vereniging == */
/* ====================================================================== */
.menu li
{

float:left;
list-style-type: none;
position:relative;
text-align:left;
margin: 0px;
padding: 0px 0px 0px 0px;
width: auto;
}

.menu li ul
{
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:relative;
max-width:10px;
text-align:left;
margin: 0px;
padding: 0px;
}

.menu li a
{
margin: 0px 0px 0px 0px;
padding: 7px 5px 0px 5px;
border-right: 1px #FFF solid;
float:left;
position: relative;
height: 27px;
}
/* ====================================================================== */
/* === The 1 level verticalmenu items (Laatste nieuws / R.E.S Contact) == */
/* ====================================================================== */
/* without mouse --> hide */
.menu li ul
{
display: none;
z-index:99;
float:left;
margin: 0px;
padding: 0px;
}
/* with mouse --> show */
.menu li:hover ul
{
margin: 34px 0px 0px 0px;
position:absolute;
display:block;
}
.menu li:hover ul a
{
margin: 0px 0px 0px 0px;
position:relative;
list-style-type:nonoe;
list-style:none;
list-style-position:outside;

/* background */
background-color:#000000;
width: 200px;
/* a little bit transparant is nice */
opacity:0.6;
filter:alpha(opacity=60);
}
/* ====================================================================== */
/* === The 2 level horizontal items (Team foto / indeling competitie) == */
/* ====================================================================== */
/* without mouse --> hide (why doenst: ".menu li ul li ul" work?)*/
.menu li ul li ul a
{
display: none;
z-index:99;
float:left;
margin: 0px;
padding: 0px;
}
/* with mouse --> show */
.menu li ul li:hover ul
{
margin: 0px 0px 0px 200px;
position:absolute;
display:block;
}
.menu li ul li:hover ul a
{
margin: 0px 0px 0px 0px;
position:relative;
list-style-type:nonoe;
list-style:none;
list-style-position:outside;

/* background */
background-color:#000000;
width: 200px;
/* a little bit transparant is nice */
opacity:0.6;
filter:alpha(opacity=60);
}

I hope that someone can help me get the menu working :D
eduard
02 Aug 2009, 10:14 AM
Fixed by usign the followign css:


eduard@eduard-desktop:~/Desktop/res$ cat layout.css
.menu
{
/* background-image:url(../images/menu_bg.jpg); */
background-color:#000000;
height: 35px;
float:left;
width:960px;
list-style-type:none;
margin:0;
padding:0;
z-index:99;
}

a
{
color:#FFFFFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
text-decoration:none;
}

#current a {
color:#F0F;
}

/* ====================================================================== */
/* === The horizontal menu items (home / nieuws/ vereniging == */
/* ====================================================================== */
.menu li
{

float:left;
list-style-type: none;
position:relative;
text-align:left;
margin: 0px;
padding: 0px 0px 0px 0px;
width: auto;
}

.menu li ul
{
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:relative;
max-width:10px;
text-align:left;
margin: 0px;
padding: 0px;
}

.menu li a
{
margin: 0px 0px 0px 0px;
padding: 7px 5px 0px 5px;
border-right: 1px #FFF solid;
float:left;
position: relative;
height: 27px;
}
/* ====================================================================== */
/* === The 1 level verticalmenu items (Laatste nieuws / R.E.S Contact) == */
/* ====================================================================== */
/* without mouse --> hide */
.menu li ul
{
display: none;
z-index:99;
float:left;
margin: 0px;
padding: 0px;
}
/* with mouse --> show */
.menu li:hover ul
{
margin: 34px 0px 0px 0px;
position:absolute;
display:block;
}
.menu li:hover ul a
{
margin: 0px 0px 0px 0px;
position:relative;
list-style-type:nonoe;
list-style:none;
list-style-position:outside;

/* background */
background-color:#000000;
width: 200px;
/* a little bit transparant is nice */
opacity:0.6;
filter:alpha(opacity=60);
}
/* ====================================================================== */
/* === The 2 level horizontal items (Team foto / indeling competitie) == */
/* ====================================================================== */
/* without mouse --> hide (why doenst: ".menu li ul li ul" work?)*/
.menu li ul li ul li a
{
display: none;
z-index:99;
float:left;
margin: 0px;
padding: 0px;
}
/* with mouse --> show */
.menu li ul li:hover ul a
{
margin: 0px 0px 0px 200px;
height: 20px;
position:relative;
display:block;
}