个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试实现类似于下图的效果:
但是，我正在努力使子菜单对齐，并使子菜单的宽度与完整导航栏的宽度相同:
body {
width: 1000px;
margin: 0 auto;
overflow-x: hidden;
}
.item {
float: left;
position: relative;
}
.item a {
padding: 10px;
border: 1px black solid;
margin: 1px;
display: block;
width: 100px;
}
.item .all-subs {
display: none;
position: absolute;
background: red;
width:100%;
}
.item .sub-items {
float: left;
margin: 0 1%;
width: 30%;
}
.item:hover {
background-color: green;
}
.item:hover > .all-subs {
display: block;
}<body>
<div class="nav">
<div class="item">
<a href="#">Item 1</a>
<div class="all-subs">
<div class="sub-items">
<h2>Sub Item List 1</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
<div class="sub-item">
Sub 3
</div>
<div class="sub-item">
Sub 4
</div>
<div class="sub-item">
Sub 5
</div>
<div class="sub-item">
Sub 6
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 2</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 3</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
</div>
</div>
</div>
<div class="item">
<a href="#">Item 2</a>
<div class="all-subs">
<div class="sub-items">
<h2>Sub Item List 1</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
<div class="sub-item">
Sub 3
</div>
<div class="sub-item">
Sub 4
</div>
<div class="sub-item">
Sub 5
</div>
<div class="sub-item">
Sub 6
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 2</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 3</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
</div>
</div>
<div class="item">
<a href="#">Item 3</a>
<div class="all-subs">
<div class="sub-items">
<h2>Sub Item List 1</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
<div class="sub-item">
Sub 3
</div>
<div class="sub-item">
Sub 4
</div>
<div class="sub-item">
Sub 5
</div>
<div class="sub-item">
Sub 6
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 2</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 3</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
</div>
</div>
<div class="item">
<a href="#">Item 4</a>
<div class="all-subs">
<div class="sub-items">
<h2>Sub Item List 1</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
<div class="sub-item">
Sub 3
</div>
<div class="sub-item">
Sub 4
</div>
<div class="sub-item">
Sub 5
</div>
<div class="sub-item">
Sub 6
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 2</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 3</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
</div>
</div>
<div class="item">
<a href="#">Item 4</a>
<div class="all-subs">
<div class="sub-items">
<h2>Sub Item List 1</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
<div class="sub-item">
Sub 3
</div>
<div class="sub-item">
Sub 4
</div>
<div class="sub-item">
Sub 5
</div>
<div class="sub-item">
Sub 6
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 2</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 3</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
</div>
</div>
<div class="item">
<a href="#">Item 5</a>
<div class="all-subs">
<div class="sub-items">
<h2>Sub Item List 1</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
<div class="sub-item">
Sub 3
</div>
<div class="sub-item">
Sub 4
</div>
<div class="sub-item">
Sub 5
</div>
<div class="sub-item">
Sub 6
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 2</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 3</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
</div>
</div>
</body>子菜单的宽度设置为 100%，它继承了父 div 的宽度(如预期的那样)。此外，子菜单的对齐方式与父级 div 对齐。有什么方法可以用 CSS 改变这种行为吗？
我希望这将使我的导航栏响应(在一定程度上 - 平板电脑和手机需要改变)
最佳答案
相对定位你的 .nav 并给它一个 width，从 .item 中删除 position: relative 所以.all-subs 占据了 .nav 的完整 width。
body {
width: 1000px;
margin: 0 auto;
overflow-x: hidden;
}
.nav {
position: relative;
width: 744px;
}
.item {
float: left;
}
.item a {
padding: 10px;
border: 1px black solid;
margin: 1px;
display: block;
width: 100px;
}
.item .all-subs {
display: none;
position: absolute;
background: red;
width: 100%;
left: 0;
}
.item .sub-items {
float: left;
margin: 0 1%;
width: 30%;
}
.item:hover {
background-color: green;
}
.item:hover > .all-subs {
display: block;
}<body>
<div class="nav">
<div class="item">
<a href="#">Item 1</a>
<div class="all-subs">
<div class="sub-items">
<h2>Sub Item List 1</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
<div class="sub-item">
Sub 3
</div>
<div class="sub-item">
Sub 4
</div>
<div class="sub-item">
Sub 5
</div>
<div class="sub-item">
Sub 6
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 2</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 3</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
</div>
</div>
<div class="item">
<a href="#">Item 2</a>
<div class="all-subs">
<div class="sub-items">
<h2>Sub Item List 1</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
<div class="sub-item">
Sub 3
</div>
<div class="sub-item">
Sub 4
</div>
<div class="sub-item">
Sub 5
</div>
<div class="sub-item">
Sub 6
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 2</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 3</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
</div>
</div>
<div class="item">
<a href="#">Item 3</a>
<div class="all-subs">
<div class="sub-items">
<h2>Sub Item List 1</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
<div class="sub-item">
Sub 3
</div>
<div class="sub-item">
Sub 4
</div>
<div class="sub-item">
Sub 5
</div>
<div class="sub-item">
Sub 6
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 2</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 3</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
</div>
</div>
<div class="item">
<a href="#">Item 4</a>
<div class="all-subs">
<div class="sub-items">
<h2>Sub Item List 1</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
<div class="sub-item">
Sub 3
</div>
<div class="sub-item">
Sub 4
</div>
<div class="sub-item">
Sub 5
</div>
<div class="sub-item">
Sub 6
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 2</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 3</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
</div>
</div>
<div class="item">
<a href="#">Item 4</a>
<div class="all-subs">
<div class="sub-items">
<h2>Sub Item List 1</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
<div class="sub-item">
Sub 3
</div>
<div class="sub-item">
Sub 4
</div>
<div class="sub-item">
Sub 5
</div>
<div class="sub-item">
Sub 6
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 2</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 3</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
</div>
</div>
<div class="item">
<a href="#">Item 5</a>
<div class="all-subs">
<div class="sub-items">
<h2>Sub Item List 1</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
<div class="sub-item">
Sub 3
</div>
<div class="sub-item">
Sub 4
</div>
<div class="sub-item">
Sub 5
</div>
<div class="sub-item">
Sub 6
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 2</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
<div class="sub-items">
<h2>Sub Item List 3</h2>
<div class="sub-item">
Sub 1
</div>
<div class="sub-item">
Sub 2
</div>
</div>
</div>
</div>
</div>
</body>关于html - 具有导航栏全宽的导航栏子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27818527/
24
4
0
我有一个标题 1(#banner h1.index_banner_text)，它需要始终位于距页面底部 20 像素和距页面左侧 570 像素的位置。如果调整窗口大小，我希望标题自然堆叠，但始终与页面底
这个问题已经有答案了: CSS responsive slanted edge (1 个回答) 已关闭 7 年前。 我想知道如何创建一个宽度为 100% 的 div，宽度为 300 像素，其中底部边框
我做了一个非常简单的水平全宽 Accordion ，但我遇到了一个错误 - 它的最后一部分在折叠过程中下降了。 这是我的代码:https://jsfiddle.net/trzxs3u1/ 它可能来自同
我有两张相同的图片。我几乎一直显示其中一张图像，唯一的异常(exception)是在 1001px - 1400px 的视口(viewport)中，我显示图像的裁剪版本。由于某种原因，company-
我的应用程序中有这个页面: http://actibities-uniongr.rhcloud.com/pages/view-demo 如果您将浏览器的窗口缩短到小于 1000 像素并水平滚动，您会看
这个问题在这里已经有了答案: How did YouTube create a fluid video player? (1 个回答) 关闭 5 天前。 我正在尝试在网页中全宽显示一个 vimeo
我是编码新手，我试图只在我的 homepage 中使用每个 fancybox全宽和响应式 ( eg )，但这些选项都没有完成这项工作(fitToView、autoSize 或 aspectRatio)
到目前为止，我已经在 Markdown 表格中获得了尽可能多的格式和居中文本，但是在控制相对于外部容器的表格尺寸方面我没有发现任何东西(至少除了当它太大时它会自动缩小的事实)换行文本。) 是否可以在
带有大屏幕的 Windows 版 Chrome 上的 Swiper 插件存在问题。它在幻灯片左侧留下空白，我创建了一支笔来演示这一点: https://codepen.io/anon/pen/BwMx
在我的 Windows 应用商店应用程序中，我只有一个 XAML 中的 WebView: 我想在不同的屏幕尺寸或方向上将宽度设置为最大可用值。 我试图获取砂砾本身的宽度来设置 WebVi
好吧，我开发了一个 HorizontalScrollView，里面有一些按钮。 我可以通过 getWidth() 获取此 HorizontalScrollView 的宽度。但这会返回显示的 H
我们实现了 Jcrop在我们的系统中，到目前为止它运行良好。但是我们最近发现了一个小问题: 场景 我们的网站允许用户上传他们公司的标志。我们的宽高比要求是 200/150，不幸的是，用户的公司 Log
我遇到一个问题，我的 UIImageView 使用以下约束跨越整个屏幕宽度。 将前导对齐到:Superview(等于:-20) 将尾部对齐到:Superview(等于:-20) Top Space t
我有这个标记: 和这个 css(我正在使用 Twitter Bootstrap): img { height: auto; max-width
谁能给我解释一下这个页面是如何运作的？ http://wexley-demo.squarespace.com/ 我看到有javascript，但不明白。 这也是实现这种效果最简单的方法吗？ – 缩放、
我正在研究这个 slider : http://codepen.io/anon/pen/viBHe 当您打开页面时， slider 获得屏幕的 100% 宽度，这很好用，也是我想要实现的，但问题是当您
我目前正在为单页网站制作剪切路径: http://grafomantestsite3.be/ 如您所见，这适用于 chrome，但不适用于 firefox、opera 等。 我做了一个代码笔来说明我的
代码如下: Overall Advance Rating(1 foodees rated) 这里也是在对图像进行评级后获得光标。我如何处理光标直到只有图像。我曾尝试使
我正在尝试制作一个与此页面中的菜单类似的 Bootstrap 菜单。https://makr.com/ 这就是我想出的，但我现在几乎卡住了。 如何使下拉文本显示在每个下拉按钮下方，就像在 https:
我在 div 中嵌入了一个 vimeo，它是视口(viewport)的全宽。该视频在几天内运行良好，但现在播放按钮(和所有其他按钮)完全没有响应。 我试过弄乱 z-index 但那不起作用。
我是一名优秀的程序员,十分优秀！