2014-02-22 66 views
0

,这是我的主页画面菜单栏工作不正常

this is my home page image

这是我的菜单栏,我不能能够点击它

this my menu-bar that i cant able to click on it

2enter image description here

这是我的菜单栏CSS代码,我正在使用

ul.semiopaquemenu{ /* main menu UL */ 
text-align:center; 
font: bold 14px Georgia; 
width: 100%; 
background-color:#99CCFF; 
padding: 11px 0 8px 0; /* padding of the 4 sides of the menu */ 
margin: 0; 
text-align: center; 
<%--position:absolute; 
height: 20px; 
top: 114px; 
left: 2px; 
--%>  } 

ul.semiopaquemenu li{ 
display: inline; 
overflow:visible; 
} 

ul.semiopaquemenu li a{ 
color:Black; 
padding: 6px 8px 6px 8px; /* padding of the 4 sides of each menu link */ 
margin-right: 15px; /* spacing between each menu link */ 
text-decoration: none; 
} 

ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{ 
color: black; 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgyIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xNiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* IE9+ SVG equivalent of linear gradients */ 
background: -moz-linear-gradient(top, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.16) 100%); /* fade from white (0.82 opacty) to 0.16 opacity */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.82)), color-stop(100%,rgba(255,255,255,0.16))); 
background: -webkit-linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%); 
background: -o-linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%); 
background: -ms-linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%); 
background: linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1ffffff', endColorstr='#29ffffff',GradientType=0); 
-moz-box-shadow: 0 0 2px #595959; /* CSS3 box shadows */ 
-webkit-box-shadow: 0 0 5px #595959; 
box-shadow: 0 0 5px #595959; 
overflow:visible; 
padding-top: 10px; /* large padding to get menu item to protrude upwards */ 
padding-bottom: 10px; /* large padding to get menu item to protrude downwards */ 
} 
ul.semiopaquemenu li { 
    position: relative; 
    background-color:Transparent; 
} 
/*sub menu*/ 
ul.semiopaquemenu li ul.sub-menu { 
    display:none; 
    position: absolute; 
    LEFT:-39PX; 
    top:25px; 
    background-color:#99CCFF; 
    width:150px; 
    padding:0px; 
    margin:0px; 
    list-style:none; 
    overflow:visible; 
    background-position: right center; 
    background-repeat: no-repeat; 
    padding-right: 0px; 
    <%-- border-left: 2px solid #4b6c9e; 
    border-right: 2px solid #4b6c9e; 
    border-bottom: 2px solid #4b6c9e;--%> 
    text-decoration:italic; 
    text-transform:uppercase; 
} 
    ul.semiopaquemenu li ul a 
    { 

    border-bottom: 2px dotted #F7F7F7; 
    padding: 10px; 
    margin:0px; 
    display: block; 
    overflow:visible; 
    } 

ul.semiopaquemenu li:hover ul.sub-menu { 
     display: block; 
    overflow: visible; 

} 

这是我的HTML代码

<tr> 
       <td align="center"> 
         <ul class="semiopaquemenu"> 
         &nbsp;&nbsp;&nbsp;&nbsp;<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
          </li> 
&nbsp;<li><asp:LinkButton ID="lbhome" runat="server" onclick="lbhome_Click">Home</asp:LinkButton> 

<li><asp:LinkButton ID="lbFAQ" runat="server">Board</asp:LinkButton> 
<ul class="sub-menu"> 
      <li> 
       <a href="MumbaiboardDepartments.aspx">Mumbai Board</a> 
       </li> 
       <li> 
       <a href="#">Kokan Board</a> 
      </li> 
      <li> 
       <a href="#">Pune Board</a> 
      </li> 
     </ul> 
</li> 
&nbsp;&nbsp;&nbsp; 
<li><asp:LinkButton ID="lbservice" runat ="server" onclick="lbservice_Click" >Service Search</asp:LinkButton></li> 
&nbsp; 
<li><asp:LinkButton ID="lbqs" runat ="server" onclick="lbqs_Click">Quick Search</asp:LinkButton></li> 
&nbsp; 
<li><asp:LinkButton ID="lbcr" runat ="server" onclick="lbcr_Click">CallRegister</asp:LinkButton></li> 
<li><asp:LinkButton ID="lbcom" runat ="server" onclick="lbcom_Click">Complaint</asp:LinkButton></li> 
<li><asp:LinkButton ID="lbrpt" runat ="server" onclick="lbrpt_Click">Report</asp:LinkButton></li> 
<li><asp:LinkButton ID="lblog" runat ="server" onclick="lblog_Click">Logout</asp:LinkButton></li> 
</li> 
</ul> 

         </td> </tr> 

当我另一个页面我不能能够点击子菜单栏上点击。 请帮我这个。

+0

发布您的HTML代码 –

+1

http://jsfiddle.net/KzK99/1/这是你需要什么? –

+1

你为什么用桌子? –

回答

1

试试这个

.semiopaquemenu { 
text-align:center; 
font: bold 14px Georgia; 
width: 100%; 
background-color:#99CCFF; 
padding: 11px 0 8px 0; 
margin: 0; 
text-align: center; 
height: 20px; 
top: 114px; 
left: 2px; 
z-index:99999 ; /* using Z-INDEX */ 
position:relative; 
+0

thnx for ur help –

+0

很高兴为您效劳 – Beginner

1

HTML

<ul class="semiopaquemenu"> 
    <li></li> 
    <li> <a href="lbhome_Click">Home</a> 

     <li><a href="#">Board</a> 

      <ul class="sub-menu"> 
       <li> <a href="MumbaiboardDepartments.aspx">Mumbai Board</a> 

       </li> 
       <li> <a href="#">Kokan Board</a> 

       </li> 
       <li> <a href="#">Pune Board</a> 

       </li> 
      </ul> 
     </li> 
     <li> <a href="lbservice_Click">Service Search</a> 

     </li>&nbsp; 
     <li> <a href="lbqs_Click">Quick Search</a> 

     </li>&nbsp; 
     <li> <a href="lbcr_Click">CallRegister</a> 

     </li> 
     <li> 
      <a href="lbcom_Click">Complaint</a> 
     </li> 
     <li> 
      <a href="lbrpt_Click">Report</a> 
     </li> 
     <li> 
      <a href="lblog_Click">Logout</a> 
     </li> 
    </li> 
</ul> 

Live Demo

输出:

enter image description here

编辑:

改变这个CSS

ul.semiopaquemenu { 
    /* main menu UL */ 
    text-align:center; 
    font: bold 14px Georgia; 
    width: 100%; 
    background-color:#99CCFF; 
    padding: 11px 0 8px 0; 
    /* padding of the 4 sides of the menu */ 
    margin: 0; 
    text-align: center; 

    height: 20px; 
    top: 114px; 
    left: 2px; 
    z-index:600px 
     position:relative; 

} 

Working fiddle

Live Demo

+0

不适用于我的项目 –