具有水平子菜單和半透明帶的CSS垂直導航菜單

Question

我無法讓我的子菜單保持/顯示在與其父項相同的行上。我希望它位於通過鼠標懸停顯示的透明帶內。我是新手，非常感謝您的任何建議。

的jsfiddle：http://jsfiddle.net/kn4Jx/

展覽應該有兩條鏈路當前和以前的子菜單。

HTML：

<div> 
    <ul id="mainmenu"> 
    <li id="liHome"> 
     <a href="#item-x1y1" class="maintextcolour" rel="none" id="Home">INFO</a> 
    </li> 
    <li id="liServices" class="active"> 
     <a href="#item-x1y2" class="maintextcolour" rel="SubMenuY2"    id="Services">EXHIBITIONS</a> 
    <ul id="SubMenuY2" class="submenu"> 
    <li><a href="#" class="maintextcolour">CURRENT</a></li> 
    <li><a href="#" class="maintextcolour">PREVIOUS</a></li> 
    </ul> 
    </li> 
    <li id="liEnvironment"> 
     <a href="#item-x1y3" class="maintextcolour" rel="none" id="Environment">CV</a> 
    </li> 
    <li id="liCareer"> 
     <a href="#item-x1y4" class="maintextcolour" rel="none" id="Career">NEWS</a> 
    </li> 
    <li id="liContact"> 
     <a href="#item-x1y5" class="maintextcolour" rel="none" id="Contact">MORE</a> 
    </li> 
    </ul 
</div> 

和css：

body 
    { 
    background-color:#06F;background-size: 100%; 
    background-repeat:no-repeat; 
    } 

    #mainmenu 
    { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    position:relative; 
    } 

    #mainmenu li 
    { 
    clear: left; 
    position:relative; 
    } 

    #mainmenu a 
    { 
    display: block; 
    overflow: hidden; 
    float: left; 
    width:100%; 
    position:relative; 
    } 

    #mainmenu a:hover 
    { 
    background-position: 0 0; 
    background-color:clear; 
    background-color:rgba(255,255,255,0.5); 
    width:100%; 
    } 

    #mainmenu li.active a 
    { 
    background-position: 0 0; 
    background-color:clear; 
    width:100%; 
    } 

    .submenu 
    { 
    list-style-type: none;  
    float: left; display: none; 
    position:absolute; 
    right:900px; 
    top:0px; 
    } 

    #mainmenu li a:hover+.submenu, .submenu:hover 
    { 
    display:inline-block; 
    } 

    .submenu li 
    { 
    display: inline;  
    clear: none !important; 
    } 

    .submenu li a 
    { 
    float: right; 
    margin-left: 10px; 
    } 

    .maintextcolour 
    {  
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 24px;  
    color:#FFF; 
    text-decoration: none; 
    } 

    .maintextcolour:hover 
    {  
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 24px;  
    color:#0FF; 
    text-decoration: none; 
    } 

Answer 1

兩個小錯誤：

1. 你有你的.submenu絕對定位到right與 900px - 所以它的地方旁邊你的顯示器。從 right將其更改爲left和數量900px到120px
2. 列表項從.submenu應該顯示像inline-block代替inline

的jsfiddle的：http://jsfiddle.net/kn4Jx/4/