Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

html - 向左浮动子导航

In lại Tác giả: Walker 123 更新时间：2023-11-28 07:40:57 26 4
mua khóa gpt4 Nike

我正在尝试创建一个下拉导航，您可以像这样在下拉菜单中看到子菜单![在此处输入图片描述

http://i.stack.imgur.com/BiRcq.png

我有我想要的基本布局，但我未能真正创建左侧的下拉 float 。

HTML


下面是CSS控制下拉没有使用JS。 

#cssmenu ul {
  lề: 0;
  padding: 7px 6px 0;
  background: #493B88;
  line-height: 100%;
  chiều rộng: tự động;
}
#cssmenu li {
  margin: 0 5px;
  padding: 0 0 8px;
  nổi: trái;
  vị trí: tương đối;
  kiểu danh sách: không có;
}

#cssmenu a,
#cssmenu a:link {
  độ dày phông chữ: đậm;
  cỡ chữ: 13px;
  color: #e7e5e5;
  trang trí văn bản: không có;
  hiển thị: khối;
  phần đệm: 8px 20px;
  lề: 0;
}

#cssmenu a:hover {
  background: #000;
  màu: #000;
}

#cssmenu .active a,
#cssmenu li:hover > a {
  nền: #ccc;
  màu: #000;
}

#cssmenu ul ul li:hover a,
#cssmenu li:hover li a {
  lý lịch: không có;
  đường viền: không có;
  màu: #000;
  width: 30%;
}

#cssmenu ul ul a:hover {
  background: #7d7d7d;
  color: #000 !important;
  chiều rộng: 400px;
}

#cssmenu li:hover > .sub .subinner ul {
  hiển thị: khối;
  vị trí: tuyệt đối;
  trái: 0;
}

#cssmenu ul ul {
  z-index: 1000;
  hiển thị: không có;
  lề: 0;
  phần đệm: 0;
  chiều rộng: 300px;
  vị trí: tuyệt đối;
  top: 40px;
  trái: 0;
  nền: #ffffff;
  border: solid 1px #b4b4b4;
}

#cssmenu ul ul li {
  float: none;
  lề: 0;
  phần đệm: 3px;

}

#cssmenu ul ul a,
#cssmenu ul ul a:link {
  độ dày phông chữ: bình thường;
  cỡ chữ: 12px;
}

#cssmenu ul:after {
  content: ".";
  hiển thị: khối;
  rõ ràng: cả hai;
  khả năng hiển thị: ẩn;
  line-height: 0;
  chiều cao: 0;
}

* html #cssmenu ul {
  height: 1%;
}

这是查看我的下拉菜单 Live 的链接 https://jsfiddle.net/pj8kL8dL/

câu trả lời hay nhất

我花了2-3个小时才得到这个结果，我希望这是你需要的。

顺便说一下，我会避免经常使用 position:something。

这看起来很灵敏，你喜欢这个结果吗？

thân hình{
	lề: 0;
}

#cssmenu ul {
  lề: 0;

}
#cssmenu ul > li {
  margin: 0 5px;
  padding: 0 0 8px;
  nổi: trái;
  kiểu danh sách: không có;
}

#cssmenu ul > ul li {
  margin: 0 5px;
  padding: 0 0 8px;
  float: none;
  kiểu danh sách: không có;
}

#cssmenu a,
#cssmenu a:link {
  độ dày phông chữ: đậm;
  cỡ chữ: 13px;
  color: #e7e5e5;
  trang trí văn bản: không có;
  hiển thị: khối;
  phần đệm: 8px 20px;
  lề: 0;
}

#cssmenu a:hover {
  background: #000;
  màu: #000;
}

#cssmenu .active a,
#cssmenu li:hover > a {
  nền: #ccc;
  màu: #000;
}

#cssmenu ul ul li:hover a,
#cssmenu li:hover li a {
  lý lịch: không có;
  đường viền: không có;
  màu: #000;
}

#cssmenu ul ul a:hover {
  background: #7d7d7d;
  color: #000 !important;
}

#cssmenu li:hover > .sub .subinner ul {
  hiển thị: khối;
}

#cssmenu ul ul {
  z-index: 1000;
  hiển thị: không có;
  lề: 0;
  phần đệm: 0;
  nền: #ffffff;
  border-bottom: solid 1px #b4b4b4;
  border-top: solid 1px #b4b4b4;
}

#cssmenu ul ul li {
  nổi: trái;
  lề: 0;
  phần đệm: 3px;

}

#cssmenu li:nth-child(2) ul ul li {
  float: none;
  lề: 0;
  phần đệm: 3px;
}

#cssmenu li:nth-child(2) ul ul li a{

     border-bottom: 1px solid #B4B4B4;
}

#cssmenu ul ul a,
#cssmenu ul ul a:link {
  độ dày phông chữ: bình thường;
  cỡ chữ: 12px;
}

#cssmenu ul:after {
  content: ".";
  hiển thị: khối;
  rõ ràng: cả hai;
  khả năng hiển thị: ẩn;
  line-height: 0;
  chiều cao: 0;
}

* html #cssmenu ul {
  height: 1%;
}

#cssmenu ul li:nth-child(2) .subinner{
	top: 47px;
	vị trí: tuyệt đối;
	left: 0px;
	chiều rộng: 100%;
}

#cssmenu ul li:nth-child(3) .subinner{
	top: 47px;
	vị trí: tuyệt đối;
	left: 0px;
	chiều rộng: 100%;
}

#cssmenu{
	
	lề: 0px;
	padding: 7px 6px 0px;
	background: #493B88 none repeat scroll 0% 0%;
	line-height: 100%;
	chiều rộng: tự động;
	chiều cao: 40px;
}

#cssmenu li:nth-child(2):hover > .sub .subinner ul {
	chiều rộng: 100%;
}

#cssmenu li:hover > .sub .subinner ul {
	chiều rộng: 100%;
}

#cssmenu .subinner ul ul{
	nổi: trái;
	width: 33% !important;
	đường viền: không có;
}

关于html - 向左浮动子导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30954596/

26 4 0
Đề xuất bài viết: css - Y 滚动条和滚动图像到左侧
Đề xuất bài viết: ios - 在 Swift 中记录行号和方法名
Đề xuất bài viết: ios - UIPickerView 中 UIVIew 的背景颜色设置不正确
Đề xuất bài viết: c++ - 用 C++ 思考，内联函数功能？
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress