滑動導航欄Css

我試圖建立一個導航欄，其中的子菜單從頁面的一側滑入使用CSS。我遇到的問題是，當子菜單在父菜單項的位置滑動時發生更改。我在這裏做了一個小提琴http://jsfiddle.net/CL7d7/有人可以建議我哪裏出了問題。滑動導航欄Css

HTML

  <ul> 
       <li><a href="#">Home</a></li> 
       <li> 
        <a class="box" href="#">Weddings</a> 
         <ul> 
         <li><a href="#">one</a></li> 
         <li><a href="#">two</a></li> 
         <li><a href="#">three</a></li> 
        </ul>      
       </li> 
       <li><a href="#">Biography</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Photobooth</a></li> 

      </ul> 



     </div><!-- end #nav -->

CSS

#wrap{ 

    width:500px; 
    overflow: hidden;  
    } 

#nav { 
height: 35px; 
     width: 500px; 
font-size: 13px; 
font-family: Tahoma, Geneva, sans-serif; 
font-weight: bold; 
text-shadow: 1px 1px 1px #EEE; 
background-color: transparent; 
z-index: 1; 
} 

#nav ul { 
height: auto; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px; 
} 

#nav li { 
float: left; 
margin-right: 5px; 
margin-left: 5px; 
display: inline; 
} 

#nav ul a{ 
text-decoration: none; 
display: block; 
padding-top: 10px; 
width: 80px; 
text-align: center; 
height: 20px; 
color: #666; 
margin: 0px; 
} 

#nav a:hover { 
color: #999999; 
} 

#nav a:active { 
background-color: transparent; 
} 
#nav ul ul { 
text-shadow: 1px 1px 1px #EEE; 
z-index: 2; 
/*display:none;*/ 
padding-left: 0px; 
top: 35px; 
transition: right 1s; 
-moz-transition: right 1s; /* Firefox 4 */ 
-webkit-transition: right 1s; /* Safari and Chrome */ 
-o-transition: right 1s; /* Opera */ 
-ms-transition: right 1s; 
right: -500px; 
position: absolute; 
float: left; 

    } 

    #nav ul ul li { 
display: inline; 


    } 
    #nav ul ul a { 
color: #F9C; 
font-size: 12px; 
width: 80px; 
height: 35px; 
    } 
    #nav ul ul a:hover { 
display: block; 
color: #99999; 
font-size: 12px; 
position: absolute; 

    } 

    #nav ul li:hover > ul { 
overflow: hidden; 
right: 0px; 
display: block; 
top: 0px; 
position: relative; 


    } 

    #nav ul ul li { 
display: inline; 


    } 
    #nav ul ul a { 
color: #F9C; 
font-size: 12px; 
width: 80px; 
height: 35px; 
    } 
    #nav ul ul a:hover { 
display: block; 
color: #99999; 
font-size: 12px; 
position: absolute; 

    } 

    #nav ul li:hover > ul { 
overflow: hidden; 
right: 0px; 
display: block; 
top: 0px; 
position: relative; 


    } 

    #nav li:hover > a { 
color: #99999; 
display: block; 
    } 




    #nav li:hover > a { 
color: #99999; 
display: block; 
     }

來源

2014-04-08 user3260707

你的定位更改爲絕對的#nav ul li:hover > ul。還設置頂部屬性以便對齊。

它應該是這樣的：

#nav ul li:hover > ul { 
    overflow: hidden; 
    right: 0px; 
    display: block; 
    top: 40px; 
    position: absolute; 
}

這裏是fiddle

來源

2014-04-08 06:43:10

滑動導航欄Css

回答

相關問題