473,322 Members | 1,755 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

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 3103

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

Similar topics

0
by: vikram.cvk | last post by:
Hello Experts, Im trying to design a CSS vertical drop down menu which should have the following functionality. Home About Us | -->Overview
2
by: Craig van Nieuwkerk | last post by:
Hi. I am trying to create a horizontal menu like the one here http://www.milonic.com/menusample25.php where the drop down menu for each item it horizontal on a new row instead of vertical. Another...
4
by: Papa Legba | last post by:
I'm looking for a Seeking pure CSS horizontal menu with sub-menus which drop down on mouse over. Compatible with as many browsers as possible. Any ideas?
4
by: Amil | last post by:
Does anyone have a recommendation on an AWESOME (free) horizontal drop-down menu using DTHML? I'm not using VS 2005 yet. Thanks. Amil
1
by: Stephen | last post by:
Hi From an example supplied with Visual Web Developer Express 2005, I am trying to build a "horizontal menu" with drop down links. In the example below I have added: url="mouse.aspx?/"> to...
1
by: GauthamNaidu | last post by:
How to create a pure css horizontal drop down menu as designed in your top menu
19
by: Jim | last post by:
Hi, I have two questions/problems pertaining to CSS horizontal dropdown menus and am hoping that someone here can help me out. (1) I'm having a problem centering the menu. I picked up the...
0
by: Jack Gray | last post by:
I am using a nested list for a simple drop-down menu. All CSS and XHTML validate. The menu is displayed properly in 7 different newer browsers including IE7, Firefox, Opera & Safari. I have...
0
by: Jack Gray | last post by:
Hi everyone, I am using a nested list for a simple drop-down menu. All CSS and XHTML validate. The menu is displayed properly in 7 different newer browsers including IE7, Firefox, Opera & Safari....
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.