html css菜单无法正常工作

问题描述：

嗨我有一个菜单，我将它包含在每个页面中。在这个页面中，当我将鼠标移动到其上时，&分配菜单栏正常工作，但搜索并添加菜单栏无法正常工作。当我将鼠标移动到菜单栏上时，它不显示子菜单，但是当我将鼠标移动到文本上时，它会显示子菜单，当我尝试去子菜单时，它会消失。html css菜单无法正常工作

菜单代码

<div id="menu"> 
<ul> 
    <li><a href="UserLogged.jsp">Home</a></li> 
    <li><a href="#">ADMIN</a> 

    </li> 
    <li><a href="#">ADD</a> 
    <ul> 
     <li><a href="">ADD DRIVER</a></li> 
     <li><a href="">ADD EMPLOYEE</a></li> 
     <li><a href="">ADD VEHICLE</a></li> 
     <li><a href="">ADD VENDOR</a></li> 
     <li><a href="">ADD MAINTENANCE</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Search</a> 
    <ul><li><a href="ActionServlet?actionName=searchBooking">Booking</a></li> 
     <li><a href="ActionServlet?actionName=searchDriver">Driver</a></li> 
     <li><a href="">Employee</a></li> 
     <li><a href="">Vendor</a></li> 
     <li><a href="">Maintenance</a></li> 
    </ul> 
    </li> 
    <li><a href="#">BOOK & ALLOCATE</a> 
    <ul><li><a href="">BOOK VEHICLE</a></li> 
     <li><a href="">ALLOCATE VEHICLE</a></li> 

    </ul> 
    </li> 
    <li><a href="#">About</a></li> 
    <li><a href="LogoutController?actionName=logOut">Sign Out</a></li> 
</ul> 
</div>

MENU CSS代码

ul { 
    list-style-type: none; 
    margin-top: 40px; 
    margin-left: 22px; 
    width: 200px; 
    padding: 0; 
    overflow: hidden; 
    font-family: garamond; 


} 
ul li{ 
    border-bottom: 1px solid #ffffff; 
    border-radius: 5px; 
} 

ul a { 

    display: block; 
    width: 152px; 
    font-weight: bold; 
    color: #FFFFFF; 
    background-color: #98bf21; 
    padding: 18px; 
    text-decoration: none; 
    text-transform: uppercase; 
    text-align: left; 


} 
a:hover, a:active { 
    background-color: #7A991A; 
} 

ul li ul{ 

    position:absolute; 
    display:none; 
    margin-top: -20px; 
    width: 188px; 
    border: 1px solid #ffffff; 
    border-radius: 5px; 

} 

ul li:hover ul{ 
    display:block; 
    margin-left:160px; 
    font-weight: bold; 
    color: #FFFFFF; 
    background-color: #98bf21; 
    text-align: left; 
    padding : 4px; 
    text-decoration: none; 
    text-transform: uppercase; 


} 

ul li ul a{ 
    text-align: center; 

}

我的页面代码

<body> 
<% if (session.getAttribute("username")==null) { 
     out.println("Please login first"); 
    } else { %> 
    <%@include file="include/header.jsp" %> 
    <%@include file="include/menu.jsp" %> 
    <%@include file="include/sideimage.jsp" %> 

<form name="addDriver" method="post" action="AddDriverVehicleController?op=1"> 
<div id="addDriver"> 
<table> 
    <tr> 
    <td>Driver Name</td> 
    <td><input type="text" name="dName" required></td> 
    </tr> 
    <tr> 
    <td>Driver Address</td> 
    <td><input type="text" name="dAddress" required></td> 
    </tr> 
    <tr> 
    <td>City</td> 
    <td><input type="text" name="dCity" required></td> 
    </tr> 
    <tr> 
    <td>Contact No</td> 
    <td><input type="text" name="dContact" required></td> 
    </tr> 
    <tr> 
    <td>Country</td> 
    <td><input type="text" name="dCountry" required> 
    </tr> 
    <tr> 
    <td><input type="submit" value="Save"></td> 
    <td align="right"><input type="reset" value="Reset"></td> 
    </tr> 
</table> 
</div> 
</form> 

<%} %> 
</body>

请将您的代码添加到jsfiddle.net或类似的网站，它会更容易让人来帮助您 – Almis

我创建了一个jsfiddle [here]（http://jsfiddle.net/f986azod/），它似乎工作正常对我来说（所有的悬停似乎都适用于每个菜单和子菜单项） – zgood

@zgood - 是的，如果你不把桌子放在中间，它工作的很好。如果你将桌子放在最底部，它将无法正常工作。 –

答

尝试增加这种风格你<form>：

form{ 
    display:inline-block; 
}

看到这个fiddle。

你的#addDriver风格有一个margin-left:490px;，因为它是一个block元素它干扰你的菜单悬停（它是重叠的）。

查看一个像Bootstrap这样的CSS网格框架是个好主意，它可以帮助您在没有这些重叠问题的情况下在网格上布局网站。

已解决问题。非常感谢zgood。 :) –

html css菜单无法正常工作

相关推荐