导航全宽</ul>中的内部<ul>
我在水平html5 / css3菜单栏中遇到以下示例的问题。菜单位于标题中，并且始终为100％传播：
<nav id="navi">
<ul>
<li><a href="#">Lorem ipsum</a>
<ul>
<li><a href="#" style="display:none;"> </a>
<ul>
<li class="item"><a href="#">Lorem ipsum</a><em class="visuallyhidden">Lorem ipsum: Lorem ipsum Lorem ipsum Lorem ipsum</em></li>
<li class="item"><a href="#">Lorem ipsum</a><em class="visuallyhidden">Lorem ipsum: Lorem ipsum Lorem ipsum Lorem ipsum</em></li>
<li class="item"><a href="#">Lorem ipsum</a></li>
<li class="item"><a href="#">Lorem ipsum Lorem ipsum Lorem ipsum</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Lorem ipsum</a>
<ul>
<li><a href="#" style="display:none;"> </a>
<ul>
<li class="item"><a href="#">Lorem ipsum Lorem ipsum Lorem ipsum</a></li>
<li class="item"><a href="#">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</a></li>
<li class="item"><a href="#">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</a></li>
<li class="item"><a href="#">Lorem ipsum</a></li>
<li class="item"><a href="#">Lorem ipsum</a></li>
<li class="item"><a href="#">Lorem ipsum</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Lorem ipsum</a>
<ul>
<li><a href="#" style="display:none;"> </a>
<ul>
<li class="item"><a href="#">Lorem ipsum Lorem ipsum</a></li>
<li class="item"><a href="#">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</a></li>
<li class="item"><a href="#">Lorem ipsum Lorem ipsum</a></li>
<li class="item"><a href="#">Lorem ipsum Lorem ipsum</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Lorem ipsum Lorem ipsum</a>
<ul>
<li><a href="#">Lorem ipsum Lorem ipsum Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum Lorem ipsum Lorem ipsum</a>
<ul>
<li><a href="#">Natur</a></li>
<li><a href="#">Nahrung</a></li>
<li><a href="#">Gastgewerbe</a></li>
<li><a href="#">Textilien</a></li>
<li><a href="#">Schönheit, Sport</a></li>
<li><a href="#">Gestaltung, Kunst</a></li>
<li><a href="#">Druck</a></li>
<li><a href="#">Bau</a></li>
<li><a href="#">Gebäudetechnik</a></li>
<li><a href="#">Holz, Innenausbau</a></li>
<li><a href="#">Fahrzeuge</a></li>
<li><a href="#">Elektrotechnik</a></li>
<li><a href="#">Metall, Maschinen</a></li>
<li><a href="#">Chemie, Physik</a></li>
<li><a href="#">Planung, Konstruktion</a></li>
<li><a href="#">Verkauf</a></li>
<li><a href="#">Wirtschaft, Verwaltung</a></li>
<li><a href="#">Verkehr, Logistik</a></li>
<li><a href="#">Informatik</a></li>
<li><a href="#">Kultur</a></li>
<li><a href="#">Gesundheit</a></li>
<li><a href="#">Bildung, Soziales</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Lorem ipsum Lorem ipsum</a>
<ul>
<li><a href="#" style="display:none;"> </a>
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum, Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum, Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum Lorem ipsum Lorem ipsum</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Lorem ipsum</a>
<ul>
<li><a href="#" style="display:none;"> </a>
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum Lorem ipsum</a></li>
</ul>
</li>
</ul>
</li>
<ul>
</nav>
如果我悬停/点击“菜单1”，“隐藏子菜单”会很好地出现在“菜单1”下方，但不会出现在菜单栏本身的全宽度上。如何实现子菜单将显示为100％（完整网站）？
我的css按要求：
.header nav ul {
margin: 0;
padding: 0;
background-color: #425863;
}
.header nav ul:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
.header nav ul li {
float: left;
list-style: none;
background-color: #425863;
}
.header nav ul li a {
display: block;
padding: 14px 34px 14px 34px;
color: #ffffff;
font-size: 1.154em;
text-decoration: none;
-webkit-transition: background 0.3s ease-out;
-moz-transition: background 0.3 ease-out;
-o-transition: background 0.3 ease-out;
transition: background 0.3s ease-out;
}
.header nav ul li:target > ul {
max-height: 200px;
}
.header nav ul li ul {
display: inline;
visibility: hidden;
position: absolute;
padding: 0px;
border: none;
box-shadow: none;
max-height: 0px;
overflow: visible;
-webkit-transition: max-height 0.3s ease-out;
-moz-transition: max-height 0.3s ease-out;
-o-transition: max-height 0.3s ease-out;
-ms-transition: max-height 0.3s ease-out;
transition: max-height 0.3s ease-out;
}
.header nav ul li ul li {
float: none;
display: block;
border: none;
background-color: #ffffff;
}
.header nav ul li ul li a {
padding-left: 44px;
color: #000000;
}
.header nav ul li ul li a:hover {
color: #fff;
background-color: #e2007a !important;
}
.header nav ul li ul:after {
clear: both;
content: " ";
display: block;
font-size: 0px;
height: 0px;
visibility: hidden;
}
.header nav ul li:hover > a {
color: #ffffff;
background-color: #e2007a;
}
.header nav ul li:hover > ul {
visibility: visible;
}
.header nav ul li:target > ul {
max-height: none;
}
示例
A live example或我的形象
编辑：我现在尝试了这个：position: absolute在包含第二级的ul元素上。然后我将width: 986px设置为测试。我得到的是
http://i57.tinypic.com/ipzfdi.png
这仅适用于第一个菜单元素（这是我想要的所有元素）。另一个子菜单在第一级下方打开，然后在屏幕右侧消失。所以，仍然没有解决方案。
我还创建了其中一个jsfiddles：Here to the fiddle
2 个答案:
答案 0 :(得分：0)
你错过了一个关闭li。所以在你的问题。如果我理解你想要显示子菜单到100％宽度。一种解决方案是将width: 100%设置为.header nav ul li ul：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.header nav ul {
margin: 0;
padding: 0;
background-color: #425863;
}
.header nav ul:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
.header nav ul li {
float: left;
list-style: none;
background-color: #425863;
}
.header nav ul li a {
display: block;
padding: 14px 34px 14px 34px;
color: #ffffff;
font-size: 1.154em;
text-decoration: none;
-webkit-transition: background 0.3s ease-out;
-moz-transition: background 0.3 ease-out;
-o-transition: background 0.3 ease-out;
transition: background 0.3s ease-out;
}
.header nav ul li:target > ul {
max-height: 200px;
}
.header nav ul li ul {
display: inline;
visibility: hidden;
position: absolute;
padding: 0px;
border: none;
box-shadow: none;
max-height: 0px;
overflow: visible;
-webkit-transition: max-height 0.3s ease-out;
-moz-transition: max-height 0.3s ease-out;
-o-transition: max-height 0.3s ease-out;
-ms-transition: max-height 0.3s ease-out;
transition: max-height 0.3s ease-out;
width: 100%;/*add width 100%*/
}
.header nav ul li ul li {
float: none;
display: block;
border: none;
background-color: #ffffff;
}
.header nav ul li ul li a {
padding-left: 44px;
color: #000000;
}
.header nav ul li ul li a:hover {
color: #fff;
background-color: #e2007a !important;
}
.header nav ul li ul:after {
clear: both;
content: " ";
display: block;
font-size: 0px;
height: 0px;
visibility: hidden;
}
.header nav ul li:hover > a {
color: #ffffff;
background-color: #e2007a;
}
.header nav ul li:hover > ul {
visibility: visible;
}
.header nav ul li:target > ul {
max-height: none;
}<div class="header">
<nav>
<ul>
<li><a href="#">menu 1</a>
<ul>
<li><a href="#">hidden submenu</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
答案 1 :(得分：0)
好的，我自己找到了解决方案。诀窍在外部容器的定位内，以及左侧：0px;和右：0px;
对于那些与之斗争的人我已经更新了jsfiddle，我将在这里发布新的CSS（HTML保持不变），以防小提琴被删除。
CSS：
.header nav {
width: 100%;
position: relative;
height: 45px;
}
.header nav ul {
position: absolute;
left: 0px;
right: 0px;
overflow: visible;
margin: 0;
padding: 0;
background-color: #425863;
}
.header nav ul:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
.header nav ul li {
float: left;
list-style: none;
background-color: #425863;
/* First level */
}
.header nav ul li a {
display: block;
padding: 14px 25px 14px 25px;
color: #ffffff;
font-size: 1.154em;
text-decoration: none;
-webkit-transition: background 0.3s ease-out;
-moz-transition: background 0.3 ease-out;
-o-transition: background 0.3 ease-out;
transition: background 0.3s ease-out;
}
.header nav ul li:target > ul {
max-height: 200px;
}
.header nav ul li ul {
display: inline;
visibility: hidden;
position: absolute;
width: 100%;
padding: 0px;
border: none;
box-shadow: none;
max-height: 0px;
overflow: visible;
z-index: 9999;
-webkit-transition: max-height 0.3s ease-out;
-moz-transition: max-height 0.3s ease-out;
-o-transition: max-height 0.3s ease-out;
-ms-transition: max-height 0.3s ease-out;
transition: max-height 0.3s ease-out;
}
.header nav ul li ul li {
float: none;
display: block;
border: none;
background-color: #ffffff;
/*Second level - first entries*/
}
.header nav ul li ul li a {
padding-left: 25px;
color: #000000;
font-size: 1.0em;
}
.header nav ul li ul li a:hover {
color: #fff;
background-color: #e2007a !important;
}
.header nav ul li ul li ul {
display: inline;
visibility: hidden;
position: absolute;
width: 100%;
padding: 0px;
border: none;
box-shadow: none;
max-height: 0px;
overflow: visible;
z-index: 9999;
-webkit-transition: max-height 0.3s ease-out;
-moz-transition: max-height 0.3s ease-out;
-o-transition: max-height 0.3s ease-out;
-ms-transition: max-height 0.3s ease-out;
transition: max-height 0.3s ease-out;
}
.header nav ul li ul li ul li {
float: none;
display: block;
border: none;
background-color: #ffffff;
/* Third level - normal entries */
}
.header nav ul li ul li ul li a {
padding-left: 25px;
color: #000000;
font-size: 1.0em;
}
.header nav ul li ul li ul li a:hover {
color: #fff;
background-color: #e2007a !important;
}
.header nav ul li ul:after {
clear: both;
content: " ";
display: block;
font-size: 0px;
height: 0px;
visibility: hidden;
}
.header nav ul li:hover > a {
color: #ffffff;
background-color: #e2007a;
}
.header nav ul li:hover > ul {
visibility: visible;
}
.header nav ul li:target > ul {
max-height: none;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？