CSS Codes
CSS Layouts
Results 1 to 2 of 2

Thread: Menu Through CSS

  1. 05-17-2008, 01:23 PM #1
    deb_cal2
    deb_cal2 is offline New Comer (less than 5 posts)
    Join Date
    May 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Menu Through CSS

    I have designed a site named http://www.bioedge.org/. The site has some CSS problem in IE7.

    In the Menubar of this site The rss feeds drop down is not working properly in IE7 (it disappears before you can click on BioEdge or MediaWatch). But, its work fine in Mozilla. Following is the code that I m using, this site is designed by ExpressionEngine :-

    Code:
    <style type="text/css">

.menu2 {
float:left; width: 470px; font-family: verdana, arial, sans-serif; font-size:11px; border-top:1px solid #c00;
background-image: url({path=../images/uploads/}bg_bot.jpg); repeat-x; 
margin:0 0 20px 0; 
color: #FFFFFF;
margin-top: 0px;
	margin-right: -10px;
	margin-bottom: 0px;
	margin-left: 0px;
align:center;
}
.menu2 ul {
padding:0;margin:0;list-style-type:none;
}
.menu2 ul li {
float:left; position:relative;
}
.menu2 ul li.group {display:block; text-indent:30px; background:#666; color:#ff0; width:152px; padding:4px 0;}

.menu2 ul li a, .menu2 ul li a:visited {
float:left; display:block; text-decoration:none; color:#FFFFFF; padding:0px 16px; line-height:25px; height:30px;
}

.menu2 ul li:hover {width:auto;}

.menu2 ul li a:hover {background: url(../../../Documents%20and%20Settings/Mithilesh/Desktop/images/sub2a.gif); color:#FF9900;}

.menu2 ul li:hover a {background: url(../../../Documents%20and%20Settings/Mithilesh/Desktop/images/sub2a.gif); color:#FF9900;}

.menu2 ul li ul {
display: none;
}
.menu2 table {
margin:0; border-collapse:collapse;font-size:11px; position:absolute; top:0; left:0;
}

/* specific to non IE browsers */
.menu2 ul li:hover ul {
display:block; position:absolute;top:29px; background:;margin-top:1px; left:0; width:152px;
}

.menu2 ul li:hover ul.scroller {
height:138px; width:172px; overflow:auto;}

.menu2 ul li:hover ul.endstop {
left:-90px;
}
.menu2 ul li:hover ul li ul {
display: none;
}
.menu2 ul li:hover ul li a {
display:block; background: #41627E; color:#fff;height:auto;line-height:15px;padding:4px 16px; width:120px;
}
.menu2 ul li:hover ul li a.drop {
background:#FFFFFF;
}
.menu2 ul li:hover ul li a:hover {
color:#FF9900; background: #888;
}
.menu2 ul li:hover ul li a:hover.drop {
background:#888; color:#ff0;
}
.menu2 ul li:hover ul li:hover ul {
display:block; position:absolute; left:153px; top:-70px; color:#FFFFFF; left:152px; height:138px; width:172px; overflow:auto; background:#FFFFFF;
}
.menu2 ul li:hover ul li:hover ul li a {background:#888;}
.menu2 ul li:hover ul li:hover ul li.group {width:152px; padding:5px 0;}


.menu2 ul li:hover ul li:hover ul.left {
left:-200px;
}
.menu2 ul li:hover ul li:hover ul li a:hover {background:#666; color:#0ff;}



/* specific to IE5.5 and IE6 browsers */
.menu2 ul li a:hover ul {
display:block;position:absolute;top:30px; top:29px; background:#42688F;left:0; margin-top:1px;
}
.menu2 ul li a:hover ul.scroller {
height:138px; overflow:auto;}

.menu2 ul li a:hover ul.endstop {
left: -90px;
}
.menu2 ul li a:hover ul li a {
display:block; color:#fff; height:1px; line-height:15px; padding:4px 16px; width:152px; w\idth:120px;
}
.menu2 ul li a:hover ul li a.drop {
background:#888; padding-bottom:5px;
}
.menu2 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; width:0;
}
.menu2 ul li a:hover ul li a:hover {
color:#ff0; background: #888;
}
.menu2 ul li a:hover ul li a:hover.drop {
 background: #888; color:#ff0;
}
.menu2 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; top:-69px; t\op:-70px; color:#000; left:152px; height:138px; width:170px; overflow:auto; background:#888;
}
.menu2 ul li a:hover ul li a:hover ul.left {
left:-170px;
}
.menu2 ul li a:hover ul li a:hover ul li a:hover {background:#666; color:#0ff;}


.left {clear:both;}


</style>

<html>
<body>

<table width="938" border="0" cellspacing="0" cellpadding="0">
<tr>
	<td color:#FFFFFF >
<div class="menu2">
<ul>
<li><a href="{path=site/index}" class="menu2one">home</a></li>
</ul>


<ul>
<li><a href="{path=bioethics/about_us}" class="menu2two">about us</a></li>
</ul>


<ul>
<li><a href="{path=bioethics/contact}" class="menu2three">contact us</a></li>
</ul>


<ul>
<li><a href="{path=archive/archive_display}" class="menu2four">archive</a></li>
</ul>

<ul>
<li><a href="" class="menu2five">rss feeds »
<table><tbody><tr><td>
<ul>
<li><a href="http://www.bioedge.org/index.php/bioethics/rss_bioedge/">BioEdge</a></li>
<li><a href="http://www.bioedge.org/index.php/bioethics/rss/">MediaWatch</a></li>
</ul>
</td></tr></tbody></table>
</li>
</ul>
</td>
<td class="menu2" height=27px margin-right:10px;>{embed="bioethics/search"}</td>
</div>  
</tr>
</table>
</body>
</html>
    Pls, give me a urgent reply with fixing this error. If anyone can send a fresh code that acts as http://www.bioedge.org, It will also acceptable. I m waiting for ur quick & positive reply.

    Thanks.
    Debasish

    Edit: Added tags.Also, by the way, if you say it's urgent, there's a more chance that people would ignore this question.
    Last edited by tech_support; 05-18-2008 at 06:28 AM.
    Reply With Quote Reply With Quote
  2. 05-18-2008, 05:33 AM #2
    techno_race's Avatar
    techno_race
    techno_race is offline Senior Coders
    Join Date
    Feb 2007
    Location
    🌎
    Posts
    528
    Thanks
    10
    Thanked 10 Times in 10 Posts
    Blog Entries
    2

    Default

    Code:
    <style type="text/css">

.menu2 {
float:left; width: 470px; font-family: verdana, arial, sans-serif; font-size:11px; border-top:1px solid #c00;
background-image: url({path=../images/uploads/}bg_bot.jpg); repeat-x;
margin:0 0 20px 0;
color: #FFFFFF;
margin-top: 0px;
margin-right: -10px;
margin-bottom: 0px;
margin-left: 0px;
align:center;
}
.menu2 ul {
padding:0;margin:0;list-style-type:none;
}
.menu2 ul li {
float:left; position:relative;
}
.menu2 ul li.group {display:block; text-indent:30px; background:#666; color:#ff0; width:152px; padding:4px 0;}

.menu2 ul li a, .menu2 ul li a:visited {
float:left; display:block; text-decoration:none; color:#FFFFFF; padding:0px 16px; line-height:25px; height:30px;
}

.menu2 ul li:hover {width:auto;}

.menu2 ul li a:hover {background: url(../../../Documents%20and%20Settings/Mithilesh/Desktop/images/sub2a.gif); color:#FF9900;}

.menu2 ul li:hover a {background: url(../../../Documents%20and%20Settings/Mithilesh/Desktop/images/sub2a.gif); color:#FF9900;}

.menu2 ul li ul {
display: none;
}
.menu2 table {
margin:0; border-collapse:collapse;font-size:11px; position:absolute; top:0; left:0;
}

/* specific to non IE browsers */
.menu2 ul li:hover ul {
display:block; position:absolute;top:29px; background:;margin-top:1px; left:0; width:152px;
}

.menu2 ul li:hover ul.scroller {
height:138px; width:172px; overflow:auto;}

.menu2 ul li:hover ul.endstop {
left:-90px;
}
.menu2 ul li:hover ul li ul {
display: none;
}
.menu2 ul li:hover ul li a {
display:block; background: #41627E; color:#fff;height:auto;line-height:15px;padding:4px 16px; width:120px;
}
.menu2 ul li:hover ul li a.drop {
background:#FFFFFF;
}
.menu2 ul li:hover ul li a:hover {
color:#FF9900; background: #888;
}
.menu2 ul li:hover ul li a:hover.drop {
background:#888; color:#ff0;
}
.menu2 ul li:hover ul li:hover ul {
display:block; position:absolute; left:153px; top:-70px; color:#FFFFFF; left:152px; height:138px; width:172px; overflow:auto; background:#FFFFFF;
}
.menu2 ul li:hover ul li:hover ul li a {background:#888;}
.menu2 ul li:hover ul li:hover ul li.group {width:152px; padding:5px 0;}


.menu2 ul li:hover ul li:hover ul.left {
left:-200px;
}
.menu2 ul li:hover ul li:hover ul li a:hover {background:#666; color:#0ff;}



/* specific to IE5.5 and IE6 browsers */
.menu2 ul li a:hover ul {
display:block;position:absolute;top:30px; top:29px; background:#42688F;left:0; margin-top:1px;
}
.menu2 ul li a:hover ul.scroller {
height:138px; overflow:auto;}

.menu2 ul li a:hover ul.endstop {
left: -90px;
}
.menu2 ul li a:hover ul li a {
display:block; color:#fff; height:1px; line-height:15px; padding:4px 16px; width:152px; w\idth:120px;
}
.menu2 ul li a:hover ul li a.drop {
background:#888; padding-bottom:5px;
}
.menu2 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; width:0;
}
.menu2 ul li a:hover ul li a:hover {
color:#ff0; background: #888;
}
.menu2 ul li a:hover ul li a:hover.drop {
background: #888; color:#ff0;
}
.menu2 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; top:-69px; t\op:-70px; color:#000; left:152px; height:138px; width:170px; overflow:auto; background:#888;
}
.menu2 ul li a:hover ul li a:hover ul.left {
left:-170px;
}
.menu2 ul li a:hover ul li a:hover ul li a:hover {background:#666; color:#0ff;}


.left {clear:both;}


</style>

<html>
<body>

<table width="938" border="0" cellspacing="0" cellpadding="0">
<tr>
<td color:#FFFFFF >
<div class="menu2">
<ul>
<li><a href="{path=site/index}" class="menu2one">home</a></li>
</ul>


<ul>
<li><a href="{path=bioethics/about_us}" class="menu2two">about us</a></li>
</ul>


<ul>
<li><a href="{path=bioethics/contact}" class="menu2three">contact us</a></li>
</ul>


<ul>
<li><a href="{path=archive/archive_display}" class="menu2four">archive</a></li>
</ul>

<ul>
<li><a href="" class="menu2five">rss feeds »
<table><tbody><tr><td>
<ul>
<li><a href="http://www.bioedge.org/index.php/bioethics/rss_bioedge/">BioEdge</a></li>
<li><a href="http://www.bioedge.org/index.php/bioethics/rss/">MediaWatch</a></li>
</ul>
</td></tr></tbody></table>
</li>
</ul>
</td>
<td class="menu2" height=27px margin-right:10px;>{embed="bioethics/search"}</td>
</div>
</tr>
</table>
</body>
</html>
    Where did you get the menu?
    Last edited by techno_race; 05-18-2008 at 05:33 AM. Reason: changed [css] to [code] -- very tired.
    ....(o_ Penguins
    .---/(o_- techno_racing
    +(---//\-' in
    .+(_)--(_)' The McMurdo 500
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules