CSS子菜單欄

這是我的菜單欄的css代碼，它有一個錯誤，並不能正常工作。CSS子菜單欄

ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{ 
color: black; 
-moz-box-shadow: 0 0 2px #595959; /* CSS3 box shadows */ 
-webkit-box-shadow: 0 0 5px #595959; 
box-shadow: 0 0 5px #595959; 
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; 
} 
/*sub menu*/ 
ul.semiopaquemenu li ul.sub-menu { 
    display:none; 
    position: absolute; 
    LEFT:-22PX; 
    top:25px; 
    background-color:#99CCFF; 
    width:130px; 
    padding:10px; 

    border-left: 2px solid #4b6c9e; 
    border-right: 2px solid #4b6c9e; 
    border-bottom: 2px solid #4b6c9e; 
    border-bottom-left-radius: 10px; 
    -webkit-border-bottom-left-radius: 10px; 
    -moz-border-radius-bottomleft: 10px; 
    border-bottom-right-radius: 10px; 
    -webkit-border-bottom-right-radius: 10px; 
    -moz-border-radius-bottomright: 10px; 
    text-decoration:italic; 
    text-transform:uppercase; 
} 
ul.semiopaquemenu li:hover ul.sub-menu { 
    display:block; 
} 
</style>

這是我的菜單欄的HTML代碼：

<ul class="semiopaquemenu"> 
    <li><asp:LinkButton ID="lbFAQ" runat="server" PostBackUrl="~/FAQ.aspx">Department</asp:LinkButton> 
    <ul class="sub-menu"> 
       <li> 
        <a href="#">Sub Menu 1</a> 
       </li> 
       <br /> 
       <li> 
        <a href="#">Sub Menu 2</a> 
       </li> 
       <li> 
        <a href="#">Sub Menu 3</a> 
       </li> 
        <br /> 
       <li> 
        <a href="#">Sub Menu 4</a> 
       </li> 
      </ul> 
    </li> 
    </ul>

在這我不能做盒子的子菜單項，所以請這方面的幫助。

enter image description here

JSFiddle Demo

My Expected output

來源

2014-02-19 Tanmay Nehete

我感到困惑你是真正做的事情。請嘗試更多地指定問題。謝謝 –

你能給我們提供你想要的圖像嗎？ –

小提琴：http://jsfiddle.net/s8TN9/ – Shiva

我們並不清楚什麼是真正需要的，但是我的理解是，你需要在子菜單項以及

一盒試試這個JS fiddle

添加這個CSS

.sub-menu a{ 
    border-bottom: 1px solid #000; 
    padding: 10px; 
    display: block; 

}

在<li>標籤之間刪除多餘的溴

還能去除保證金填充表格的子菜單<ul>

ul.semiopaquemenu li ul.sub-menu { 
    padding:0px; 
    margin:0px; 
    list-style:none; 

}

來源

2014-02-19 06:55:46 Champ

thnx先生的幫助 –

歡迎@Tanmay – Champ

屬性的改變CSS類ul.semiopaquemenu li ul.sub-menu到border-bottom: 0px solid #4b6c9e;。該行出現由於在2px改變它提PX至0px.

來源

2014-02-19 06:46:29 pudaykiran

回答

相關問題