gpt4 book ai didi

html css 菜单无法正常工作

转载 作者:行者123 更新时间:2023-11-28 16:35:12 24 4
gpt4 key购买 nike

您好,我有一个菜单,我将其包含在每一页中。在此页面中,当我将鼠标移到书籍和分配菜单栏上时,它可以正常工作,但搜索和添加菜单栏无法正常工作。当我将鼠标移到菜单栏上时,它不显示子菜单,但是当我将鼠标移到文本上时,它显示子菜单,当我尝试转到子菜单时,它消失了。

菜单代码

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

最佳答案

尝试将此样式添加到您的 <form> :

form{   
display:inline-block;
}

查看此 fiddle .

你的 #addDriver样式有一个 margin-left:490px;因为它是 block它干扰了您的菜单悬停(重叠)的元素。

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

关于html css 菜单无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30031447/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com