css - 构建一个带有悬停和图像的快速链接 div 以连续 4 个

Question

我一直在尝试获取带有顶部图像的快速链接的 div 并将鼠标悬停在 url 上。

它一直在搞砸，所以图像漂浮在 div 上。

例如，我试图实现的目标

例子

也许有人可以指出我正确的方向谢谢：D

 #snelmenu
        {
            padding:0;
            margin:0;
            list-style-type:none;
            font-size:12px;
            color:#717171;

        }

        #snelmenu li
        {
            border-bottom:1px solid #eeeeee;
        }

        #snelmenu li a:hover
        {
            color:White;
            background-color:#219FD1;
        }

        #snelmenu a:link
        {
            color:#717171;
            text-decoration:none;
            display:block;
            padding: 7px 10px;
        }

        #snelmenu a:hover
        {
            color:White;
        }



.snelmenubox{
    background: #ffffff;
    border: 1px solid #ddd;
    display: block;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow:0px 1px 1px 0px rgba(180, 180, 180, 0.2);
       -moz-box-shadow:0px 1px 1px 0px rgba(180, 180, 180, 0.2);
            box-shadow:0px 1px 1px 0px rgba(180, 180, 180, 0.2);
    padding: 25px 25px 20px 25px;
}

.snelmenubox h1,
.snelmenubox h2,
.snelmenubox h3,
.snelmenubox h4,
.snelmenubox h5,
.snelmenubox h6,
.snelmenubox p{
    margin:0 0 10px 0;
}

.snelmenubox .snelmenubox-img{
    margin:-26px -26px 25px -26px;
    -webkit-border-radius:5px 5px 0px 0px;
       -moz-border-radius:5px 5px 0px 0px;
            border-radius:5px 5px 0px 0px;
    overflow: hidden;
}
.snelmenubox .snelmenubox-img img{
    width:100%;
    max-width:100%;
    height:auto;
}

Answer 1

根本不需要浮动图像，只需将其放在包装元素（div 或 nav）中

代码笔示例

HTML

<nav role='navigation'>
  <div class="img-wrap">
  <img src="http://lorempixel.com/150/150/" alt="" />
    </div>
  <h3>Title</h3>
  <ul class="side-bar">
    <li><a href="#">Option 1</a></li>
    <li class="parent"><a href="#">Option 2</a>
      <ul>
        <li><a href="#">Sub 1</a></li>
        <li><a href="#">Sub 2</a></li>
        <li class="parent"><a href="#">Sub 3</a>
              <ul>
        <li><a href="#">Sub-Sub 1</a></li>
        <li><a href="#">Sub-Sub 2</a></li>
        <li><a href="#">Sub-Sub 3</a></li>
        <li><a href="#">Sub-Sub 4</a></li>
      </ul>

        </li>
        <li><a href="#">Sub 4</a></li>
      </ul>
    </li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  </ul>
</nav>

CSS

/* basics */

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

nav {
  width:150px;
  margin:10px auto;
}

nav .img-wrap {
  border-radius:10px 10px 0 0;
  overflow:hidden;
}

nav img {
  display:block;
}

nav h3 {
  color:orange;
  padding:16px;
}

ul {
  list-style:none;  
}

ul, li {
  padding:0;
}

li a {
  text-decoration:none;
  display:block;
  color:white;
}

/* base styling */

li {
  background:darkgreen;
  position:relative;
  padding:0.25em;
}

.parent:before {
  content:"";
  position:absolute;
  width:0;
  height:0;
  border-width:10px;
  border-style:solid;
  border-color:transparent;
  top:50%;

}

li:hover {
  background:seagreen;
}

li > ul {
  display:none;
  position:absolute;
  left:100%;
  top:0;
  width:100%;
}

li:hover > ul {
  display:block;
}

.side-bar li > ul {
  left:100%;
  top:0;
  width:100%;
}

.side-bar .parent:before {
  border-left-color:white;
  margin-top:-10px;
 right:10px;
}

这很容易定制，只需在这里和那里更改一些颜色/尺寸。