高級CSS菜單彈出右側

下下面的圖片是我對我的CSS菜單代碼，它說 子項目我想那一帶就在那裏說：產品1 謝謝洙左側彈出很多提前..我使用的CSS菜單決策者做出這一點，但他們沒有一個選項來選擇它漂浮高級CSS菜單彈出右側

IM發佈的圖像

enter image description here

/** Body Of Website */ 

    body{ 
     background-image:url('/images/background.png'); 
     background-color:#0a1857; 
    } 

/** Advanced css menu */ 


#cssmenu ul { margin: 0; padding: 0;} 
#cssmenu li { margin: 0; padding: 0;} 
#cssmenu a { margin: 0; padding: 0;} 
#cssmenu ul {list-style: none;} 
#cssmenu a {text-decoration: none;} 
#cssmenu {height: 70px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4);} 


#cssmenu > ul > li { 
    float: left; 
    margin-left: 35px; 
    position: relative; 
    } 

#cssmenu > ul > li > a { 
    color: rgb(160,160,160); 
    font-family: Verdana, 'Lucida Grande'; 
    font-size: 15px; 
    line-height: 70px; 
    padding: 15px 20px; 
-webkit-transition: color .15s; 
    -moz-transition: color .15s; 
    -o-transition: color .15s; 
     transition: color .15s; 
} 

#cssmenu > ul > li > a:hover {color: rgb(250,250,250); } 


#cssmenu > ul > li > ul { 
    opacity: 0; 
    visibility: hidden; 
    padding: 16px 0 20px 0; 
    background-color: rgb(250,250,250); 
    text-align: left; 
    position: absolute; 
    top: 55px; 
    left: 50%; 
    margin-left: -90px; 
    width: 180px; 
-webkit-transition: all .3s .1s; 
    -moz-transition: all .3s .1s; 
    -o-transition: all .3s .1s; 
     transition: all .3s .1s; 
-webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
     border-radius: 5px; 
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
     box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
} 

#cssmenu > ul > li:hover > ul { 
    opacity: 1; 
    top: 65px; 
    visibility: visible; 
} 

#cssmenu > ul > li > ul:before{ 
    content: ''; 
    display: block; 
    border-color: transparent transparent rgb(250,250,250) transparent; 
    border-style: solid; 
    border-width: 10px; 
    position: absolute; 
    top: -20px; 
    left: 50%; 
    margin-left: -10px; 
} 

#cssmenu > ul ul > li { position: relative;} 

#cssmenu ul ul a{ 
    color: rgb(50,50,50); 
    font-family: Verdana, 'Lucida Grande'; 
    font-size: 13px; 
    background-color: rgb(250,250,250); 
    padding: 5px 8px 7px 16px; 
    display: block; 
-webkit-transition: background-color .1s; 
    -moz-transition: background-color .1s; 
    -o-transition: background-color .1s; 
     transition: background-color .1s; 
} 

#cssmenu ul ul a:hover {background-color: rgb(240,240,240);} 


#cssmenu ul ul ul { 
    visibility: hidden; 
    opacity: 0; 
    position: absolute; 
    top: -16px; 
    left: 206px; 
    padding: 16px 0 20px 0; 
    background-color: rgb(250,250,250); 
    text-align: left; 
    width: 160px; 
-webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -o-transition: all .3s; 
     transition: all .3s; 
-webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
     box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
} 


#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;} 


#cssmenu ul ul a:hover{ 
    background-color: rgb(205,44,36); 
    color: rgb(240,240,240); 
}

我下面的代碼

來源

2013-06-02 Jacob Anthony Tonna

你也可以發佈jsfiddle嗎？另外請注意，您的左側沒有太多空間，因此如果沒有絕對定位可能會破壞其他分辨率的佈局，它將不會在屏幕上彈出。 –

@ Mr.Flocker按照你的要求http://jsfiddle.net/RAu76/ –

看看我的回答:) –

看一看這個應用下面的樣式或更改值「左」，如果你想

#cssmenu ul ul > li:hover > ul { 

left: -50px; **Change this to whatever you want to** 
opacity: 1; 
visibility: visible; 
}

^這是行號你的CSS樣式表的105。

希望這會有所幫助！讓我知道如何去:)

更新： -

變化這個問題，以及

#cssmenu ul ul ul { 
left: -50px; /* Change this to whatever value you used for the above "left" attribute */

這應該可以解決陌生的過渡問題。

來源

2013-06-02 22:42:29

http://jsfiddle.net/RAu76/3/這有一個非常奇怪的變換 –

@JacobAnthonyTonna看看我更新的答案。 –

http://jsfiddle.net/RAu76/4/好吧，我把它固定，但然後你去文本，它有點遠離你，如果你幫我修復這個問題你的答案 –

無法手動定位子菜單嗎？

只是一個類添加到子菜單，然後

subnav { position: absolute; top:10;left:10; }？

來源

2013-06-02 22:18:30 Ben

沒有工作ither我做錯了或它劑量工作 –

http://jsfiddle.net/RAu76/ –

高級CSS菜單彈出右側

回答

相關問題