Jump to content

Stuck on a drop down menu that gets stuck


ajoo

Recommended Posts

Hi all ! 
 
I have a website at www.bestbet.bugs3.com/club/demo.php wherein I have a menu on a menubar which seems to be malfunctioning. I am unable to rectify this. If anyone has ever come across a similar behavior pleas help me out.
 
The login and ID is itsme and f19768 respectively.
 
The menu is a simple menu with two buttons Home and Member. The Member upon mouse hover drops down two submenus Member & Record. The menu functions fine if I click on Home or Member submenu. After  clicking any of these two buttons if I hover on Member, the menu drops down again but if I click on Record submenu and then mouse hover on Member, the menu does not hover and seems to be locked for some unknown reason. I then have to click on Home to unlock the menu. 
 
I am baffled by this locking action. Please help.
 
Thanks !
 
The css file
/* CSS for menu buttons & the navbar */

.navbar{
width: 1000px;
height: 25px;
background-image: url(../images/navbar_grad1.jpg);
background-repeat: repeat-x;
}

.button {
margin: 0px;
padding: 0px;
}

.button ul {
margin: 0px;
padding: 0px;
}


.button li {
list-style: none;
float: left;
position: relative;
background: #efefef;  /* Rem This helped remove the transparency issue in menu buttons. It in effect assigns the block color of the menu button */
}

.button ul li a {
' padding: 5px, 10px, 5px, 10px;
 line-height: 23px;
 color: #222222;
 text-align: center;
 text-decoration : none;
 width: 100px;
 height: 25px;
 display: block;
}

.button ul ul {
position: absolute;
display: none;
}

.button ul li:hover ul {
display:block;
}

.button ul{
padding: 0 0px;
'border-radius: 10px;
list-style: none;
position: relative;
display: inline-block;
background: linear-gradient(top, #efefef 08, #bbbbbb 1008);
background: -webkit-linear-gradient(top, #efefef 08, #bbbbbb 1008); /* For Chrome and Safari */
background: -moz-linear-gradient(top, #efefef 08, #bbbbbb 1008); /* For old Fx (3.6 to 15) */
box-shadow: 0px 0px 9px rgba(0,0,0,15);
}

.button ul li{
float: left;
}

.button ul li:hover{
background: #4b545f;                                            /* Changes the background color of the button on hover to white */
background: linear-gradient(top, #4f5964 08, #5f6975 408);
background: -webkit-linear-gradient(top, #4f5964 08, #5f6975 408); /* For Chrome and Safari */
background: -moz-linear-gradient(top, #4f5964 08, #5f6975 408); /* For old Fx (3.6 to 15) */
}

.button ul li:hover a{
line-height: 23px;
color: #fff;
}

.button ul li:hover > ul {margin:0px; padding:0px;}
.button ul li:hover > ul li{float:none; display:block;}
.button ul li:hover > ul li a{color:#666; min-width:100px;}
.button ul li:hover > ul li a:hover{color: #fff;}

.button ul li {position:relative;}
.button ul li ul{position:absolute; top: 25px; left: 0px;}

the navbar 

<div class = 'navbar'>
<div class = 'button'>

<ul>
    <li> <a href="demo.php?page=home">Home</a> </li>

    <li> <a href="#">Member</a>
        <ul>
            <li> <a href="demo.php?page=gallery">Member</a> </li>
            <li> <a href="demo.php?page=contacts">Record</a> </li>
        </ul>
    </li>
</ul>

</div>
</div>

The file that processes thye clicking on the 'Record' drop down menu.

<?php
// error_reporting(E_ALL & ~E_NOTICE);
if(!defined('INCLUDE_CHECK')) die('header.php is cannot run directly');

sec_session_start();

if(isset($_SESSION['timeout']))
{
   $is_timed_out =  is_timed_out();         // check for timeout of a session.
   if($is_timed_out == 1)
   {
     $_SESSION['msg'] = " FROM  --- TIMEOUT ---  LINE 51";
     header ("Location: loggedout.php");    // logout if timed out
     exit;
   }
}

$error = 0;
$err = "";

// $_SESSION['msg_conterr'] = $_SESSION['msg']['reg-err'];
// $_SESSION['msg_contsucc']= $_SESSION['reg-success'];

$table = "employees";

if($_POST['submit']=='Submit')
{
        $id = $_POST['id'];
        $query = "Select * FROM $table WHERE ID = $id";
        $result = mysqli_query($fcon,$query);
        if(!$result)die('Error in accessing the Database ' . mysqli_error($fcon));
        else
        {
            $rows=mysqli_fetch_array($result);
            $fname = htmlspecialchars($rows['fname']);
            $lname = htmlspecialchars($rows['lname']);
            $dob   = htmlspecialchars($rows['dob']);
            $room_no = htmlspecialchars($rows['room_no']);
        }
        $name = htmlspecialchars($fname.'  '.$lname);
//        $_SESSION['msg']['reg-err']="Enter a unique User ID";
//        $_SESSION['msg']['reg-success']="";
        mysqli_free_result($result);


}

if($_POST['esubmit']=='ERegister')
{

        $err = array();
        $room_no = htmlspecialchars($_POST['room_no']);
        $name = htmlspecialchars($_POST['name']);

        $current = 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

        if(isset($_SERVER['HTTP_REFERER'])) $referrer = $_SERVER['HTTP_REFERER'];

        if ( $referrer != $current )
        {
                $err[]='WRONG PAGE WRONG FORM = '.$_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']. 'SCRIPT = ';
        }

        if(strlen($_POST['userid'])<4 || strlen($_POST['userid'])>32)
        {
                $err[]='Your username must be between 3 and 32 characters!';
        }

        if(preg_match('/[^a-z0-9\-\_\.]+/i',$_POST['userid']))
        {
                $err[]='Your username contains invalid characters!';
        }

        if(preg_match('/[^a-z0-9\-\_\.]+/i',$_POST['city']))
        {
                $err[]='Your city contains invalid characters!';
        }

        if(!count($err))
        {

                $pass = substr(md5($_SERVER['REMOTE_ADDR'].microtime().rand(1,100000)),0,6);
                $userid = mysqli_real_escape_string($fcon,$_POST['userid']);

                $query = "Select Username FROM members WHERE Username = '$userid' ";
                $result = mysqli_query($fcon,$query);
                $rowcount=mysqli_num_rows($result);

                if($rowcount == 0)      // dumn co
                {
                        $strSql="INSERT INTO members(Username,Password,city,room_no)
                                                VALUES(
                                                        '".$userid."',
                                                        '".md5($pass)."',
                                                        '".$city."',
                                                        '".$room_no."'
                                                        )";
                        mysqli_query($fcon,$strSql) or die (mysqli_error($fcon));
                        mysqli_free_result($result);

                  if(mysqli_affected_rows($fcon)==1)    // data inserted successfully
                   {

                   } else $err[] = ' Error inserting data ';
                }

                else {
                $err[]='This username is already taken!';
               }
        }

        if(count($err))
        {
                $_SESSION['msg']['reg-err'] = implode('<br />',$err);
        }

}
?>

<div class = 'mainbody'>

<style type="text/css">

.lblock {
    float:left;
    width: 50%;
    height: 476px;
    background-color: #888;
    position: relative;
    text-align: left;
}

.rblock {
    float:right;
    width: 50%;
    height: 476px;
    background-color: #C87;
    position: relative;
    text-align: center;
}

.rblock p{
padding: 2px;
font-family: verdana;
font-size: 14px;
text-align: center;
color: #fff;
}

.mainbody{
width: 1000px;
height: 476px;
font-family: verdana;
font-size: 11px;
color: #313131;
background: #c5c5c5;
overflow: auto;
}

<!-- Styling of the left side rows -->

        .TFtable{
                width:100%;
                border-collapse:collapse;
        }
        .TFtable td{
                padding:7px; border:#4e95f4 1px solid;
        }
        /* provide some minimal visual accomodation for IE8 and below */
        .TFtable tr{
                background: #b8d1f3;
        }
        /*  Define the background color for all the ODD background rows  */
        .TFtable tr:nth-child(odd){
                background: #b8d1f3;
        }
        /*  Define the background color for all the EVEN background rows  */
        .TFtable tr:nth-child(even){
                background: #dae5f4;
        }

<!-- Styling of the input form -->

.rblock input[type=submit] {
    width: 30em;
    height: 3em;
}

</style>

<div class = 'lblock'>
<!-- ////////////// TABLE STARTS HERE /////////////////// -->

<?php
$query = "Select * FROM $table ";
$result = mysqli_query($fcon,$query);
if(!$result)die('Error in accessing the Database ' . mysqli_error($fcon));
else
 {
     $count = 0;
     $tf ="demo.php?page=contacts";

     echo "<table class=TFtable width=100% >";
     echo "<tr> <td COLSPAN=4 bgcolor='#aafff1' >CLUB MEMBERS REGISTER </td></tr>";

       while($rows=mysqli_fetch_array($result))
       {
        $count = $count+1;
        $field[$count][0] = $rows['ID'];
        $field[$count][1] = $rows['fname'];
        $field[$count][2] = $rows['lname'];
        $field[$count][3] = $rows['city'];

        echo "<tr>";
        echo "<td> " .$count. "</td>";
        echo "<form action = demo.php?page=contacts method = post > ";
        echo "<td> &nbsp ".$rows['fname'].' '.$rows['lname']. "</td>";
        echo "<td> <Input type = hidden name = id value=" .$field[$count][0]. " /> </td>";
        echo "<td> <Input type=submit name=submit value=Submit /> </td>";
        echo "</tr>";
        echo "</form>";
       }
     echo '</table>';

 }
?>
</div>

<div class = 'rblock' >
   <center>
   <form action="demo.php?page=contacts" method = "POST" >
   <!-- <table bgcolor="#89a89a" cellspacing = 10px cellpadding = 10px> -->
   <table class = 'TFtable' width = 100%>
   <tr><td COLSPAN = 2 bgcolor="#aafff1">CLUB REGISTRATION </td></tr>

   <tr> <td width = 30%>Room No: </td><td width = 70%> <input size="30" maxlength="30" STYLE="background-color: #efefef;" type ="text/css" name="room_no" value = "<?php echo ($room_no); ?>" readonly/> <input size="10" maxlength="30" type ="hidden" name="sid" value = "<?php echo ($sid); ?>" /> </td>

   <tr> <td width = 30%>Name :  </td><td width = 70%><input size="30" maxlength="60" type ="text/css" name="name" value = "<?php echo ($name); ?>" readonly/> </td>

   <tr> <td width = 30%>City : </td><td width = 70%><input size="30" maxlength="60" type="text"  name="city" value = "<?php echo ($city); ?>" readonly/> </td>

   <tr> <td>User ID :*  </td><td><input size="30" maxlength="60" type ="text/css" name="userid" value = "<?php if(isset($_POST["userid"])) echo htmlspecialchars($userid); ?>"/></td>

   <tr><td colspan = 2 align = "center"> <Input style="height:22px; width:64px" type = "submit"  name = "esubmit"  value = "ERegister" /> </td></tr>

   <tr><td COLSPAN = 2 bgcolor="#aafff1" align = 'center'> <?php echo $_SESSION['msg_conterr'] ; ?><?php echo $_SESSION['msg_contsucc'] ; ?>  </td></tr>

   </table>
   </form>
</div>

</div>

In case these are not sufficient, I can zip the entire website ( its not very big) and send / post it as an attachment on this forum or to an email ID for anyone wanting to help. 

 

Thanks again to all.

 

Link to comment
Share on other sites

Hi friends,

 

I came back this morning and saw no response to my query and thought either I must be doing something brilliant ( big doubt!) or something downright foolish ( more likely). So instead of being disheartened, I took that as an opportunity to delve deeper and explore my code again. I then broke my code apart piecemeal till I came to a point where I realized that in all probability the sub-menu was not really locked but was going under one of the divs!! and when I shifted .lblock div (LEFT BLOCK) down by 50 points, well there was the menu buried under it.

 

So the locking was just an illusion and the sub-menus were appearing though underneath the left div. Well that solves most of it except that now maybe someone can say how I can get the menu to be on top and now below the divs when the mouse hover action is triggered. Please check the pic attached. It shows the dropdown menu going below the left div. Btw the portion with the grey background is the left div, the portion with the brown background is the right div and the total area covered by both is the mainbody div. The mainbody div holds the left and the right div.

 

The div structure portion of the code is as follows:

/////////////////////////// MAIN BODY DIV HOLDS THE LEFT AND RIGHT DIVS
<div class = 'mainbody'>

<div class = 'lblock'>

<!-- ////////////// LEFT DIV STARTS HERE /////////////////// -->

<?php
$query = "Select * FROM $table ";
$result = mysqli_query($fcon,$query);
if(!$result)die('Error in accessing the Database ' . mysqli_error($fcon));
else
 {
     $count = 0;
     $tf ="demo.php?page=contacts";

     echo "<table class=TFtable width=100% >";
     echo "<tr> <td COLSPAN=4 bgcolor='#aafff1' >CLUB MEMBERS REGISTER </td></tr>";

       while($rows=mysqli_fetch_array($result))
       {
        $count = $count+1;
        $field[$count][0] = $rows['ID'];
        $field[$count][1] = $rows['fname'];
        $field[$count][2] = $rows['lname'];
        $field[$count][3] = $rows['city'];

        echo "<tr>";
        echo "<td> " .$count. "</td>";
        echo "<form action = demo.php?page=contacts method = post > ";
        echo "<td> &nbsp ".$rows['fname'].' '.$rows['lname']. "</td>";
        echo "<td> <Input type = hidden name = id value=" .$field[$count][0]. " /> </td>";
        echo "<td> <Input type=submit name=submit value=Submit /> </td>";
        echo "</tr>";
        echo "</form>";
       }
     echo '</table>';

 }
?>
</div>

//////////////////// RIGHT DIV STARTS HERE //////////////////////////////////

<div class = 'rblock' >
   <center>
   <form action="demo.php?page=contacts" method = "POST" >
   <!-- <table bgcolor="#89a89a" cellspacing = 10px cellpadding = 10px> -->
   <table class = 'TFtable' width = 100%>
   <tr><td COLSPAN = 2 bgcolor="#aafff1">CLUB REGISTRATION </td></tr>

   <tr> <td width = 30%>Room No: </td><td width = 70%> <input size="30" maxlength="30" STYLE="background-color: #efefef;" type ="text/css" name="room_no" value = "<?php echo ($room_no); ?>" readonly/> <input size="10" maxlength="30" type ="hidden" name="sid" value = "<?php echo ($sid); ?>" /> </td>

   <tr> <td width = 30%>Name :  </td><td width = 70%><input size="30" maxlength="60" type ="text/css" name="name" value = "<?php echo ($name); ?>" readonly/> </td>

   <tr> <td width = 30%>City : </td><td width = 70%><input size="30" maxlength="60" type="text"  name="city" value = "<?php echo ($city); ?>" readonly/> </td>

   <tr> <td>User ID :*  </td><td><input size="30" maxlength="60" type ="text/css" name="userid" value = "<?php if(isset($_POST["userid"])) echo htmlspecialchars($userid); ?>"/></td>

   <tr><td colspan = 2 align = "center"> <Input style="height:22px; width:64px" type = "submit"  name = "esubmit"  value = "ERegister" /> </td></tr>

   <tr><td COLSPAN = 2 bgcolor="#aafff1" align = 'center'> <?php echo $_SESSION['msg_conterr'] ; ?><?php echo $_SESSION['msg_contsucc'] ; ?>  </td></tr>

   </table>
   </form>
</div>

</div>

post-146548-0-96170000-1400054664_thumb.gif

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.