...

View Full Version : Aligning sub-menu



paulhicks
05-18-2005, 11:56 PM
I've changed my dropdown menu to the one at www.brothercake.com, and i had some trouble centering it. I managed to do this by putting it inside a table. But now the sub-menus aren't lineing up.

Link: www.suncom.com.au/page2

Code:



body
{
text-align: center;
margin:0 0 0 0;
margin-right: 0px;
}


table,td,tr
{
background-image:url(../img/scmenu.gif);
background-repeat: no-repeat;
border: 0px solid #000000;
border-spacing: 0px;
border-collapse: collapse;
width: 755px;
height: 181px;
text-align: left;
padding-left:0px;
padding-top:0px;
padding-right:0px;
vertical-align: top;
}


#menu
{
margin:0 0 0 -12px;
width: 755px;
text-align:center;
}



ul.horizontal, ul.horizontal li
{
margin:0px;
padding:0px;
list-style-type:none;
font-size:100%;
}

ul.horizontal
{
position:normal;
width:770px;
cursor:default;
z-index:2000;
top:3pt;
padding-left:0px;
padding-right:0px;
}

ul.horizontal li
{
width:126px;
float:left;
position:relative;
cursor:pointer;
cursor:hand;
text-align:left;
left:0;
margin:0 0 0 -1px;
}

* html ul.horizontal li
{
margin:0 0 0 0;
}

ul[class^="horizontal"] li
{
margin:0 0 0 0;
}

ul.horizontal ul
{
z-index:2020;
padding:0;
cursor:default;
position:absolute;
top:auto;
width:100%;
margin:0 0 0 0;
left:-100000px;
filter:alpha(opacity=78);
}

ul.horizontal ul li
{
width:100%;
left:auto;
margin:-1px 0 0 0;
}

ul.horizontal ul.wider, ul.horizontal ul.wider li
{
width:115%;
}

ul.horizontal ul ul
{
margin:-0.45em 0 0 7.65em;
}

@media Screen, Projection
{
ul.horizontal li:hover > ul { left:auto; }
ul.horizontal ul li:hover > ul { top:0; }
}

ul.horizontal a, ul.horizontal a:visited
{
display:block;
cursor:pointer;
cursor:hand;
background:#0050bb;
border:1px solid #ffffff;
padding:4px 7px;
font:normal normal bold 11px tahoma, verdana, sans-serif;
color:#ffffff;
text-decoration:none;
letter-spacing:1px;
}

ul.horizontal a:hover, ul.horizontal a:focus, ul.horizontal a.rollover, ul.horizontal a.rollover:visited
{
background:orange;
color:#ffffff;
}



ul.horizontal a { float:left; }
@media Screen, Projection { ul.horizontal a { float:none; } }
ul.horizontal a:not(:nth-child(n)) { float:left; }
ul.horizontal ul a { float:none !important; }
@media screen, projection {
* html ul.horizontal li {
display:inline;
f\loat:left;
background:#ffffff;
}
}
* html ul.horizontal li { position:static; }
* html ul.horizontal a { position:relative; }
ul[class^="horizontal"] ul { display:none; }
ul[class^="horizontal"] ul { display:block; }

NeilKelty
06-29-2005, 03:44 PM
Page cannot be found... Problem solved?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum