CSS :after element relative position

I want to add an arrow effect to a list item (li) on it's hover but it's position does not act relative to list item. When I add left: 50% attiribute to :after element, every individual arrow become centered to ul instead of it's list item. Without left: 50% attiribute, arrows are under their list item's but not centered. So I'm a litte bit stucked here. Here is my CSS: nav.main-nav { position: absolute; z-index: 100; width: 980px; } nav.main-nav > ul > li { position: relative; display: table-cell; list-style-type: none; vertical-align: middle; } nav.main-nav > ul > li:hover { background-color: #304a60; } nav.main-nav > ul > li:hover:after { content: ""; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #304a60; position: absolute; bottom: -10px; left: 50%; } Any help will be appriciated, thanks.
Div's with position:absolute can't find his parent with display: table-cell. Remove this css or add new parent

以上就是CSS :after element relative position的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准