html css菜單無法正常工作

-1

嗨我有一個菜單，我將它包含在每個頁面中。在這個頁面中，當我將鼠標移動到其上時，&分配菜單欄正常工作，但搜索並添加菜單欄無法正常工作。當我將鼠標移動到菜單欄上時，它不顯示子菜單，但是當我將鼠標移動到文本上時，它會顯示子菜單，當我嘗試去子菜單時，它會消失。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>

來源

2015-05-04 Vaibhav Dalela

請將您的代碼添加到jsfiddle.net或類似的網站，它會更容易讓人來幫助您 – Almis

我創建了一個jsfiddle [here]（http://jsfiddle.net/f986azod/），它似乎工作正常對我來說（所有的懸停似乎都適用於每個菜單和子菜單項） – zgood

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

嘗試增加這種風格你<form>：

form{ 
    display:inline-block; 
}

看到這個fiddle。

你的#addDriver風格有一個margin-left:490px;，因爲它是一個block元素它干擾你的菜單懸停（它是重疊的）。

查看一個像Bootstrap這樣的CSS網格框架是個好主意，它可以幫助您在沒有這些重疊問題的情況下在網格上佈局網站。

來源

2015-05-04 13:52:56 zgood

已解決問題。非常感謝zgood。 :) –

html css菜單無法正常工作

回答

相關問題