滑动导航栏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

回答

相关问题