hanpedro
07-09-2009, 10:35 AM
including css menu works wrong
I downloaded css menu at http://www.cssplay.co.uk/menus/drop_line.html.
And including css file from css menu file as like this,
<head>
<link rel="stylesheet" type="text/css" href="<?= $g4[path]?>/_control/_topmenu/wd_topmenu.css" />
</head>
<div class="menu">
<ul>
<li><a href="#nogo" title="John Constable"><em class="lft"></em><b>John Constable</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="The Hay Wain">The Hay Wain</a></li>
<li><a href="#nogo" title="Brighton Beach">Brighton Beach</a></li>
<li><a href="#nogo" title="Malvern Hall">Malvern Hall</a></li>
<li><a href="#nogo" title="Salisbury Cathedral">Salisbury Cathedral</a></li>
<li><a href="#nogo" title="Weymouth Bay">Weymouth Bay</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" title="William Turner"><em class="lft"></em><b>William Turner</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="Fishermen at Sea">Fishermen at Sea</a></li>
<li><a href="#nogo" title="The Shipwreck">The Shipwreck</a></li>
<li><a href="#nogo" title="The Vale of Ashburnham">The Vale of Ashburnham</a></li>
<li><a href="#nogo" title="Crossing the Brook">Crossing the Brook</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" title="Henri Matisse"><em class="lft"></em><b>Henri Matisse</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="The Girl with Green Eyes">The Girl with Green Eyes</a></li>
<li><a href="#nogo" title="The Dream">The Dream</a></li>
<li><a href="#nogo" title="Woman in Blue">Woman in Blue</a></li>
<li><a href="#nogo" title="The Yellow Dress">The Yellow Dress</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" title="Paul Cezanne"><em class="lft"></em><b>Paul Cezanne</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="The Large Bathers">The Large Bathers</a></li>
<li><a href="#nogo" title="Onions and Bottles">Onions and Bottles</a></li>
<li><a href="#nogo" title="Mardi Gras">Mardi Gras</a></li>
<li><a href="#nogo" title="Still Life">Still Life</a></li>
<li><a href="#nogo" title="Boy in a Red Waistcoat">Boy in a Red Waistcoat</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
and wrote css file :
<style type="text/css">
#info {height:400px;}
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_line.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menu {
position:relative;
width:750px;
height:2em;
background:#b7c6ac;
border-top:10px solid #b7c6ac;
padding-bottom:1px;
background:#b7c6ac url(drop/line.gif) bottom left repeat-x;
margin-bottom:5em;
margin-top:50px;
}
* html .menu {padding-bottom:0;}
.menu ul{
list-style-type:none;
padding:0;
margin:0 0 0 20px;
width:730px;
height:100%;
}
.menu li{
float:left;
}
.menu table{
position:absolute;
border-collapse:collapse;
left:0;
top:0;
}
.menu a, .menu :visited {
color:#fff;
text-decoration:none;
}
.menu a em.lft, .menu :visited em.lft {
display:block;
float:left;
width:5px;
height:2em;
background: transparent url(drop/lefta.gif);
border-bottom:1px solid #777;
}
.menu a b, .menu :visited b {
display:block;
font-weight:normal;
float:left;
padding:0 10px;
height:2em;line-height:1.9em;
background: transparent url(drop/mida.gif);
cursor:pointer;
border-bottom:1px solid #777;
}
.menu a em.rgt, .menu :visited em.rgt {
display:block;
float:left;
width:5px;
height:2em;
background: transparent url(drop/righta.gif);
border-bottom:1px solid #777;
}
.menu ul ul {
visibility:hidden;
position:absolute;
height:2em;
top:2em;
left:-20px;
width:749px;
border-bottom:1px solid #777;
border-right:1px solid #777;
background:#ccc;
}
.menu :hover {
white-space:normal;
}
.menu a:hover b {
color:#000;
background: transparent url(drop/midb.gif);
border-bottom-color:#ccc;
}
.menu a:hover em.lft {
background: transparent url(drop/leftb.gif);
border-bottom-color:#ccc;
}
.menu a:hover em.rgt {
background: transparent url(drop/rightb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a b
{
color:#000;
background: transparent url(drop/midb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a em.lft {
background: transparent url(drop/leftb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a em.rgt {
background: transparent url(drop/rightb.gif);
border-bottom-color:#ccc;
}
.menu ul li:hover ul,
.menu ul a:hover ul{
display:block;
visibility:visible;
top:2em;
margin-top:1px;
}
.menu ul :hover ul li {
display:block;
border-left:1px solid #777;
background:#ccc;
height:2em;
}
.menu ul :hover ul li a {
display:block;
font-size:0.8em;
height:2em;
line-height:2.5em;
width:auto;
float:left;
color:#444;
padding:0 10px;}
.menu ul :hover ul li a:hover {
color:#c00;
}
</style>
Finally I cluded this css menu file,
<tr>
<td style="width:950px; height:28px; valign: top">
<? include($g4[path]."/_control/_topmenu/topmenu.php"); ?>
</td>
</tr>
But I could not see submenus.
Any comment would be appreciated.
I downloaded css menu at http://www.cssplay.co.uk/menus/drop_line.html.
And including css file from css menu file as like this,
<head>
<link rel="stylesheet" type="text/css" href="<?= $g4[path]?>/_control/_topmenu/wd_topmenu.css" />
</head>
<div class="menu">
<ul>
<li><a href="#nogo" title="John Constable"><em class="lft"></em><b>John Constable</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="The Hay Wain">The Hay Wain</a></li>
<li><a href="#nogo" title="Brighton Beach">Brighton Beach</a></li>
<li><a href="#nogo" title="Malvern Hall">Malvern Hall</a></li>
<li><a href="#nogo" title="Salisbury Cathedral">Salisbury Cathedral</a></li>
<li><a href="#nogo" title="Weymouth Bay">Weymouth Bay</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" title="William Turner"><em class="lft"></em><b>William Turner</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="Fishermen at Sea">Fishermen at Sea</a></li>
<li><a href="#nogo" title="The Shipwreck">The Shipwreck</a></li>
<li><a href="#nogo" title="The Vale of Ashburnham">The Vale of Ashburnham</a></li>
<li><a href="#nogo" title="Crossing the Brook">Crossing the Brook</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" title="Henri Matisse"><em class="lft"></em><b>Henri Matisse</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="The Girl with Green Eyes">The Girl with Green Eyes</a></li>
<li><a href="#nogo" title="The Dream">The Dream</a></li>
<li><a href="#nogo" title="Woman in Blue">Woman in Blue</a></li>
<li><a href="#nogo" title="The Yellow Dress">The Yellow Dress</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" title="Paul Cezanne"><em class="lft"></em><b>Paul Cezanne</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="The Large Bathers">The Large Bathers</a></li>
<li><a href="#nogo" title="Onions and Bottles">Onions and Bottles</a></li>
<li><a href="#nogo" title="Mardi Gras">Mardi Gras</a></li>
<li><a href="#nogo" title="Still Life">Still Life</a></li>
<li><a href="#nogo" title="Boy in a Red Waistcoat">Boy in a Red Waistcoat</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
and wrote css file :
<style type="text/css">
#info {height:400px;}
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_line.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menu {
position:relative;
width:750px;
height:2em;
background:#b7c6ac;
border-top:10px solid #b7c6ac;
padding-bottom:1px;
background:#b7c6ac url(drop/line.gif) bottom left repeat-x;
margin-bottom:5em;
margin-top:50px;
}
* html .menu {padding-bottom:0;}
.menu ul{
list-style-type:none;
padding:0;
margin:0 0 0 20px;
width:730px;
height:100%;
}
.menu li{
float:left;
}
.menu table{
position:absolute;
border-collapse:collapse;
left:0;
top:0;
}
.menu a, .menu :visited {
color:#fff;
text-decoration:none;
}
.menu a em.lft, .menu :visited em.lft {
display:block;
float:left;
width:5px;
height:2em;
background: transparent url(drop/lefta.gif);
border-bottom:1px solid #777;
}
.menu a b, .menu :visited b {
display:block;
font-weight:normal;
float:left;
padding:0 10px;
height:2em;line-height:1.9em;
background: transparent url(drop/mida.gif);
cursor:pointer;
border-bottom:1px solid #777;
}
.menu a em.rgt, .menu :visited em.rgt {
display:block;
float:left;
width:5px;
height:2em;
background: transparent url(drop/righta.gif);
border-bottom:1px solid #777;
}
.menu ul ul {
visibility:hidden;
position:absolute;
height:2em;
top:2em;
left:-20px;
width:749px;
border-bottom:1px solid #777;
border-right:1px solid #777;
background:#ccc;
}
.menu :hover {
white-space:normal;
}
.menu a:hover b {
color:#000;
background: transparent url(drop/midb.gif);
border-bottom-color:#ccc;
}
.menu a:hover em.lft {
background: transparent url(drop/leftb.gif);
border-bottom-color:#ccc;
}
.menu a:hover em.rgt {
background: transparent url(drop/rightb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a b
{
color:#000;
background: transparent url(drop/midb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a em.lft {
background: transparent url(drop/leftb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a em.rgt {
background: transparent url(drop/rightb.gif);
border-bottom-color:#ccc;
}
.menu ul li:hover ul,
.menu ul a:hover ul{
display:block;
visibility:visible;
top:2em;
margin-top:1px;
}
.menu ul :hover ul li {
display:block;
border-left:1px solid #777;
background:#ccc;
height:2em;
}
.menu ul :hover ul li a {
display:block;
font-size:0.8em;
height:2em;
line-height:2.5em;
width:auto;
float:left;
color:#444;
padding:0 10px;}
.menu ul :hover ul li a:hover {
color:#c00;
}
</style>
Finally I cluded this css menu file,
<tr>
<td style="width:950px; height:28px; valign: top">
<? include($g4[path]."/_control/_topmenu/topmenu.php"); ?>
</td>
</tr>
But I could not see submenus.
Any comment would be appreciated.