February 9th, 2004, 02:38 PM
|
|
Junior Member
|
|
Join Date: Feb 2004
Posts: 1
Time spent in forums: < 1 sec
Reputation Power: 0
|
|
|
Problem changing width & bg of 2-level CSS menu
I tried to do this CSS drop down menu with 2 methods, but none of them work perfect.
The first method is this:
PHP Code:
#menu1main { /* Top drop down menu styles */
height : 31px;
display : block;
}
#menu1main a { /* Top drop down menu hover styles */
display : block;
color : #000000;
text-decoration : none;
border : none;
background-repeat : no-repeat;
}
.menu1 .menu1list { /* Hide top drop down menu submenu */
display : none;
}
.menu1, .display { /* Top drop down menu top level styles */
float : left;
width : 110px;
text-align : center;
vertical-align : middle;
font-family : Comic Sans MS;
font-size : 10pt;
line-height : 31px;}
/* Top drop down menu submenu hover styles */
a.menu1b1lv1, a.menu1b1lv1:hover, a.menu1b1lv1:active {
background-image : url('image/menu_banner_1.jpg');
background-position : 12px 50% ;
}
a.menu1b2lv1, a.menu1b2lv1:hover, a.menu1b2lv1:active {
background-image : url('image/menu_banner_2.jpg');
background-position : 12px 50% ;
}
/* Top drop down menu submenu hover styles */
a.menu1lv2, a.menu1lv2:hover, a.menu1lv2:active {
display : block;
text-decoration : none;
border : none;
color : #000000;
text-indent : 16px;
text-align : left;
font-size : 8pt;
line-height : 20px;
width : 130px;
}
a.menu1lv2:hover, a.menu1lv2:active {
background-image : url('image/menu_cube_1.gif');
background-position : 0% 100% ;
background-repeat : no-repeat;
}
a.menu1lv2:hover, a.menu1lv2:active, a.menu1b1lv1:hover, a.menu1b1lv1:active, a.menu1b2lv1:hover, a.menu1b2lv1:active {
font-weight : bold;
}
The HTML for this is:
Code:
<div id="menu1main">
<div class="menu1"
onmouseover="this.className='display'"
onmouseout="this.className='menu1'">
<a class="menu1b1lv1" href="">Intro</a>
<div class="menu1list">
<a class="menu1lv2" href="">Part 1 Title</a>
<a class="menu1lv2" href="">Part 2 Title</a>
<a class="menu1lv2" href="">Part 3 Title</a>
</div></div>
<div class="menu1"
onmouseover="this.className='display'"
onmouseout="this.className='menu1'">
<a class="menu1b2lv1" href="">Chapter 1</a>
<div class="menu1list">
<a class="menu1lv2" href="">Part 1 Long Title</a>
<a class="menu1lv2" href="">Part 2 Long Title</a>
<a class="menu1lv2" href="">Part 3 Long Title</a>
</div></div>
</div>
The problem with this version is I can't change the width of the submenu, or else the second Chapter title will float to the right. So I tried the second method:
PHP Code:
ul.top { /* Top drop down menu styles */
display : block;
padding : 0;
margin : 0;
border : none;
font-family : Comic Sans MS;
font-size : 10pt;
text-align : center;
vertical-align : middle;
}
#topnav li.topnav0 { /* Top drop down top level menu styles */
position : relative;
float : left;
background-image : url('image/menu_banner_1.jpg');
background-position : 50% 0% ;
background-repeat : no-repeat;
width : 110px;
line-height : 31px;
}
#topnav li.topnav0 a { /* Top level link styles */
color : #000000;
text-decoration : none;
}
li.topnav0 a:hover { /* Top level hover styles */
text-decoration : none;
font-weight : bold;
}
#topnav ul.topnav1 a:hover { /* Drop down hover styles */
text-decoration : none;
background-image : url('image/menu_cube_1.gif');
background-position : 0 50% ;
background-repeat : no-repeat;
}
li.topnav0 ul.topnav1 {/* Drop down box style */
display : none;
background : #FFFFFF;
padding : 0;
margin : 0;
position : absolute;
top : 100%;
left : 0;
}
#topnav ul.topnav1 a { /* Drop Down Submenu Item Styles */
display : block;
padding : 0;
margin : 0;
text-indent : 16px;
text-align : left;
font-size : 8pt;
line-height : 20px;
width : 250px;
}
#topnav li.topnav0:hover ul.topnav1, li.over ul.topnav1, li.over li.topnav1 { /* Makes Drop down work in IE */
display : block;
}
And the HTML is as follow:
Code:
<div>
<ul class="top" id="topnav">
<li class="topnav0"><div><a href="#">Home</a></div>
</li>
<li class="topnav0"><div><a href="#">Intro</a></div>
<ul class="topnav1">
<li><a href="#">Part 1 Title</a></li>
<li><a href="#">Part 2 Title</a></li>
<li><a href="#">Part 3 Title</a></li>
</ul>
</li> <li class="topnav0"><div><a href="#">Chapter 1</a></div>
<ul class="topnav1">
<li><a href="#">Part 1 Long Title</a></li>
<li><a href="#">Part 2 Long Title</a></li>
<li><a href="#">Part 3 Long Title</a></li>
</ul>
</li>
</ul>
</div>
The problem with this version is that I cannot change the background image for each Chapter on the top level. Also, I cannot make the background of the drop down submenu transparent. If I make it transparent or delete the background line, the Part 2 link will not show up.
Any help of making either method to work is great appreciated! Thank you very much!
|
Dev Shed Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
