...

View Full Version : multiple menus with divs



melCarmasin
05-25-2007, 10:10 PM
I need to have two menu lists on the same page. One using using float and one absolute. I'm using internal css for my coding but I can't figure out how I can have them both on the page using the same html code. I thought I could use div to contain each list but I'm not sure how to code the css. is there a alt method to do this?

Here's my codes:

float:
.rightBorder {
border-right:#000000 1px solid;
}
ul {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
margin:0;
padding:0;
list-style:none;
}
ul li {
position:relative;
float:left;
width:125px;
border-bottom:#000000 1px solid;
border-left:#000000 1px solid;
border-top:#000000 1px solid;
top:5px;
background-image:url(assets/bg_menu2.gif);
text-align:center;
}
li ul li {
border-bottom:#000000 1px solid;
border-left:#000000 1px solid;
border-right:#000000 1px solid;
border-top:0;
left:-1px;
}
li ul {
position:absolute;
left:0;
top:15px;
display:none;
}
ul li a {
display:block;
border-bottom:0;
text-decoration:none;
}
li:hover ul {
display:block;
}



Absolute:
ul {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
margin:0;
padding:0;
list-style:none;
width:125px;
border-bottom:1px #000000 solid;
}
ul li {
position:relative;
background-image:url(assets/bg_menu2.gif)

}
li ul {
position:absolute;
left:124px;
top:0;
display:none;
}
ul li a {
display:block;
border:1px #000000 solid;
border-bottom:0;
text-decoration:none;
}
li:hover ul {
display:block;
}

html menu:
<ul>
<li>drop down item list1
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>

<li>drop down item list2
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>

<li>drop down item list3
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
</ul>

of course the border class is added to the float portion but theres no need to put it in here.

Any help is appreciated.
*edit* just making my menu portion more clear

koyama
05-26-2007, 12:55 AM
The easiest way for you to solve this would probably be to wrap the menus in two different div elements that are given distinct id attributes.

Example:


<div id="menu1">
<ul>
[...]
</ul>
</div>

<div id="menu2">
<ul>
[...]
</ul>
</div>

Then modify your CSS to something like this:


#menu1 ul { [...] }
#menu1 ul li { [...] }
[...]

#menu2 ul { [...] }
#menu2 ul li { [...] }
[...]

Note: Find better descriptive names for the id attributes.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum