滑动导航条Css

Question

我正试图构建一个导航栏，其中的子菜单从页面的一侧滑动使用css。我遇到的问题是，当子菜单在父菜单项的位置上滑动时，会发生变化。我在这里做了一个小提琴，http://jsfiddle.net/CL7d7/可以有人建议我哪里出了问题。

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;
      }

Answer 1

在#nav ul li:hover > ul中将您的位置更改为绝对位置。还为对齐设置top属性。

应该是这样的：

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

这是小提琴