使用php创建动态菜单栏时出错?

时间:2014-02-07 17:01:50

标签: php dynamic menu nav

我使用php创建了一个带子菜单的动态菜单。但是当我使用css设置样式时,我有如图所示的错误,我得到子菜单的空白样式,如图所示。

here is the pic of the menubar

这是我没有css代码的输出

this the output without the css

这是我的php代码:

   <?php
   //for mysql connection
   $user_name = 'root';
   $password = '';
   $database = 'menu';
   $server = 'localhost';

   $db_handle = mysql_connect($server,$user_name,$password);

   $db_found = mysql_select_db($database,$db_handle);

   if($db_found){

//function to loop all the array
function loop_array($array = array(),$parent_id = 0){
    if (!empty($array[$parent_id])){
        echo '<ul>';
        foreach($array[$parent_id] as $items){
            echo "<li><a href='#'><span>";
            echo $items['label'];
            loop_array($array,$items['id']);
            echo '</span></a></li>';    
        }
        echo '</ul>';
    }
}

//function to display the menu
function display_menu(){
    $sql = "select * from tbl_menu";
    $query = mysql_query($sql) or die(mysql_error());

    $array = array();
    if(mysql_num_rows($query)){
        while($rows = mysql_fetch_array($query)){
            $array[$rows['parent']][]=$rows;
        }
        loop_array($array);
    }
}//end of the function
   }
   else{
echo "Database not found";
   }

  ?>

  <!doctype html>
  <html lang="en">
<head>
    <title>Dynamic Menu</title>
    <link rel='stylesheet' type='text/css' href='styles.css' />
</head>
<body>
<div id='cssmenu'>
<?php
    display_menu();
?>
<div id='cssmenu'>
</body>
   </html>

这是我的表格及其数据

   CREATE DATABASE IF NOT EXISTS `menu` 
   USE `menu`;

   Table structure for table `tbl_menu`

   CREATE TABLE IF NOT EXISTS `tbl_menu` (
   `id` int(11) NOT NULL AUTO_INCREMENT,
   `label` varchar(50) NOT NULL,
   `link` varchar(100) NOT NULL DEFAULT '#',
   `parent` int(11) NOT NULL DEFAULT '0',
   `sort` int(11) DEFAULT NULL,
   PRIMARY KEY (`id`)
   ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;


   Dumping data for table `tbl_menu`

   INSERT INTO `tbl_menu` (`id`, `label`, `link`, `parent`, `sort`) VALUES
   (1, 'home', 'home.php', 0, NULL),
   (2, 'about us', 'about.php', 0, NULL),
   (3, 'services', '#', 0, NULL),
   (4, 'preparation', '#', 0, NULL),
   (5, 'contact', 'contact.php', 0, NULL),
   (6, 'ielts classes', '#', 3, NULL),
   (7, 'visa processing', '#', 3, NULL),
   (8, 'tofel classes', '#', 3, NULL),
   (9, 'study in usa', '#', 4, NULL),
   (10, 'study in australia', '#', 4, NULL),
   (11, 'study in japan', '#', 4, NULL),
   (12, 'study in korea', '#', 4, NULL);

这是css代码

#cssmenu {
   border: none;
   border: 0px;
   margin: 0px;
   padding: 0px;
   font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans';
   font-size: 14px;
   font-weight: bold;
   width: auto;
   }
   #cssmenu ul {
   background: #333333;
   height: 35px;
   list-style: none;
   margin: 0;
   padding: 0;
   }
   #cssmenu li {
   float: left;
   padding: 0px;
   }
   #cssmenu li a {
   background: #333333 url('images/seperator.png') bottom right no-repeat;
   display: block;
   font-weight: normal;
   line-height: 35px;
   margin: 0px;
   padding: 0px 25px;
   text-align: center;
   text-decoration: none;
   }
   #cssmenu > ul > li > a {
   color: #cccccc;
   }
   #cssmenu ul ul a {
   color: #cccccc;
   }
   #cssmenu li > a:hover,
   #cssmenu ul li:hover > a {
   background: #2580a2 url('images/hover.png') bottom center no-repeat;
   color: #FFFFFF;
   text-decoration: none;
   }
   #cssmenu li ul {
   background: #333333;
   display: none;
   height: auto;
   padding: 0px;
   margin: 0px;
   border: 0px;
   position: absolute;
   width: 225px;
   z-index: 200;
   /*top:1em;
   /*left:0;*/

  }
  #cssmenu li:hover ul {
  display: block;
  }
  #cssmenu li li {
  background: url('images/sub_sep.png') bottom left no-repeat;
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 225px;
  }
  #cssmenu li:hover li a {
  background: none;
  }
  #cssmenu li ul a {
  display: block;
  height: 35px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
 }
 #cssmenu li ul a:hover,
 #cssmenu li ul li:hover > a {
 background: #2580a2 url('images/hover_sub.png') center left no-repeat;
 border: 0px;
 color: #ffffff;
 text-decoration: none;
 }
 #cssmenu p {
 clear: left;
}

1 个答案:

答案 0 :(得分:0)

请输入Html输出...
这个问题通常发生在PHP源保存时这个php文件的空格或字符集是UTF-8或其他不支持的字符集的... 更改charset并检查数据库...
这是最古老的问题...