Question

您好我有一个菜单，我在每个页面都包含这个。在这个页面中，书和＆amp;当我将鼠标移到它上面时，分配菜单栏工作正常，但搜索并添加菜单栏无法正常工作。当我将鼠标移到菜单栏上时，它不会显示子菜单，但是当我将鼠标移动到文本上时，它会显示子菜单，当我尝试进入子菜单时，它会消失。

菜单代码

<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>

菜单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>

Answer 1

尝试将此款式添加到<form>：

form{   
    display:inline-block;
}

请参阅此fiddle。

您的#addDriver样式有margin-left:490px;，因为它是block元素，它会干扰您的菜单悬停（它重叠）。

查看像Bootstrap这样的CSS网格框架是一个好主意，它可以帮助您在网格上布局网站，而不会出现这些重叠问题。

html css菜单无法正常工作

1 个答案: