Dropdown Menu Issue

greenphoenix · #1 (**permalink**) Aug 22nd, 2006, 18:51

Hello!

I'm having a bit of trouble with a vertical dropdown menu I created based off of the ideas presented in the A List Apart article Suckerfish Dropdowns. Getting the menus to work was not a problem, but I notice that one one end of my menu, the dropdown is getting covered up with another box that floats on that side of the area. The behavior can be seen here when you put your mouse over the "support" menu choice. CSS is not a strong point of mine (I'm usually a VB6 programmer! LOL), so any help or insight as to why this behavior is occuring would be most helpful. Thanks!

My style sheet:

Code: Select all

/*--------------- Main page style------------------*/
body {
    background-color: silver;
    color: black;
    background-image: url("images/mainbg.jpg");
    font-size: 10pt;
    font-family: Verdana, Arial, Tahoma;
}

#contentwrapper {
    display: block;
    width: 800px;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    border: 0;
    background-color: white;
    color: black;
}

#titleimage {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    height: 100px;
    position: relative;
    background-color: red;
    color: black;
}

#content {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border: 0;
    padding: 0;
    position: relative;
    top: -15px;
    background-color: white;
    color: black;
    clear: left;
}

#popper {
    display: block;
    width: 200px;
    height: auto;
    float: right;
    background-color: white;
    color: black;
    margin: 8px;
}

#footer {
    display: block;
    margin-right: auto;
    margin-left: auto;
    background-color: white;
    color: gray;
    text-align: center;
    height: 50px;
    width: auto;
    font-size: 8pt;
    vertical-align: middle;
    
}
/*----------------Pop Up information box styles--------------*/
div.popperbox {
    width: 195px;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid black;
    background-color: white;
    color: black;
    z-index: -1;
}

div.pboxtitle {
    width: auto;
    height: 20px;
    position: relative;
    top: 0;
    left: 0;
    border-bottom: 1px solid black;
    color: white;
    background-color: blue;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    padding: 0px;
}

div.pboxcontent {
    padding: 8px;
    margin: 0;
    color: black
    background-color: silver;
    text-align: left;
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
}
/*----------------Menu styles ------------------------------*/
#nav {
  padding: 0;
  margin: 0;
  list-style: none;
}
  
#nav li {
  float: left;
  position: relative;
  width: 250px;
  text-align: center;
  font-weight: bold;
  background-color: white;
  color: black;
  cursor: default;
  border-bottom: 1px solid red;
  border-width: 1px 0;
  padding-top: 10px;
}

#nav li ul {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute; 
  top: 26px;
  left: 0;
  font-weight: normal;
  border: 1px solid red;
  background-color: white;
}

#nav li>ul {
    top: auto;
    left: auto;
}

#nav li ul li {
    border: 0;
    padding: 3px;
    text-align: left;
}

#nav li:hover ul, #nav li.over ul { 
    display: block; 
    
}

li#tfirst {
    border-left: 25px solid red;
}
li#tlast {
    border-right: 25px solid red;
}
li.first {
    border-top: 0;
}
li.last {
    padding-bottom: 5px;
    border-bottom: 0;
}

/*---------- Footer styles ----------- */
#footvalimage {
    display: inline;
    float: right;
    height: 31px;
    width: 88px;
    border: 0px;
    padding: 10px;
}

bee_bo · #2 (**permalink**) Aug 22nd, 2006, 20:03

Hi,

I had this problem too. Browsers read your code top to bottom and place it on the preview in this order. So because the blue contact boxes come after the menu in the code, they are displayed above the menu.

The trick is to put the list section of your code to the bottom like this:

HTML: Select all

	<div id="footer">
	<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" id="footvalimage" /></a>
<br />&copy;2006 RVS Software, All rights reserved.<ul id="nav">
<li id="tfirst">Mosaics
<ul>
<li class="first"><a href="">Features</a></li>
<li><a href="">Tour</a></li>
<li><a href="">ACH Drafts</a></li>
<li><a href="">Cash Managment</a></li>
<li><a href="">Handheld Readers</a></li>
<li><a href="">Inventory/Workorder</a></li>
<li class="last"><a href="">Radio Read Interfaces</a></li>
</ul></li>
<li>Hardware &amp; Supplies
<ul>
<li class="first"><a href="">Billing Supplies</a></li>
<li><a href="">Metre-Probe&reg;</a></li>
<li><a href="">Psion Workabout</a></li>
<li class="last"><a href="">Printers</a></li>
</ul></li>
<li class="tlast">Support
<ul>
<li class="first"><a href="">Online Support</a></li>
<li><a href="">FAQ</a></li>
<li class="last"><a href="">Contact Us</a></li>
</ul></li>
</ul>

After you've done this, you need to change the nav div in your css to position the menu to something like this

HTML: Select all

#nav {
position: absolute;
top: 75px;
left: 150px;
padding: 0;
margin: 0;
list-style: none;
z-index: 5;
}

use the top & left to place the menu wherever you want.

Hope this helps,

B x

greenphoenix · #3 (**permalink**) Aug 22nd, 2006, 20:17

Quote:

Originally Posted by bee_bo

Hi,

I had this problem too. Browsers read your code top to bottom and place it on the preview in this order. So because the blue contact boxes come after the menu in the code, they are displayed above the menu.

The trick is to put the list section of your code to the bottom like this:

HTML: Select all

    <div id="footer">
    <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" id="footvalimage" /></a>
<br />&copy;2006 RVS Software, All rights reserved.<ul id="nav">
<li id="tfirst">Mosaics
<ul>
<li class="first"><a href="">Features</a></li>
<li><a href="">Tour</a></li>
<li><a href="">ACH Drafts</a></li>
<li><a href="">Cash Managment</a></li>
<li><a href="">Handheld Readers</a></li>
<li><a href="">Inventory/Workorder</a></li>
<li class="last"><a href="">Radio Read Interfaces</a></li>
</ul></li>
<li>Hardware &amp; Supplies
<ul>
<li class="first"><a href="">Billing Supplies</a></li>
<li><a href="">Metre-Probe&reg;</a></li>
<li><a href="">Psion Workabout</a></li>
<li class="last"><a href="">Printers</a></li>
</ul></li>
<li class="tlast">Support
<ul>
<li class="first"><a href="">Online Support</a></li>
<li><a href="">FAQ</a></li>
<li class="last"><a href="">Contact Us</a></li>
</ul></li>
</ul>

After you've done this, you need to change the nav div in your css to position the menu to something like this

HTML: Select all

#nav {
position: absolute;
top: 75px;
left: 150px;
padding: 0;
margin: 0;
list-style: none;
z-index: 5;
}

use the top & left to place the menu wherever you want.

Hope this helps,

B x

Putting my menu code at the bottom of the document fixed the problem. That was a lot less painless than I thought it would be, thank you so much!

-- Heather

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS dropdown menu problems	unitedcraig	Web Page Design	6	Apr 3rd, 2008 22:31
Dropdown menu from logo	freddylaval	JavaScript Forum	3	Jan 13th, 2008 16:27
menu, dropdown	everland	Flash & Multimedia Forum	2	Aug 21st, 2007 14:58
CSS dropdown menu problem in IE	Tino	Web Page Design	2	Jun 3rd, 2007 08:48
Dropdown menu	Jorgerb	Flash & Multimedia Forum	6	May 17th, 2005 08:29

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Dropdown Menu Issue