gpt4 book ai didi

html - 是否可以为箭头制作具有更大底部填充的 href

转载 作者:太空宇宙 更新时间:2023-11-04 12:26:19 26 4
gpt4 key购买 nike

我想在悬停时制作带有箭头图像的顶部菜单,它将显示在下一个 div 的边框线上。

My fast made fiddle:

以及我想做的事情的图片

HTML

<div class="wrapper">
<img src="" alt="" id="logo" />
<ul id="topmenu">
<li><a href="" title="">item 1</a></li>
<li><a href="" title="">item 2</a></li>
<li><a href="" title="">item 3</a></li>
</ul>
</div>

<div class="full-width-page">
<div class="wrapper">
<div id="header-image">
image with content goes here
</div>
</div>
</div>

CSS

.wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
}

.full-width-page {
width: 100%;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
overflow: hidden;
}

#logo {
float: left;
width: 200px;
height: 30px;
background-color: gray;
margin-top: 15px;
}

#topmenu {
float: right;
display: block;
list-style: none;
margin: 0px;
padding: 20px;
}

#topmenu li {
display: inline-block;
padding-bottom: 20px;
}

#topmenu li a:hover {
background-image: url(http://www.ristatebassmasters.com/images/smallDownArrow.gif);
background-repeat: no-repeat;
background-position: center 8px;
}

#header-image {
height: 200px;
line-height: 200px;
}

我知道有一个解决方案可以将菜单创建为position: absolute。然后在 href 上制作 padding-bottom 会将箭头向下推得更远,但是当菜单定位为绝对时,我将无法使用 float: right 来插入它。

最佳答案

这是一个 updated fiddle 你想要的。

CSS

#topmenu {
display: block;
list-style: none;
margin: 0px;
padding: 20px;
position: absolute;
right: 0;
top: 0;
}
#topmenu li {
display: inline-block;
padding-bottom: 20px;
}

#topmenu li a{
padding-bottom: 30px;
}
#topmenu li a:hover {
background-image: url(http://www.ristatebassmasters.com/images/smallDownArrow.gif);
background-repeat: no-repeat;
background-position: center 32px;

}
#header-image {
height: 200px;
line-height: 200px;
}

关于html - 是否可以为箭头制作具有更大底部填充的 href,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27998797/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com