468,308 Members | 1,293 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,308 developers. It's quick & easy.

CSS horizontal drop down menu

I am trying to incorporate a CSS drop-down menu into a site (suckerfish menu). The menu gets lost behind the content below it, but only on one of the drop downs (News). The error occurs on all of the browsers I have tested it on (IE6, IE7, Firefox, Opera and Safari). It is probably something simple, but I can't find it!

Here is the CSS (using external style sheets):

style-temp.css (Main style sheet for the site):
Expand|Select|Wrap|Line Numbers
  1. * {
  2.   font-family: verdana, arial, sans-serif;
  3. }
  4.  
  5. body {
  6.   background: url('gfx/bg.jpg') repeat-x fixed;
  7.   text-align: center;
  8.   font-size: 73%;
  9.   margin: 0;
  10.   padding: 0;
  11. }
  12.  
  13. a {
  14.   color: #449;
  15. }
  16.  
  17. a:hover {
  18.   color: #246;
  19. }
  20.  
  21. a:visited {
  22.   color: #69a;
  23. }
  24.  
  25. a.cvs_enter {
  26.   text-align: center;
  27.   display: block;
  28.   background: #035;
  29.   height: 23px;
  30.   padding-top: 10px;
  31.   color: #fff;
  32.   border: 1px solid #69b;
  33.   border-right: 1px solid #333;
  34.   border-bottom: 1px solid #333;
  35.   text-decoration: none;
  36.   font-weight: bold;
  37.   margin: 20px 50px;
  38. }
  39.  
  40. a.cvs_enter:hover {
  41.   background: #369;
  42.   color: #fff;
  43. }
  44.  
  45. h2 {
  46.   margin: 25px 0;
  47.   font-size: 15pt;
  48.   font-weight: normal;
  49.   color: #78b;
  50. }
  51.  
  52. h2 span {
  53.   color: #999;
  54. }
  55.  
  56. h3 {
  57.   font-size: 12pt;
  58.   font-weight: normal;
  59.   margin: .2em 0;
  60.   color: #666;
  61. }
  62.  
  63. h4 {
  64.   font-size: 11pt;
  65. }
  66.  
  67. sup.tm {
  68.   font-size: .5em;
  69. }
  70.  
  71. #wrap {
  72.   width: 790px;
  73.   margin: 0 auto 20px auto;
  74.   text-align: left;
  75.   background: #fff;
  76. }
  77.  
  78. #menu_area {
  79.     padding-left: 25px;
  80.     text-align: center;
  81.     height: 31px;
  82.     background: url('gfx/menu_bg.jpg') no-repeat;
  83.     overflow: hidden;
  84. }
  85.  
  86. #nav, #nav ul {
  87.     float: left;
  88.     width: 740px;
  89.     list-style: none;
  90.     line-height: 1;
  91.     background:  url('gfx/menu_over_1.jpg') repeat-x;
  92.     /*font-weight: bold;*/
  93.     padding: 0;
  94.     /*border: solid #434261;*/
  95.     /*border-width: 1px 0;*/
  96.     margin: 0 0 1em 0;
  97.     text-align: left;   /*added by me*/
  98.     font-size: 8pt;     /*added by me*/
  99.     white-space: normal; /*added by me*/
  100. }    
  101.  
  102. #nav a {
  103.     display: block;
  104.     /*width: 10em;
  105.     w\idth: 6em;*/
  106.     color: #000;
  107.     text-decoration: none;
  108.     padding: 3px 20px 3px 20px;
  109.     font-size: 8pt;  /*added by me*/
  110. }
  111.  
  112. #nav a.arrow {
  113.     background: url(rightarrow2.gif) center right no-repeat;
  114. }
  115.  
  116. #nav li {
  117.     float: left;
  118.     padding-top: 6px;  /*padding: 0;*/
  119.     /*width: 8em;*/
  120.     height: 25px;
  121.     /*margin: 0;
  122.     display: inline;
  123.     white-space: nowrap;*/
  124. }
  125.  
  126. /* LEVEL 1 DROP DOWN  - WHOLE LIST */
  127. #nav li ul {
  128.     position: absolute;
  129.     left: -999em;
  130.     height: auto;
  131.     width: 12.4em;
  132.     w/idth: 11.9em;
  133.     font-weight: normal;
  134.     border-width: 0.25em;
  135.     margin-top: 6px;  /* margin: 0;*/
  136.     /*display: inline;
  137.     white-space: nowrap;*/    
  138. }
  139.  
  140. /* LEVEL 1 DROP DOWN  - INDIVIDUAL ITEMS */
  141. #nav li li {
  142.     padding-left: 1em;
  143.     width: 13.5em;
  144.     text-align: left;
  145.     background: #D8D8D8;
  146.     border-bottom: 1px solid #434261; /*added by me*/
  147.     border-left: 1px solid #434261;   /*added by me*/
  148.     border-right: 1px solid #434261;  /*added by me*/
  149.     white-space: nowrap;  /* DON'T TAKE THIS OUT!  IT STOPS LINE WRAPPING ON THE SUBMENU */
  150. }
  151.  
  152. #nav li ul a {
  153.     width: 13em;
  154.     w\idth: 9em;
  155.     padding-left: 0px;
  156. }
  157.  
  158. #nav li ul ul {
  159.     margin: -1.75em 0 0 14em;
  160. }
  161.  
  162. #nav li:hover ul ul, 
  163. #nav li:hover ul ul ul, 
  164. #nav li.sfhover ul ul, 
  165. #nav li.sfhover ul ul ul {
  166.     left: -999em;
  167. }
  168.  
  169. #nav li:hover ul, 
  170. #nav li li:hover ul, 
  171. #nav li li li:hover ul, 
  172. #nav li.sfhover ul,
  173. #nav li li.sfhover ul, 
  174. #nav li li li.sfhover ul {
  175.     left: auto;
  176. }
  177.  
  178. #nav li:hover, 
  179. #nav li.sfhover {
  180.     background: #fbfbfb;
  181. }
  182.  
  183. #vert_menu {
  184.     text-align: left;
  185.     text-indent: 1em;
  186.     width: 185px;
  187.     margin-left: 11px;
  188.     _margin-left: 5px;
  189.     background: url('gfx/vmenu_bg.jpg');
  190.     float: left;
  191. }
  192.  
  193. #vert_menu a {
  194.     color: #fff;
  195.     width: 185px;
  196.     height: 25px;
  197.     background: url('gfx/vmenu_bg.jpg') no-repeat;
  198. }
  199.  
  200. #vert_menu a:hover {
  201.     color: #ccc;
  202. }
  203.  
  204. #vert_menu img {
  205.     border: 3px solid #225;
  206.     margin: 4px 0 0 4px;
  207. }
  208.  
  209. #vert_menu p {
  210.     text-indent: 0;
  211.     padding: 20px 10px;
  212.     color: #efefef;
  213. }
  214.  
  215. #vert_menu_bot {
  216.     /*  margin-top: 10px;*/
  217.     height: 50px;
  218.     background: url('gfx/vmenu_bot.jpg') no-repeat center bottom;
  219. }
  220.  
  221. #content {
  222.     float: left;
  223.     width: 550px;
  224.     margin-left: 17px;
  225.     min-height: 500px;
  226.     _height: 500px;
  227. }
  228.  
  229. #content p {
  230.     line-height: 1.5;
  231.     text-align: justify;
  232.     margin: 20px 0;
  233. }
  234.  
  235. .float_note {
  236.     width: 350px;
  237.     text-align: left;
  238.     line-height: 1.5;
  239.     background: #035;
  240.     color: #fff;
  241.     padding: 1.2em;
  242.     float: right;
  243.     margin: .5em 0 .8em 1.5em;
  244. }
  245.  
  246. .float_note h3 {
  247.     font-size: 10pt;
  248.     font-weight: bold;
  249.     color: #fff;
  250. }
  251.  
  252. .setleft {
  253.     text-align: left;
  254. }
  255.  
  256. /*  Lists        */
  257.  
  258. #content ul {
  259.     list-style-type: none;
  260.     padding: 1em 2em 1em 4em;
  261. }
  262.  
  263. #content li {
  264.     margin: 1em;
  265.     color: #444;
  266.     list-style-type: none;
  267.     line-height: 1.5;
  268.     padding-left: 14px;
  269.     background: url('gfx/bullet.jpg') no-repeat 0 5px;
  270. }
  271.  
  272. #content li ul li {
  273.     font-size: .95em;
  274.     background: url('gfx/subbullet.jpg') no-repeat 0 4px;
  275.     color: #666;
  276. }
  277.  
  278. #content li ol li {
  279.     font-size: .95em;
  280.     list-style-type: decimal;
  281.     color: #666;
  282. }
  283.  
  284. /*   Tables   */
  285.  
  286. #content table {
  287.     margin: 1.2em 0;
  288.     font-size: .96em;
  289.     border-bottom: 1px solid #efefef;
  290.     width: 550px;
  291. }
  292.  
  293. #content table th, #content table td {
  294.     padding: 5px 10px;
  295.     border-top: 1px solid #efefef;
  296.     border-right: 1px solid #efefef;
  297. }
  298.  
  299. #content table th {
  300.     border: none;
  301.     color: #fff;
  302.     text-align: left;
  303.     background: #225;
  304. }
  305.  
  306. #content table.noborder  {margin: 1.2em 0 0 0; font-size: 1.0em;  border-bottom: 0px solid #efefef; width: 550px;}
  307. #content table.noborder th  {border: 0px;}
  308. #content table.noborder td  {border: 0px; vertical-align:top;}
  309. #content table.noborder tr  {border: 0px;}
  310.  
  311. #content table.noborder2  {margin: 0 0 0 0; font-size: 1.0em;  border-bottom: 0px solid #efefef; width: 550px;}
  312. #content table.noborder2 th  {border: 0px;}
  313. #content table.noborder2 td  {border: 0px; vertical-align:top;}
  314. #content table.noborder2 tr  {border: 0px;}
  315.  
  316. #content ol.number li {
  317.     font-size: 1.0em;
  318.     list-style-type: decimal;
  319.     background: #FFF;
  320.     padding-left: 3px;
  321.     margin-left:20px;
  322. }
  323.  
  324. td.tbl_date {
  325.     width: 150px;
  326.     height: 40px;
  327.     text-align: center;
  328.     color: #555;
  329.     border-left: 1px solid #efefef;
  330.     background: #fafafa;
  331. }
  332.  
  333. table thead th.dl_head {
  334.     background: #024 !important;
  335. }
  336.  
  337. table td.tbl_dl_label, table td.tbl_cvs_param {
  338.     width: 280px;
  339.     border-left: 1px solid #efefef;
  340. }
  341.  
  342. table td.tbl_dl_link {
  343.     background: #f3f5fa;
  344. }
  345.  
  346. table td.tbl_cvs_param {
  347.   width: 100px;
  348. }
  349.  
  350. #footer {
  351.   text-align: center;
  352.   padding-top: 20px;
  353.   height: 30px;
  354.   background: url('gfx/footer.jpg') no-repeat bottom center;
  355.   clear: both;
  356. }
  357.  
  358.  
  359. /* Forms */
  360.  
  361. fieldset {
  362.   border: solid 0 transparent;
  363.   border-bottom: 1px solid #eaeaea;
  364.   margin: 2em 0;
  365.   padding: 0 0 1em 0;
  366. }
  367.  
  368. fieldset div {
  369.   margin: 1em 0;
  370. }
  371.  
  372.  
  373. label, .checkbox_float div label {
  374.   float: left;
  375.   width: 220px;
  376.   height: 22px;
  377.   line-height: 22px;
  378.   margin-right: 12px;
  379.   text-align: right;
  380. }
  381.  
  382. input, select {
  383.   width: 180px;
  384. }
  385.  
  386. textarea {
  387.   width: 300px;
  388.   height: 100px;
  389. }
  390.  
  391. input.submit {
  392.   margin-left: 232px;
  393. }
  394.  
  395.  
  396. splash-temp.css (Style sheet for the splash page that has the error):  
  397.  
  398. #col_left, #col_right, #col_center {
  399.     margin-top: 12px;
  400.     width: 260px;
  401.     float: left;
  402. }
  403. #col_left {
  404.     margin-left: 4px;
  405. }
  406.  
  407. .sect {
  408.     margin: 0 8px 15px 8px;
  409.     background: url('gfx/sect_bg.jpg') repeat-y;
  410. }
  411. .sect h2 {
  412.     font-size: 11pt;
  413.     color: #fff;
  414.     background: url('gfx/sect_head.jpg') no-repeat;
  415.     height: 32px;
  416.     padding: 9px 0 0 10px;
  417.     margin: 0;
  418.     font-weight: normal;
  419. }
  420. .sect h2 a {
  421.     text-decoration: none;
  422.     color: #fff;
  423. }
  424.  
  425.  
  426. .sect_body {
  427.     height: 182px;
  428. }
  429.  
  430.  
  431. .sect_download .sect_body {
  432.     height: auto;
  433.     min-height: 182px;
  434.     position: relative;
  435.     margin: 0px auto 0px auto;   
  436.     overflow:hidden;
  437. }
  438. .sect_download h2 {
  439.     height: 36px;
  440.     margin-top: -4px;
  441.     padding-top: 13px;
  442.     background: url('gfx/sect_dl_head.jpg') no-repeat;
  443.     position: relative;
  444.     /*top:0px;
  445.     left:0px;*/
  446.     z-index: 1;
  447. }
  448.  
  449. .sect_download a.download {
  450.     display: block;
  451.     width: 226px;
  452.     height: 51px;
  453.     background: url('gfx/dl_link.jpg') no-repeat;
  454.     margin: 0 0 2px 9px;
  455.     overflow: hidden;
  456.     position: relative;
  457. }
  458.  
  459. .sect_download p {
  460.     margin-bottom: 4px;
  461. }
  462.  
  463. .sect_download a.download span {
  464.     display: none;
  465. }
  466.  
  467. .sect_download a.download:hover {
  468.     background: url('gfx/dl_link_hover.jpg') no-repeat;
  469. }
  470.  
  471. .sect_foot {
  472.     height: 28px;
  473.     background: url('gfx/sect_foot.jpg') no-repeat left bottom;
  474. }
  475.  
  476. .sect_foot_dwnld {
  477.     height: 28px;
  478.     margin-top:3px;
  479.     background: url('gfx/sect_foot.jpg') no-repeat left bottom;
  480. }
  481.  
  482. .sect p, .sect ul {
  483.     padding: 5px 14px;
  484. }
  485.  
  486. #content .sect p {
  487.     text-align: left;
  488.     line-height: 1.5;
  489.     margin: 0;
  490. }
  491.  
  492. #content .sect li, #content .sect ul {
  493.     display: block;
  494.     list-style-type: none;
  495.     padding: 1em;
  496. }
  497.  
  498. #content .sect li {
  499.     margin: 0;
  500.     padding: 1px;
  501.     color: #444;
  502.     list-style-type: none;
  503.     line-height: 1;
  504.     width: 210px;
  505.     background: none;
  506. }
  507.  
  508. #content .sect li a {
  509.     text-decoration: none;
  510.     color: #68a;
  511.     border: 1px solid #9bd;
  512.     background: #ccffcc;
  513.     display: block;
  514.     padding: 6px 6px;
  515.     margin: 4px 0;
  516.     height: 1.3em;
  517. }
  518.  
  519. #content .sect li a:hover {
  520.     background: #ffffe0;
  521.     color: #468;
  522.     border: 1px solid #69c;
  523. }
  524.  
  525. #content {
  526.     width: 790px;
  527.     margin-left: 1px;
  528. }
  529.  
  530. #menu_area {
  531.     padding-left: 25px;
  532.     text-align: center;
  533.     height: 31px;
  534.     background: url('gfx/menu_bg_splash.jpg') no-repeat;
  535.     overflow: hidden;
  536. }
  537.  
index-splash.html (Splash page html file):
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Splash</title>

<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" />

<!-- CSS -->
<link rel="stylesheet" href="style-temp.css" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="splash-temp.css" media="screen,projection" type="text/css" />

<!-- JavaScript -->
<script src="scripts/swfobject.js" type="text/javascript"></script>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagNam e("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>


</head>

<body>
<div id="wrap">
<div id="headerflash"><p style="color:white">Splash</p></div>

<div id="menu_area">
<ul id="nav">
<li><a href="?p=0" class="center">Home</a></li>
<li><a name="About Us">About Us</a>
<ul>
<li><a href="?p=1&amp;sub=0">Who We Are</a></li>
<li><a href="?p=1&amp;sub=1">Mission Statement</a></li>
<li><a href="?p=1&amp;sub=2">Presentations</a></li>
<li><a href="?p=1&amp;sub=3">Careers</a></li>
<li><a href="?p=1&amp;sub=4">FAQ</a></li>
</ul>
</li>
<li><a name="Clients">Clients</a>
<ul>
<li><a href="?p=2&amp;sub=0">Enterprises</a></li>
<li><a href="?p=2&amp;sub=1">Software Vendors</a></li>
<li><a href="?p=2&amp;sub=2">Service Providers</a></li>
</ul>
</li>
<li><a name="Products & Services">Products & Services</a>
<ul>
<li><a href="?p=3&amp;sub=0">Products</a></li>
<li><a href="?p=3&amp;sub=1">Services</a></li>
<li><a href="?p=3&amp;sub=2">Connectors</a></li>
<li><a href="?p=3&amp;sub=3">OpenII Toolkit</a></li>

<li><a href="?p=3&amp;sub=4">Training</a></li>
<li><a href="?p=3&amp;sub=5">Toolkit FAQ</a></li>
</ul>
</li>
<li><a href="?p=4" class="center">Demo</a></li>
<li><a name="News">News</a>
<ul>
<li><a href="?p=5&amp;sub=0">Announcements</a></li>
<li><a href="?p=5&amp;sub=1">Press Release</a></li>
</ul>
</li>
<li><a href="?p=6" class="center">Contact Us</a></li>
</ul>
</div>

<div id="content">
<div id="col_left">
<div class="sect">
<div class="sect_body">
<h2><a href="?p=6">News</a></h2>
<p>Content goes here!</p>
</div>
<div class="sect_foot"></div>
</div>
<div class="sect">
<div class="sect_body">
<h2><a href="?p=1">About Us</a></h2>
<p>Content goes here!</p>
</div>
<div class="sect_foot"></div>
</div>
</div>

<div id="col_center">
<div class="sect">
<div class="sect_body">
<h2><a href="?p=3">Products &amp; Services</a></h2>
<p>Content goes here!</p>
</div>
<div class="sect_foot"></div>
</div>

<div class="sect">
<div class="sect_body">
<h2><a href="?page=employment">Employment</a></h2>
<p>Content goes here!</p>
</div>
<div class="sect_foot"> </div>
</div>
</div>

<div id="col_right">
<div class="sect sect_download">
<div class="sect_body">
<h2><a href="?page=downloads">ESB Demo</a></h2>
<a href="?" class="download"><span>Download Now</span></a>
<p>Content goes here!</p>
</div>
<div class="sect_foot"> </div>
</div>

<div class="sect">
<div class="sect_body">
<h2><a href="?page=links">Links</a></h2>
<p>Content goes here!</p>
</div>
<div class="sect_foot"> </div>
</div>
</div>
</div>


<div id="footer">
&copy; 2007 All Rights Reserved. For more information <a href="?p=7" title="Click here to contact us.">contact us</a>.
</div>
</div>
</body>
</html>[/html]
Oct 19 '07 #1
0 2905

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Craig van Nieuwkerk | last post: by
4 posts views Thread by Amil | last post: by
1 post views Thread by Stephen | last post: by
reply views Thread by Jack Gray | last post: by
reply views Thread by Jack Gray | last post: by
reply views Thread by Teichintx | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.