php - 菜单不会阻塞

Question

这个菜单是用 html 和 php 制作的。我在 css 中有一个菜单。每当我将鼠标悬停在菜单项上时，它不会在鼠标悬停时生成链接，而每当我单击文本时，它都会生成链接。

<div class="panel panel-default">
    <div class="panel-heading">
        <?php if($menurow['hassubmenu'] != NULL)
        {?>

        <a data-toggle="collapse" data-parent="#accordian" href="#<?php echo $menurow['mainmenuid']; ?>" title="<?php echo $menurow['title']; ?>"><span class="badge pull-right"><i class="fa fa-plus"></i></span><?php echo $menurow['title']; ?></a>

        <?php }else{?>
        <h4 class="panel-title"><a href="<?php echo $menulink; ?>" title="<?php echo $menurow['title']; ?>"><?php echo $menurow['title']; ?></a></h4>
       <?php } ?>
    </div>
    <?php if($menurow['hassubmenu'] != NULL){?>
        <div id="<?php echo $menurow['mainmenuid']; ?>" class="panel-collapse collapse">
            <div class="panel-body">
            <ul>
            <?php 
                $menuquery2 = mysql_query("select title,itemid,catid from submenu where mainmenuid=".$menurow['mainmenuid']." order by sort asc");
                while($menurow2 = mysql_fetch_assoc($menuquery2))
                {
                    if($menurow2['itemid'] != NULL)
                    $menulink2 = "showitem.php?id=".$menurow2['itemid'];
                    elseif($menurow2['catid'] != NULL)
                    $menulink2 = "category.php?id=".$menurow2['catid'];
                    else
                    $menulink2 = "#";
            ?>
             <li><a href="<?php echo $menulink2; ?>"  title="<?php echo $menurow2['title']; ?>"><?php echo $menurow2['title']; ?></a></li>
            <?php }?>
            </ul>
            </div>
        </div>
    <?php }?>
</div>

CSS 代码

 /* New menu */
.category-products .panel {
    background-color: #FFFFFF;
    border: 0px;
    border-radius: 0px;
    box-shadow:none;
    margin-bottom: 0px;
}

.category-products .panel-default .panel-heading {
  background-color: #CCCCCC;
  border: 1px solid;
  color: #FFFFFF;
  padding: 5px 20px;
  cursor:pointer;
  height:40px;
}

.category-products .panel-default .panel-heading a {  color: #D00233;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
}

.category-products .panel-default .panel-heading a:hover {background:#D00233; color:#fff;}


.category-products .panel-default .panel-heading:hover {background:#D00233; color:#fff !important;} 

.category-products .panel-default .panel-heading .panel-title {
  color: #D00233; 
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
}

.category-products .panel-default .panel-heading .panel-title:hover {color:#fff;background:#D00233;}

请帮帮我。

Answer 1

将此添加到链接和面板标题:

display: block;
width: 100%;
height: 100%;

在你的情况下会是:

.panel-title{
    display: block;
    width: 100%;
    height: 100%;
}
.panel-title>a{
    display: block;
    width: 100%;
    height: 100%;
}