我希望图片滑动到左侧和顶部，而不是笔直向前，
我只使用css和html而没有javascript。
是否有简单的代码可以使“下拉列表” li向下推其余类别？
谢谢大家的帮助！
nav{
background-color: #fff;
width:150px;
height: 667px;
float:right;
}
nav h1{
padding: 20px;
color: #777;
font: 20px tahoma,times,serif;
}
ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
width: 150px;
text-align: right;
}
ul li {
position: relative;
}
li ul {
position: absolute;
right: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border-bottom: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
li:hover ul {
display: block;
}
* {
margin: 0;
padding: 0;
}
body {
background: #333;
background: url("images/3.jpg");
background-repeat: no-repeat;
}
.container{
overflow: hidden;
margin-right: 0;
height: 500px;
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
width: 800px;
}
.container img{
margin-top: 0px auto;
position: absolute;
top: 0px;
left: 0px;
z-index: -60;
}
.container li img {
margin-top: 0px auto;
position: absolute;
left: 600px auto;
z-index: -50;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
li:nth-child(1){
padding-top: 0px;
}
li a:hover {
background: #eee;
}
li a:hover + img {
position: absolute;
margin-top: 0px auto;
left: -667px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<LINK rel=stylesheet type="text/css" href="StyleSheet.css"/>
<title></title>
</head>
<body>
<div class="container">
<nav><h1><b>text</b></h1>
<ul>
<li><a href="#">text</a><img src="http://media3.fcbarcelona.com/media/asset_publics/resources/000/160/456/size_640x360/pic_2015-01-11_BARCELONA-ATLETICO_45.v1431011244.JPG" alt="1"></li>
<li><a href="#">text</a><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTd6ngNNGapdLhqdS4KbuoNNCaaUMP4Svu-e_9rXMh_wLDtPpSE" alt="1">
<ul>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
</ul>
</li>
<li><a href="#">text</a><img src="http://static3.demotix.com/sites/default/files/imagecache/a_scale_large/2000-5/photos/1368393557-club-atletico-de-madrid-v-fc-barcelona--la-liga_2046465.jpg" alt="1">
<ul>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
</ul>
</li>
<li><a href="#">text</a><img src="http://barcelonacamps.com/wp-content/uploads/2014/04/barca-new-team.jpg" alt="1">
<ul>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
</ul>
</ul>
</li>
</nav>
</div>
</body>
</html>the website
最佳答案
不确定我是否完全理解您要实现的目标，但请查看以下代码库：Image Slider
如果希望它们向上滑动到左上方，则只需设置top属性并调整其高度即可：
li a:hover + img {
position: absolute;
margin-top: 0px auto;
left: -667px;
top: -100px;
}
您能否进一步解释
and there is simple code to take make the "dropdown" li to go down and push the rest of the categories?。关于html - 仅滑动图像CSS和HTML，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34819586/