css pull down menu - does not clear columns (web page problem)

css pull down menu - does not clear columns (web page problem)

Using CSS menus

    I used CSS menus as PULL DOWN web pages menus

    so when you click on the YELLOW (black lettering), the BLACK (with yellow lettering) pulls down

    ie:    Home Page
             Map Espana

    Each COLUMN disappears when you go to the next column.

 

Here is the problem:

but when you click "stop the music"

the columns of menus STAY - they do not "refresh" and disappear to show the NEXT menu column

 

web pages with music:

http://www.3973cds.com/3973cdssidislimane.htm
http://www.3973cds.com/3973cdspartytime.htm
http://www.3973cds.com/3973cdspartytime2.htm
http://www.3973cds.com/3973cdshome.htm

 

Hi,

Try to refresh webpage forcefully by form.Refresh() command.

-Paresh

if form.refresh() did not work then try to look some problem in css file there may be some prob in .(dot )on that class or any other porb

Here is my css page

this is called standard2.css

 

/* Use this page to overwrite styles found in standard1.css - do not change standard1.css */

 

#nav {
 padding: 0 0 0 10px;
 margin: 0;
 list-style: none;
 width: 825px;
 height: 20px;
 background:#ffff00;
 margin-bottom: 5px;
 
 }
 
#nav ul {
 padding: 0;
 margin: 0;
 list-style: none;
}

#nav a {
 display: block;
 color:#000000;
 text-decoration:none;
}

#nav li {
 font-family:Arial, Helvetica, sans-serif;
 color:#000000;
 background:#ffff00;
 font-weight:bold;
 float: left;
}

/*Drop down menu tags*/

#nav li ul {
 position: absolute;
 width: 125px;
 left: -999em;
 border: 1px solid #ffff00;
}

#nav li ul li {
 width:119px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:10px;
 font-weight:normal;
 border-bottom: 1px solid #ffff00;
 clear:left;
 padding: 3px;
 background: #000000;
}

#nav li ul li a {
 color: #ffff00;
 background-color:#000000;
 display:block;
 }

#nav li ul li a:hover{
 color: #ffff00;
 background-color:#ccc;
 margin:0px;
 display:block;
}

#nav li:hover ul, #nav li.sfhover ul {
 left: auto;
}

/*End Drop down menu tags*/

.pic{
float:left;
padding:0 5px 5px 0;
}
.text{
clear:right;
padding-bottom:30px;
}

.story{
padding-bottom:50px;
}

input, button, select, textarea {
 font-family: verdana, arial, sans-serif;
 font-size: 12px;
 margin-top: 0;
 margin-bottom: 0;
 }

/* Standard tag definitions */

/* DO NOT Use this page to overwrite styles found in standard1.css - use  change standard2.css */

 

p {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 line-height: 150%;
 padding: 0px 10px 10px 0px;
 margin:0;
 }
 
h1 {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 18px;
 color: #609;
 padding: 0px 10px 0px 0px;
 font-weight: bold;
 margin:0;
 }
 
h2 {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
 padding: 10px 10px 0px 0px;
 font-weight: bold;
 margin:0;
 color: #609;
 }
 
h3 {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 padding: 10px 10px 0px 0px;
 font-weight: bold;
 margin:0;
 color: #000;
 }
 
li {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 line-height: 150%;
 }

a {
 color: #090;
 text-decoration:none;
 }
 
a:hover {
 color: #090;
 text-decoration:underline;
 }

hr {
 height: 1px;
 color: #ccc;
 background-color:#ccc;
 }
 
img {
 display: block;
 border: 0px none;
 }
 

/* ids for defining areas of the page and how they should be styled */

#boundary {
 width: 750px;
 margin:0px auto;
 border:0px none;
 }
 
#header {
 background-color:#fff;
 clear:both;
 width:750px;

 margin:0px auto;
 padding: 10px 0 0 0;
 }
 
#wordmark {
 display: block;
 float:right;
 padding: 0;
 border: 0px none;
 margin: 0;
 width: 170px;
 height: 50px
 }
 
#section_id {
 display: block;
 float:left;
 padding: 0;
 border: 0px none;
 margin: 0;
 width: 540px;
 height: 50px
 }

 
#content {
 clear:both;
 padding:0;
 }
 
#menu {
 background: #609;
 width: 744px;
 font-size: 11px;
 font-weight:bold;
 font-family: Arial, Helvetica, sans-serif;
 color: #fff;
 padding: 3px;
 text-align: left;
    margin: 0 0 10px 0;
 }
 
#menu ul {
 margin: 0;
 padding: 0;
 border: 0px none;
 text-align:center; list-style-type:none
 }
 
#menu li {
 font-family: Arial, Helvetica, sans-serif;
 font-size:11px;
 list-style: none;
 line-height:100%;
 margin: 0;
 padding-top: 0px;
 padding-left: 0px;
 display: inline;
 }
 
#menu li a:link {
 color:#fff;
 text-decoration: none;
 }
 
#menu li a:visited {
 color: #fff;
 text-decoration: none;
 }
 
#menu li a:hover {
 color:#c9f;
 text-decoration: none;
 }
 
/* Suckerfish insert */ 

#menu li ul {
 position: absolute;
 width: 10em;
 left: -999em;
}

#menu li:hover ul {
 left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
 left: auto;
}

/* end Suckerfish insert */ 

#doubleleftcol {
 display: block;
 float: left;
 width: 548px;
 padding: 0;
 border: 0px none;
 }

#leftcol{
 float: left;
 width: 143px;
 border: 0px none;
 margin-left:0px; margin-right:5px; margin-top:0px; margin-bottom:10px; padding-left:3px; padding-right:0; padding-top:0; padding-bottom:0
 }
 
#leftcol ul {
 list-style: none;
 margin: 0;
 padding: 7px 0 0px 0px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 }

#leftcol li {
 list-style: none;
 margin: 0;
 padding: 5px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 }

#centercol {
 float: left;
 width: 385px;
 border: 0px none;
 margin: 0;
 padding-left:3px; padding-right:3px; padding-top:0; padding-bottom:0
 }

#rightcol {
 float: left;
 padding: 0;
 width: 190px;
 border: 0px none;
 margin-left:5px; margin-right:0; margin-top:0; margin-bottom:0
 }
 
#rightcol ul {
 list-style: none;
 margin: 0;
 padding: 7px 0 0px 0px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 }

#rightcol li {
 list-style: none;
 margin: 0;
 padding: 5px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 }

#sidebar {
 text-align: center;
 border: 1px solid #609;
 padding: 0 0 10px 0;
 width: 190px;
 margin: 0;
 }
 
#sidebar p {
 text-align:left;
 font-size: 11px;
 padding: 10px;
 }
 
#sidebar ul {
 font-size: 10px;
 list-style: none;
 margin: 0;
 padding: 0 3px 0 3px;
 border-top: solid #b4b4b4 1px;
 }

#sidebar li {
 text-align: center;
 font-weight:bold;
 list-style: none;
 padding: 3px 0 3px 0;
 margin:0px;
 display:block;
 border-bottom: solid #b4b4b4 1px;
 }

#sidebar li a:link {
 color: #609;
 text-decoration: none;
 margin:0px;
 display:block;
 }
 
#sidebar li a:visited {
 color: #609;
 text-decoration: none;
 margin:0px;
 display:block;
 }

#sidebar li a:hover {
 color: #fff;
 background-color:#609;
 margin:0px;
 display:block;
 }

#footer {
 display:block;
 float:none;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 clear:both;
 border-top: 1px solid #609;
 padding: 10px 0 20px 0;
 width: 750px;
 margin-top: 20px;
 }
 
#footer p {
 padding-top: 10px;
 }
 
/* custom classes */

.alt {
 display: none;
 }

.caption {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 font-size: 10px;
 }

.nav_about_box {
 background-color: #609;
 font-family:Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #fff;
 font-weight: bold;
 text-align: center;
 padding: 1px;
 }

.general_items {
 background-color:#eee;
 font-family:Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #000;
 font-weight: bold;
 text-align: center;
 padding: 0px;
 border-top: 1px solid #000;
 border-bottom: 1px solid #000;
 margin: 20px 5px 10px 0;
 }
 
.thumbnail {
 padding: 5px;
 }
 
.printalso {
 display:none;
 }

By pointing me to 'mouse events' - I was able to find the section of code that handled the menu - and find the missing code:

see the THIRD display:block; below...

I had copied the code from another web site - which consistently handled menus in a great way. However, they only had ONE level of menus - they did not use pull down (or secondary) menus - thus they did not know they had an issue (or in this case, a walking time bomb).

#nav li ul li a {
color: #ffff00;
background-color:#000000;
display:block;
}


#nav li ul li a:hover{
color: #ffff00;
background-color:#ccc;
margin:0px;
display:block;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
display:block;
}