61,112
社区成员
发帖
与我相关
我的任务
分享怎样用css实现类似淘宝或京东这样的下拉菜单（有图），多谢！！
如果单用css不行，也可加用javascript等其他类型的语言。要求鼠标悬停主菜单后，像淘宝/京东那样出现有边缘的下拉菜单，且该边缘也包住主菜单被悬停的链接，但该链接不被影响。鼠标访问下拉菜单内容时，下拉菜单不消失；鼠标移开至其他主菜单链接时，下拉菜单收起。下拉菜单如图所示：
...全文
请发表友善的回复…
发表回复
k↑ 2018-12-01
- 打赏
- 举报
还是看一下div+css的书吧
不慕 2018-11-22
- 打赏
- 举报
可以用前端框架，easyui
XIAo_o TAo_o 2018-11-14
- 打赏
- 举报
上淘宝，直接扣出来么
(◡‿◡✿) 2018-11-09
- 打赏
- 举报
一线互联网公司ios android 服务端 算法 坑，欢迎推荐自荐，简历请发agaier1989@163.com
yeluod 2018-11-06
- 打赏
- 举报
写后端的。 前台不怎么深入了解。你可以试试bootstarp。里面插件很多。你可以试试
JyouNl 2018-11-03
- 打赏
- 举报
纯粹的css在公司应用的很少，只有某个个别的需求会用到，我是写后端的，前端不是特别懂，不过在和前端联调接口的时候，基本都是插件，建议你多用用插件来实现。仅仅是兴趣的话，还是不错的。
Java开发之旅 2018-11-02
- 打赏
- 举报
这种的都不是直接使用专门的API实现的，都是通过设计实现的，不要把它想的那么复杂，很简单的样式。
weixin_43581770 2018-11-01
- 打赏
- 举报
用hover就可以的，你可以上w3c学习下
龙龙~~~ 2018-11-01
- 打赏
- 举报
纯粹的css在公司应用的很少，只有某个个别的需求会用到，我是写后端的，前端不是特别懂，不过在和前端联调接口的时候，基本都是插件，建议你多用用插件来实现。仅仅是兴趣的话，还是不错的。
mikeflxca 2018-10-31
- 打赏
- 举报
各位，我将风云和天际的办法结合起来，再分别对span的padding/margin及list的padding做不同设置，貌似可以做到不移位的不等宽下拉菜单！
等做完再来确认下！
風灬雲 2018-10-31
- 打赏
- 举报
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color:#eee;
}
li{
list-style:none;
}
.list{
display:none;
background-color:#fff;
border:1px solid red;
margin-top:-1px;
}
.list a{
display:block;
color:#333;
}
.list a:hover{
background-color:#ccc;
}
ul li{
float:left;
width:100px;
}
ul li:hover span{
background-color:#fff;
border:1px solid red;
border-bottom:0;
}
ul li span{
display:inline-block;
}
ul li:hover .list{
display:block;
}
</style>
</head>
<body>
<ul>
<li>
<span>我的淘宝</span>
<div class="list">
<a href="#">已买到的宝贝</a>
<a href="#">我的足迹</a>
</div>
</li>
</ul>
</body>
</html>
算是比较勉强实现需求，因为是纯css实现，所以效果没有js控制那么精准
在鼠标移动到“我的淘宝”字样后面的灰色区域也会弹出下拉选项，要解决的话需要用JS事件来控制
mikeflxca 2018-10-31
- 打赏
- 举报
风云，已经成功实现不移位的下拉菜单，主菜单背景与下拉菜单背景可以不等宽！
叩谢！！[/quote]
看来上下不等宽，而所有文字靠背景左侧同边距（或主菜单“我的淘宝”与下拉菜单不同边距）并左对齐、主菜单“我的淘宝”短于下拉菜单（即主菜单背景右上角缺一截）的实现还有困难。其他的情形可以实现。
mikeflxca 2018-10-31
- 打赏
- 举报
风云，已经成功实现不移位的下拉菜单，主菜单背景与下拉菜单背景可以不等宽！
叩谢！！
mikeflxca 2018-10-30
- 打赏
- 举报
忘了谢谢风云了！再给看看不等宽背景的问题吧！
mikeflxca 2018-10-30
- 打赏
- 举报
谢谢“天际”的提示，主菜单移动的问题解决了（我自己之前是用一个与背景颜色相同的1px border解决的，有点笨，不过也成。），
目前，剩下的问题是如果主菜单与下拉菜单背景不同宽，应当怎样做才能实现不等宽的背景和边缘线？
欢迎给支个招！
天际的海浪 2018-10-30
- 打赏
- 举报
可以给ul li也设置个相同宽度与背景色相同或透明色的border
ul li { border: 1px solid transparent; }
ul li:hover { border: 1px solid #xxx; }
mikeflxca 2018-10-30
- 打赏
- 举报
打错字更正：
“很好，不过我需要加边缘颜色（border:1px #... solid）。我自己在 ul li:hover里面加了：border:1px solid;边缘就有了，但是有个问题：鼠标悬停在“我的淘宝”时（我自己把<a href="#"></a>标签套在了“我的淘宝上”）,下面的菜单是正常显示的，...“
mikeflxca 2018-10-30
- 打赏
- 举报
很好，不过我需要加边缘颜色（border:1px #... solid）。我自己在 ul li:hover里面加了：border:1px solid;边缘就有了，但是有个问题：鼠标悬停在“我的淘宝”时（我自己把<a href="#"></a>标签套在了“我的淘宝上”）,下面连个菜单是正常显示的，但“我的淘宝”往下移动，有点像动画。怎么解决这个问题？另外如果是，本帖图中“卖家中心”上的下拉菜单，卖家中心上的白背景和下拉菜单的白背景不等宽，要实现怎样做？
ps:仍然需要在整个背景上加边缘线!!怎么弄好？
風灬雲 2018-10-29
- 打赏
- 举报
纯CSS就能实现，就是一个 :hover的伪类效果，标识鼠标移入时的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color:#eee;
}
li{
list-style:none;
}
.list{
display:none;
}
.list a{
display:block;
color:#333;
}
.list a:hover{
background-color:#ccc;
}
ul li{
float:left;
width:100px;
}
ul li:hover{
background-color:#fff;
}
ul li:hover .list{
display:block;
}
</style>
</head>
<body>
<ul>
<li>
<span>我的淘宝</span>
<div class="list">
<a href="#">已买到的宝贝</a>
<a href="#">我的足迹</a>
</div>
</li>
</ul>
</body>
</html>
