我有一个头文件，用于包含我的网页的标题。此头文件包含在每一页。Drpdown列表中提到的头文件显示菜单，但不能clcik后，第2个元素。我有以下代码的下拉列表。此代码在demo中工作正常，但在我的网页它是不工作。我不能选择“区域3”和“区域2”（管理区域）的第二个孩子。当我试图放置我的光标或第三个元素时，它就从屏幕上消失了。
出了什么问题？

.parent {
        display: block;
        position: relative;
        float: right;
        line-height: 50px;
        background-color: #a9cc77;
        border-right: #CCC 1px solid;
    }
    
    .parent a {
        margin: 10px;
        color: #000;
        text-decoration: none;
        Font-weight:bold;
    }
    
    .parent:hover>ul {
        display: block;
        position: absolute;
    }
    
    .child {
        display: none;
    }
    
    .child li {
        background-color: #E4EFF7;
        line-height: 30px;
        border-bottom: #CCC 1px solid;
        border-right: #CCC 1px solid;
        width: 100%;
    }
    
    .child li a {
        color: #000000;
    }
    
    ul {
        list-style: none;
        margin: 0;
        padding: 0px;
        min-width: 10em;
    }
    
    ul ul ul {
        left: 100%;
        top: 0;
        margin-left: 1px;
    }
    
    li:hover {
        background-color:#04ba0d;
    }
    
    .parent li:hover {
        background-color: #14871a;
    }
    
    .expand {
        font-size: 12px;
        float: right;
        margin-right: 5px;
    }

<div class="navbar navbar-inverse set-radius-zero" >
    <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <h1 class="coolShadow" STYLE="margin-left:145px;font-weight:BOLD;text-align:center;" >SYSTEM</h1>
    </div>
    <div class="right-div" style="padding:25px 0px 5px 0px;">
    <a href="logout.php" class="btn btn-danger pull-right" style="margin-right:0px;">LOG ME OUT</a>
    </div>
    </div>
    </div>
    <!-- LOGO HEADER END-->
    <section class="menu-section">
    <div class="container">
    <div class="row ">
    <div class="col-md-12">
    <div class="navbar-collapse collapse ">
    <ul id="menu">
    <li class="parent"><a href="change-password.php">Change Password</a></li>
    <li class="parent"><a href="#">Configuration<i class="fa fa-angle-down"></i></a>
    <ul class="child">
    <li class="parent"><a href="#">Region1 <span class="expand">»</span></a>
    <ul class="child">
    <li><a href="add-region.php">Add Region</a></li>
    <li><a href="manage-region.php">Manage Region</a></li>
    </ul>
    </li>
    <li class="parent"><a href="#">Region2 <span class="expand">»</span></a>
    <ul class="child">
    <li><a href="add-region.php">Add Region</a></li>
    <li><a href="manage-region.php">Manage Region</a></li>
    </ul>
    </li>
    <li class="parent"><a href="#">Region3 <span class="expand">»</span></a>
    <ul class="child">
    <li><a href="add-region.php">Add Region</a></li>
    <li><a href="manage-region.php">Manage Region</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li class="parent"><a href="dashboard.php">Home</a></li>
    </ul>