在子菜單中創建純CSS下拉菜單

Question

您好，我在想這是否可能。我有一個使用CSS子菜單創建的水平菜單，它工作得很好。但是，我希望子菜單出現在已出現的子菜單的右側。

菜單是這樣：http://jsfiddle.net/dvpKx/39/

而且代碼：

/*First reset ul styles*/ 
    .nav, 
    .nav ul, 
    .nav li, 
    .nav a { 
     margin: 0; 
     padding: 0; 
     border: none; 
     outline: none; 
    } 

/*Now add fixed width & height to the menu along with rounded corners and gradients*/ 
    .nav { 
    height: 50px; 
    width: inherit; 
    margin: 10px; 


    background: -webkit-linear-gradient(top, rgb(198,56,32) 0%, rgb(127,48,35) 100%); 
    background: -moz-linear-gradient(top, rgba(198,56,32,1) 0%, rgb(127,48,35) 100%); 
    background: -o-linear-gradient(top, rgb(198,56,32) 0%, rgb(127,48,35) 100%); 
    background: -ms-linear-gradient(top, rgb(198,56,32) 0%, rgb(127,48,35) 100%); 
    background: linear-gradient(top, rgb(198,56,32) 0%, rgb(127,48,35) 100%); 

    -webkit-border-radius: 15px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 


    } 


/*Float links left to align links horizontally & position relative to align submenus properly*/ 

    .nav li { 
    position: relative; 
    list-style: none; 
    float: left; 
    display: block; 
    height: 50px; 
    } 


/* 
Styling menu links - 
font, color, padding, etc. Then a dark text shadow and a color transition to create a smooth effect when the color changes on hover state. To create the links separator add a border to the left and right and then we will remove the left border from the first link and the right border from the last link. For the hover state we will only change the text color. 
*/ 

    .nav li a { 

border-bottom: none;      

     background: none; 
     display: block; 
     padding: 0 14px; 
     margin: 6px 0; 
     line-height: 32px; 
     text-decoration: none; 

     border-left: 1px solid #393942; 
     border-right: 1px solid #4f5058; 

     font-family: Verdana, sans-serif; 
     font-weight: bold; 
     font-size: 14px; 

     color: #f3f3f3; 
     text-shadow: 2px 3px 0px rgba(0,0,0,0.6); 

     -webkit-transition: color .2s ease-in-out; 
     -moz-transition: color .2s ease-in-out; 
     -o-transition: color .2s ease-in-out; 
     -ms-transition: color .2s ease-in-out; 
     transition: color .2s ease-in-out; 
    } 

    .nav li:first-child a { border-left: none; } 
    .nav li:last-child a{ border-right: none; } 

    .nav li:hover > a { 
     color: rgb(114,163,45); 
     background: none; 
     font-size: 18px; 
    } 

/* 
SUB MENU 1 
We will start to position the sub menu 50px from the top and 0px from the left of the menu item and add bottom rounded corners. We will set the opacity to 0 and on hover state to 1 to create the fade in/out effect. For the slide down/up effect we need to set the list height to 0px when is hidden and to 36px on hover state. 
*/ 

.nav ul { 

    position:absolute; 

    top: 50px; 
    padding-left: 0px; 

    opacity: 1; 
    background: rgb(43,35,34); 

    -webkit-border-radius: 0 0 5px 5px; 
    -moz-border-radius: 0 0 5px 5px; 
    border-radius: 0 0 5px 5px; 

    -webkit-transition: opacity .25s ease .1s; 
    -moz-transition: opacity .25s ease .1s; 
    -o-transition: opacity .25s ease .1s; 
    -ms-transition: opacity .25s ease .1s; 
    transition: opacity .25s ease .1s; 
} 

.nav li:hover > ul { opacity: 1; } 

/* Hiding submenu 1 */ 
.nav ul li { 
    height: 0; 
    overflow: hidden; 
    padding: 0; 

    -webkit-transition: height .25s ease .1s; 
    -moz-transition: height .25s ease .1s; 
    -o-transition: height .25s ease .1s; 
    -ms-transition: height .25s ease .1s; 
    transition: height .25s ease .1s; 
} 
/* When hovered over, show submenu 1 */ 
.nav li:hover > ul li { 
    height: 46px; 
    overflow: hidden; 
    padding: 0; 

    z-index: 8999; 
} 
/* Hiding submenu TWO */ 
.nav ul ul li { 
    height: 0; 
    overflow: hidden; 
    padding: 0; 

    -webkit-transition: height .25s ease .1s; 
    -moz-transition: height .25s ease .1s; 
    -o-transition: height .25s ease .1s; 
    -ms-transition: height .25s ease .1s; 
    transition: height .25s ease .1s; 
} 
/* When hovered over, show submenu 1 */ 
.nav li:hover > ul ul li { 
    height: 80px; 
    padding: 0; 

    z-index: 9000; 
} 



/* Setting width of submenu to 100px & add a bottom border instead of left and right ones 
(also removing it from last link) */ 

.nav ul li a { 
    width: 250px; 
    padding: 4px 0 4px 40px; 
    margin: 0; 


    border: none; 
    border-bottom: 1px solid #343438; 
} 

.nav ul li:last-child a { border: none; } 

Answer 1

我會建議口魚下拉菜單（一個CSS解決方案）的兒子。

代碼：http://www.htmldog.com/articles/suckerfish/dropdowns/（特別是多級下拉部分約1/2下）。此外，頁面底部還會顯示示例鏈接。

Answer 2

你可以試試這個

.menus { 
    width:100px; 
    height:50px; 
    border: 5px solid #000000; 
    border-radius: 25px; 
    text-align: center; 
    line-height: 50px; 
    color: black; 
    background-color: #dcdcdd; 
} 
.submenus { 
    margin-top:10px; 
    display:none; 
    width:100px; 
    height:50px; 
    border: 5px solid #000000; 
    border-radius: 25px; 
    text-align: center; 
    line-height: 50px; 
    color: black; 
} 
#menu1outer:hover #submenus1 { 
    display: block; 
} 

希望有所幫助，你可以在這裏看到的樣品： reformas integrales madrid