CSS Drop-down Sub-menu 错误修改 Parent 宽度
CSS Drop-down Sub-menu Erroneously Modifying Parent Width
我一直在摆弄我网站上的 CSS-based drop-down 导航，并且 运行 在 sub-menus 修改 parent 的宽度方面遇到了一些麻烦菜单。当子 drop-down 打开时， parent drop-down 将放大以匹配宽度。如果子 drop-down 菜单小于 parent，它们似乎使用 parent 菜单的宽度作为水平偏移而不是它们自己的宽度，这会产生间隙。
我在这里整理了一个实例：http://jsfiddle.net/vwLf9f3w/2/
对不起CSS；我已经把相关代码拉到最上面了。
这里是CSS我的导航：
/* ----------- Navigation ----------- */
div.nav
{
display: block;
position: absolute;
top: 83px;
left: 470px;
height: 47px;
width: 530px;
background-color: transparent;
z-index: 21;
padding: 0px;
margin: 0;
font-size: 16px;
}
/* ------ [ NAV LINKS ] ------- */
/* Primary header links */
div.nav > ul > li > a
{
display: block;
background-color: transparent;
text-align: center;
height: 24px;
width: 96px;
background-color: #a9a9a9;
border: 1px solid #666666;
border-radius: 3px;
margin-top: 6px;
margin-bottom: 6px;
margin-left: 6px;
padding: 6px 0px 0px 0px;
}
div.nav > ul > li:hover > a
{
background-color: #8bbbdd;
}
/* All header links */
div.nav a
{
color: #000000;
text-decoration: none;
}
/* Header Sub-links */
div.nav > ul > li li > a
{
display: block;
padding: 0px 0px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 20px;
padding-right: 20px;
margin-top: 0px;
margin-left: 0px;
background: #a9a9a9;
color: #000000;
}
div.nav > ul > li li > a:hover, div.nav > ul ul li:hover > a
{
background: #8bbbdd;
}
/* ------ [ NAV LISTS ] ------- */
/* Primary navigation items */
div.nav > ul > li
{
display: inline-block;
background-color: transparent;
vertical-align: top; /* here */
max-width: 104px;
overflow: show;
}
/* Primary navigation list */
div.nav > ul
{
display: inline-block;
width: 650px;
margin: 0px;
}
/* Secondary navigation lists */
div.nav > ul ul
{
z-index: 0;
white-space:nowrap;
border: 1px solid #666666;
border-radius: 3px;
padding: 0 0 0 0;
list-style: none;
position: relative;
display: none;
background-color: transparent;
background: URL(images/blank.gif);/*#000;transparent; IE FIX*/
padding: 0;
left: 6px;
top: -3px;
position: relative;
margin-bottom: 0px;
margin-left: 0px;
width: auto;
height: auto;
}
div.nav ul li:hover > ul
{
display: inline-block;
}
/* Secondary list items */
div.nav > ul > li li
{
max-height: 31px;
}
/* Tertiary menu list */
div.nav > ul ul ul
{
top: -36px;
left: -100%;
position: relative;
}
这里是相关的 HTML:
...
<div class="nav">
<ul>
<li><a href="?page=">Home</a>
</li><li><a href="javascript:void(0);">Tech</a>
<ul>
<li><a href="#">Subject 1</a></li>
<li><a href="#">Subject 2</a>
<ul>
<li><a href="#">An Item</a></li>
<li><a href="#">Some Other Item</a></li>
<li><a href="#">And Yet Another!</a></li>
<li><a href="#">I Am Running Out of Ideas</a>
<ul>
<li><a href="#">Even More To Show Expansion</a></li>
<li><a href="#">And More</a></li>
<li><a href="#">And More!</a></li>
</ul>
</li>
<li><a href="#">One Last Item</a></li>
</ul>
</li>
<li><a href="#">Subject 3</a></li>
<li><a href="#">Subject 4</a></li>
</ul>
</li><li><a href="javascript:void(0);">Personal</a>
<ul>
<li><a href="#">Subject 1</a>
<ul>
<li><a href="#">1111</a></li>
<li><a href="#">2222</a></li>
<li><a href="#">3333</a></li>
<li><a href="#">4444</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li><a href="#">5555</a></li>
</ul>
</li>
<li><a href="#">Subject 2</a></li>
<li><a href="#">Subject 3</a></li>
</ul>
</li><li><a href="javascript:void(0);">Software</a>
<ul>
<li><a href="#">Subject 1</a></li>
<li><a href="#">Subject 2</a></li>
<li><a href="#">Subject 3</a></li>
</ul>
</li><li><a href="javascript:void(0);">Contact</a>
<ul>
<li><a href="#">Subject 1</a></li>
<li><a href="#">Subject 2</a></li>
<li><a href="#">Subject 3</a></li>
</ul>
</li>
</ul>
</div>
...
总结一下：如何让每个导航 sub-menu 都有自己的大小，不会修改其他菜单的大小？而且，我怎样才能让 sub-menus 引用它们自己的宽度而不是它们的 parents' 以防止出现间隙？
欢迎所有建议；我为未经修饰的代码道歉。
父元素扩展：
您的父元素展开的原因是您没有在子菜单上使用绝对定位，并且父元素的宽度正在相应地调整以适应更宽的子元素。您需要将 position:relative; 添加到 div.nav > ul > li li 并将 position: absolute; 添加到 div.nav > ul ul ul 以从流程中删除您的子菜单，这样它们就不会加宽您的父元素。
子菜单对齐和间隙消除：
下拉菜单右侧的子菜单：
div.nav > ul ul ul {
left: 100%; /* All the way to the right of parent */
position: absolute;
}
下拉菜单左侧的子菜单：
div.nav > ul ul ul {
left: auto; /* reset */
position: absolute;
right: 100%; /* All the way to the leftt of parent */
}
子菜单垂直对齐方式：
我还更改了子菜单的顶部位置，以调整 1px 边框和 4px 上边距的对齐方式。
div.nav > ul ul {
top: -5px; / * corrects sub menu top alignment */
}
看看下面的片段。它在下拉菜单的右侧设置了菜单。
/* ===============----------- Navigation -----------=============== */
div.nav
{
display: block;
position: absolute;
top: 83px;
left: 470px;
height: 47px;
width: 530px;
background-color: transparent;
z-index: 21;
padding: 0px;
margin: 0;
font-size: 16px;
}
/* ------ [ NAV LINKS ] ------- */
/* Primary header links */
div.nav > ul > li > a {
display: block;
background-color: transparent;
text-align: center;
height: 24px;
width: 96px;
background-color: #a9a9a9;
border: 1px solid #666666;
border-radius: 3px;
margin-top: 6px;
margin-bottom: 6px;
margin-left: 6px;
padding: 6px 0px 0px 0px;
}
div.nav > ul > li:hover > a {
background-color: #8bbbdd;
}
/* All header links */
div.nav a {
color: #000000;
text-decoration: none;
}
/* Header Sub-links */
div.nav > ul > li li > a {
display: block;
padding: 0px 0px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 20px;
padding-right: 20px;
margin-top: 0px;
margin-left: 0px;
background: #a9a9a9;
color: #000000;
}
div.nav > ul > li li > a:hover, div.nav > ul ul li:hover > a {
background: #8bbbdd;
}
/* ------ [ NAV LISTS ] ------- */
/* Primary navigation items */
div.nav > ul > li {
display: inline-block;
background-color: transparent;
vertical-align: top; /* here */
max-width: 104px;
overflow: show;
}
/* Primary navigation list */
div.nav > ul {
display: inline-block;
width: 650px;
margin: 0px;
}
/* Secondary navigation lists */
div.nav > ul ul {
z-index: 0;
white-space:nowrap;
border: 1px solid #666666;
border-radius: 3px;
padding: 0 0 0 0;
list-style: none;
position: relative;
display: none;
background-color: transparent;
background: URL(images/blank.gif);/*#000;transparent; IE FIX*/
padding: 0;
left: 6px;
top: -5px; /* corrects sub menu top alignment */
position: relative;
margin-bottom: 0px;
margin-left: 0px;
width: auto;
height: auto;
}
div.nav ul li:hover > ul {
display: inline-block;
}
/* Secondary list items */
div.nav > ul > li li {
max-height: 31px;
position: relative; /* required for child menu absolute positioning */
}
/* Tertiary menu list */
div.nav > ul ul ul {
position: absolute; /* removes child sub menu from flow and stops the expandsion of parent element */
left: 100%; /* positions sub menu to right side of parent */
}
/* =======-------- Shouldn't Be Relevant Beyond Here --------======= */
/* Page Setup */
@font-face
{
font-family: 'DejaVu Sans';
src: local(default_font), url('fonts/DejaVuSans.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-variant: normal;
}
@font-face
{
font-family: 'DejaVu Sans';
font-weight: bold;
font-style: normal;
font-variant: normal;
src: local('DejaVu Sans'), url('fonts/DejaVuSans.ttf') format('truetype');
}
@font-face
{
font-family: 'DejaVu Sans';
font-weight: normal;
font-style: italic;
font-variant: normal;
src: local('DejaVu Sans'), url('fonts/DejaVuSans.ttf') format('truetype');
}
*
{
padding: 0;
margin: 0;
border: 0;
/*font-family: "Arial", Gadget, sans-serif;*/
font-family: "DejaVu Sans", "Arial", "Gadget", "sans-serif";
color: #000;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}
* html .clearfix
{
height: 1%;
}
.clearfix
{
display: block;
}
html, body
{
min-height: 100%;
}
body
{
background: url(images/background.png) repeat; /*no-repeat*/
/*background-attachment: fixed;
background-size: cover;*/
font-family: Geneva, Arial, Helvetica, san-serif;
height: 100%;
min-height: 100%;
}
/* Main body components */
.header
{
height: 128px;
text-indent: -9999px;
margin: -1px 0px 0px 0px;
border-bottom: 0px solid #000;
padding: 0px;
}
#container
{
display: block;
position: relative;
width: 1000px; /* 750px */
height: 100%;
margin: 0 auto;
padding: 0px;
background-color: #fff;
box-shadow: 0px 0px 5px #888888;
border-bottom: 4px #000 solid;
margin-bottom: 32px;
z-index: 1;
}
.slideshow
{
display: block;
text-align: center;
margin-left: 0px;
margin-bottom: 24px;
}
#hide
{
display: none;
}
.announcement
{
/*color: #B0B0B0;*/
position: absolute;
top: 140px; left: 425px;
height: 47px; width:575px;
z-index: 20;
}
.selectable
{
}
.selectable:hover
{
cursor: pointer;
background-color: #F3F3FF;
}
#pagecategory
{
font-family: "League Gothic", "Arial", "sans-serif" !important;
letter-spacing: .02em;
position: absolute;
top: 128px;
left: 0px;
width: 400px;
height: 35px;
text-align: center;
padding-right: 32px;
background-color: transparent;
padding-top: .25em;
font-size: 24px;
/*text-shadow: 0 0 3px #777777;*/
}
/* Simple elements */
a
{
color: #FF6600 ;/*#151B8D; HYPERLINK 0066CC*/
font-style: bold;
/*text-shadow: 0.1em 0.1em 0.1em black;*/
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
a.a_subtle
{
color: #888;
font-style: italic;
text-decoration: none;
}
a.a_subtle:hover
{
color: #0000ff;
font-style: regular;
text-decoration: underline;
}
a.a_download
{
display: block;
color: #444444;
font-size: 20px;
text-decoration: none;
text-decoration: underline;
clear: left;
}
a.a_download:hover
{
color: #0000ff;
}
glowred
{
color: rgb(255, 102, 0);
/*text-shadow: 0.1em 0.1em 0.1em black;*/
}
.buildsbox
{
text-align: left;
display: inline-block;
border: 1px solid #bbbbbb;
border-radius: 3px;
padding: 12px;
overflow: scroll;
max-height: 512px;
width: 700px;
}
input
{
margin-bottom: 8px;
}
input[type="text"], textarea
{
border: 1px solid;
font-size: 16px;
padding: 3px;
}
input[type="submit"]
{
border: 1px solid;
font-size: 16px;
padding: 3px;
}
input[type="submit"]:hover
{
background-color: #CCCCFF;
cursor: pointer;
}
label
{
font-size: 15px;
}
.errorbox
{
display: block;
margin-top: 5px;
margin-bottom: 5px;
border: 1px dashed #903333;
border-radius: 2px;
padding: 5px;
background-color: #FFBBBB;
}
.successbox
{
display: block;
margin-top: 5px;
margin-bottom: 5px;
border: 1px dashed #339033;
border-radius: 2px;
padding: 5px;
background-color: #BBFFBB;
}
/* Posts/text */
h1
{
font-family: "League Gothic", arial, sans-serif !important;
text-align: left;
font-size: 30px;
font-weight: normal;
margin-bottom: 16px;
display: block;
}
h2
{
font-family: "League Gothic", arial, sans-serif !important;
margin-bottom: 8px;
margin-top: 16px;
display: block;
font-size: 16px;
letter-spacing: .02em;
font-weight: 700 !important;
}
em, i
{
font-style: italic !important;
font-family: inherit;
font-weight: inherit;
}
/*subtitle_in
{
margin-left: -4px;
margin-bottom: 8px;
margin-top: 16px;
text-shadow: 0 0 1px #111111;
display: inline-block;
font-weight: bold;
}*/
code
{
background: #EEEEEE;
display: inline-block;
padding: 1px;
font-family: "courier new", monospace !important;
}
ul
{
margin-left: 32px;
margin-top: 4px;
margin-bottom: 4px;
}
/*h1
{
height: 1px;
background: transparent;
font-size:0px;
font-weight:normal;
padding:0px;
color: transparent;
}
h1 em
{
font-style:normal;
}*/
#content
{
/*width: 916px; /* 1111 */
float: left;
margin: 0px;
margin-left: 12px;
margin-right: 12px;
width: 976px;
}
h3
{
font-size: 24px;
border-bottom: 2px solid #666666;
}
.category
{
font-size: 18px;
margin: 15px 0 0 20px;
}
ph
{
padding: 0px;
margin-left: -1px;
margin-top: 0px;
}
h5
{
font-size: 12px;
margin: 10px 10px 25px 50px;
line-height: 20px;
border-left: 3px solid #ffffff;
padding-left: 13px;
}
.post
{
display: inline-block;
font-size: 16px;
line-height: 25px !important;
margin-top: 5px;
margin-bottom: 10px;
margin-left: 16px;
margin-right: 16px;
line-height: 20px;
font-weight: 1;
background-color: transparent;
background-image: URL(images/PostBKG.png);
background-repeat: repeat;
padding: 15px;
width: 914px;
text-align: justify;
}
.pagesplit
{
height: 20px;
width: 904px;
background: transparent URL(images/postbreak.png);
margin-top: 16px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
.summaryblock
{
width: 440px;
display: inline-block;
vertical-align: top;
margin-left: 8px;
margin-right: 8px;
height: 275px !important;
overflow-x: visible;
overflow-y: hidden;
}
.summaryblock:hover
{
cursor: pointer;
/*color: #000099;*/
}
.summaryblock a
{
text-decoration: none;
color: inherit;
}
.summaryblock a:hover
{
text-decoration: none;
}
.imgleft
{
border-radius: 5px;
box-shadow: 2px 2px 5px #888888;
float: left;
margin-right: 16px;
margin-top: 2px;
margin-bottom: 8px;
margin-left: 0px;
}
.imgleft_noborder
{
float: left;
margin-right: 16px;
margin-top: 2px;
margin-bottom: 8px;
margin-left: 0px;
}
.imgright
{
border-radius: 5px;
box-shadow: 2px 2px 5px #888888;
float: right;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 8px;
margin-left: 16px;
}
.imgright_noborder
{
float: right;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 8px;
margin-left: 16px;
}
.imgnormal
{
border-radius: 5px;
box-shadow: 2px 2px 5px #888888;
}
.rounded
{
border-radius: 16px;
}
/* Css Effect8 box shadow */
.elegant
{
position:relative;
-webkit-box-shadow:0 1px 4px #000000, 0 0 40px #000000 inset;
-moz-box-shadow:0 1px 4px #000000, 0 0 40px #000000 inset;
box-shadow:0 1px 4px #000000, 0 0 40px #000000 inset;
}
/*#comment
{
margin-left: 32px;
margin-right: 32px;
padding: 8px;
border-radius: 5px;
border: 1px solid #5555ee;
}*/
/* COMMENTS */
.comment
{
color: #000000;
font: 16px "Trebuchet MS", Helvetica, sans-serif;
/*line-height:24px;*/
padding: 15px;
background-color: #f2f2f2;/*#e8e7e2;*/
border: 1px solid #c2c2c2;
-moz-border-radius: 5px; /* Firefox 3.6-, removed in Firefox 13 */
-webkit-border-radius: 5px; /* Safari 4-, Chrome 3- */
border-radius: 5px; /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */
width: auto%;
margin-right: 32px;
margin-left: 32px;
}
.com_report
{
float: right;
}
.com_title_text
{
font-size:19px;
/*text-transform:capitalize;*/
color: #000000;
}
.com_title
{
padding: 5px;
margin-right: -15px;
padding-left: 10px;
background-color: #ffffff;
margin-left: -15px;
margin-top: -15px;
-moz-border-radius: 5px; /* Firefox 3.6-, removed in Firefox 13 */
-webkit-border-radius: 5px; /* Safari 4-, Chrome 3- */
border-top-right-radius: 5px; /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */
border-top-left-radius: 5px; /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */
border-bottom: 1px solid #e2e2e2;
width: auto;
}
.com_body
{
margin: 0 auto;
margin-top: 15px;
font: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size: 15px;
line-height: 21px;
}
.post r
{
color: #2554C7;
font-style: bold;
/*text-shadow: 0.1em 0.1em 0.2em black*/
}
.post span
{
display:block;
text-align:center;
}
.post form
{
display:block;
text-align:left;
}
.post table
{
display:block-inline;
border-collapse: collapse;
border: 2px solid #DDDDDD;
margin-left: 16px;
margin-right: 16px;
}
.post table caption
{
text-align: center;
font-size: 18px;
font-weight: bold;
margin-top: 3px;
}
.post td
{
border: 1px solid #DDDDDD;
padding: 5px;
font-size: 16px;
font-weight: normal;
}
.post th
{
border: 1px solid #DDDDDD;
padding: 5px;
font-weight: bold;
text-align: center;
background-color: #EEEEEE;
font-size: 16px;
}
input.myButton
{
background-image: url('images/formbutton.png');
width: 200px;
height: 48px;
border-style:none;
font-size: 20px;
color: #ffffff;
}
input.myButton:hover{
background-image: url('images/formbutton_hover.png');
}
input.myButton:active{
background-image: url('images/formbutton_press.png');
}
.cap
{
font-style: italic;
color: #666666;
display: block;
text-align: center;
}
#full_citation
{
display: none;
}
#full_citation_link
{
display: inline;
}
/* Footer */
footer
{
height: auto;
margin-left:auto;
margin-right:auto;
margin-bottom: 16px;
/*background: #000000;*/
background: transparent;
font-size: 12px;
/*color: #fff;*/
width: 984px;
border-radius: 8px;
text-align: center;
padding: 8px;
}
footer a
{
color: #FFF;
}
<!DOCTYPE html>
<body>
<!-- Header -->
<div id="container" class="clearfix">
<div class="nav">
<ul>
<li><a href="?page=">Home</a>
</li><li><a href="javascript:void(0);">Tech</a>
<ul>
<li><a href="#">Subject 1</a></li>
<li><a href="#">Subject 2</a>
<ul>
<li><a href="#">An Item</a></li>
<li><a href="#">Some Other Item</a></li>
<li><a href="#">And Yet Another!</a></li>
<li><a href="#">I Am Running Out of Ideas</a>
<ul>
<li><a href="#">Even More To Show Expansion</a></li>
<li><a href="#">And More</a></li>
<li><a href="#">And More!</a></li>
</ul>
</li>
<li><a href="#">One Last Item</a></li>
</ul>
</li>
<li><a href="#">Subject 3</a></li>
<li><a href="#">Subject 4</a></li>
</ul>
</li><li><a href="javascript:void(0);">Personal</a>
<ul>
<li><a href="#">Subject 1</a>
<ul>
<li><a href="#">1111</a></li>
<li><a href="#">2222</a></li>
<li><a href="#">3333</a></li>
<li><a href="#">4444</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li><a href="#">5555</a></li>
</ul>
</li>
<li><a href="#">Subject 2</a></li>
<li><a href="#">Subject 3</a></li>
</ul>
</li><li><a href="javascript:void(0);">Software</a>
<ul>
<li><a href="#">Subject 1</a></li>
<li><a href="#">Subject 2</a></li>
<li><a href="#">Subject 3</a></li>
</ul>
</li><li><a href="javascript:void(0);">Contact</a>
<ul>
<li><a href="#">Subject 1</a></li>
<li><a href="#">Subject 2</a></li>
<li><a href="#">Subject 3</a></li>
</ul>
</li>
</ul>
</div>
<div class="announcement">
<p>
<b>News - </b> Incredibly exciting news goes here!
</p>
</div>
<div id="pagecategory">Test Pages</div>
<div class='header' style="width: 1000px; height: 168px; background: #999999 url('http://www.bitfracture.com/images/header.png') 100% 100% no-repeat;') 100% 100% no-repeat; "></div>
<br/>
<div id="content">
<div class="post">
<h1>Test Page</h1>
Notice that when hovering over "Tech" and opening any sub-menu, all parent menus resize to the size of the sub-menu.<br/><br/>
Also notice that when hovering over "Personal" all sub-menus are now float as far left as the width of the parent, rather than their own width, leaving a gap. <br/><br/>
</div>
</div>
</div>
<footer>
© 2008-2015 Erik Greif All Rights Reserved. <br>Site design and content created by Erik Greif.
</footer>
</body>
</html>
我一直在摆弄我网站上的 CSS-based drop-down 导航，并且 运行 在 sub-menus 修改 parent 的宽度方面遇到了一些麻烦菜单。当子 drop-down 打开时， parent drop-down 将放大以匹配宽度。如果子 drop-down 菜单小于 parent，它们似乎使用 parent 菜单的宽度作为水平偏移而不是它们自己的宽度，这会产生间隙。
我在这里整理了一个实例：http://jsfiddle.net/vwLf9f3w/2/
对不起CSS；我已经把相关代码拉到最上面了。
这里是CSS我的导航：
/* ----------- Navigation ----------- */
div.nav
{
display: block;
position: absolute;
top: 83px;
left: 470px;
height: 47px;
width: 530px;
background-color: transparent;
z-index: 21;
padding: 0px;
margin: 0;
font-size: 16px;
}
/* ------ [ NAV LINKS ] ------- */
/* Primary header links */
div.nav > ul > li > a
{
display: block;
background-color: transparent;
text-align: center;
height: 24px;
width: 96px;
background-color: #a9a9a9;
border: 1px solid #666666;
border-radius: 3px;
margin-top: 6px;
margin-bottom: 6px;
margin-left: 6px;
padding: 6px 0px 0px 0px;
}
div.nav > ul > li:hover > a
{
background-color: #8bbbdd;
}
/* All header links */
div.nav a
{
color: #000000;
text-decoration: none;
}
/* Header Sub-links */
div.nav > ul > li li > a
{
display: block;
padding: 0px 0px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 20px;
padding-right: 20px;
margin-top: 0px;
margin-left: 0px;
background: #a9a9a9;
color: #000000;
}
div.nav > ul > li li > a:hover, div.nav > ul ul li:hover > a
{
background: #8bbbdd;
}
/* ------ [ NAV LISTS ] ------- */
/* Primary navigation items */
div.nav > ul > li
{
display: inline-block;
background-color: transparent;
vertical-align: top; /* here */
max-width: 104px;
overflow: show;
}
/* Primary navigation list */
div.nav > ul
{
display: inline-block;
width: 650px;
margin: 0px;
}
/* Secondary navigation lists */
div.nav > ul ul
{
z-index: 0;
white-space:nowrap;
border: 1px solid #666666;
border-radius: 3px;
padding: 0 0 0 0;
list-style: none;
position: relative;
display: none;
background-color: transparent;
background: URL(images/blank.gif);/*#000;transparent; IE FIX*/
padding: 0;
left: 6px;
top: -3px;
position: relative;
margin-bottom: 0px;
margin-left: 0px;
width: auto;
height: auto;
}
div.nav ul li:hover > ul
{
display: inline-block;
}
/* Secondary list items */
div.nav > ul > li li
{
max-height: 31px;
}
/* Tertiary menu list */
div.nav > ul ul ul
{
top: -36px;
left: -100%;
position: relative;
}
这里是相关的 HTML:
...
<div class="nav">
<ul>
<li><a href="?page=">Home</a>
</li><li><a href="javascript:void(0);">Tech</a>
<ul>
<li><a href="#">Subject 1</a></li>
<li><a href="#">Subject 2</a>
<ul>
<li><a href="#">An Item</a></li>
<li><a href="#">Some Other Item</a></li>
<li><a href="#">And Yet Another!</a></li>
<li><a href="#">I Am Running Out of Ideas</a>
<ul>
<li><a href="#">Even More To Show Expansion</a></li>
<li><a href="#">And More</a></li>
<li><a href="#">And More!</a></li>
</ul>
</li>
<li><a href="#">One Last Item</a></li>
</ul>
</li>
<li><a href="#">Subject 3</a></li>
<li><a href="#">Subject 4</a></li>
</ul>
</li><li><a href="javascript:void(0);">Personal</a>
<ul>
<li><a href="#">Subject 1</a>
<ul>
<li><a href="#">1111</a></li>
<li><a href="#">2222</a></li>
<li><a href="#">3333</a></li>
<li><a href="#">4444</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li><a href="#">5555</a></li>
</ul>
</li>
<li><a href="#">Subject 2</a></li>
<li><a href="#">Subject 3</a></li>
</ul>
</li><li><a href="javascript:void(0);">Software</a>
<ul>
<li><a href="#">Subject 1</a></li>
<li><a href="#">Subject 2</a></li>
<li><a href="#">Subject 3</a></li>
</ul>
</li><li><a href="javascript:void(0);">Contact</a>
<ul>
<li><a href="#">Subject 1</a></li>
<li><a href="#">Subject 2</a></li>
<li><a href="#">Subject 3</a></li>
</ul>
</li>
</ul>
</div>
...
总结一下：如何让每个导航 sub-menu 都有自己的大小，不会修改其他菜单的大小？而且，我怎样才能让 sub-menus 引用它们自己的宽度而不是它们的 parents' 以防止出现间隙？
欢迎所有建议；我为未经修饰的代码道歉。
父元素扩展：
您的父元素展开的原因是您没有在子菜单上使用绝对定位，并且父元素的宽度正在相应地调整以适应更宽的子元素。您需要将 position:relative; 添加到 div.nav > ul > li li 并将 position: absolute; 添加到 div.nav > ul ul ul 以从流程中删除您的子菜单，这样它们就不会加宽您的父元素。
子菜单对齐和间隙消除：
下拉菜单右侧的子菜单：
div.nav > ul ul ul {
left: 100%; /* All the way to the right of parent */
position: absolute;
}
下拉菜单左侧的子菜单：
div.nav > ul ul ul {
left: auto; /* reset */
position: absolute;
right: 100%; /* All the way to the leftt of parent */
}
子菜单垂直对齐方式：
我还更改了子菜单的顶部位置，以调整 1px 边框和 4px 上边距的对齐方式。
div.nav > ul ul {
top: -5px; / * corrects sub menu top alignment */
}
看看下面的片段。它在下拉菜单的右侧设置了菜单。
/* ===============----------- Navigation -----------=============== */
div.nav
{
display: block;
position: absolute;
top: 83px;
left: 470px;
height: 47px;
width: 530px;
background-color: transparent;
z-index: 21;
padding: 0px;
margin: 0;
font-size: 16px;
}
/* ------ [ NAV LINKS ] ------- */
/* Primary header links */
div.nav > ul > li > a {
display: block;
background-color: transparent;
text-align: center;
height: 24px;
width: 96px;
background-color: #a9a9a9;
border: 1px solid #666666;
border-radius: 3px;
margin-top: 6px;
margin-bottom: 6px;
margin-left: 6px;
padding: 6px 0px 0px 0px;
}
div.nav > ul > li:hover > a {
background-color: #8bbbdd;
}
/* All header links */
div.nav a {
color: #000000;
text-decoration: none;
}
/* Header Sub-links */
div.nav > ul > li li > a {
display: block;
padding: 0px 0px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 20px;
padding-right: 20px;
margin-top: 0px;
margin-left: 0px;
background: #a9a9a9;
color: #000000;
}
div.nav > ul > li li > a:hover, div.nav > ul ul li:hover > a {
background: #8bbbdd;
}
/* ------ [ NAV LISTS ] ------- */
/* Primary navigation items */
div.nav > ul > li {
display: inline-block;
background-color: transparent;
vertical-align: top; /* here */
max-width: 104px;
overflow: show;
}
/* Primary navigation list */
div.nav > ul {
display: inline-block;
width: 650px;
margin: 0px;
}
/* Secondary navigation lists */
div.nav > ul ul {
z-index: 0;
white-space:nowrap;
border: 1px solid #666666;
border-radius: 3px;
padding: 0 0 0 0;
list-style: none;
position: relative;
display: none;
background-color: transparent;
background: URL(images/blank.gif);/*#000;transparent; IE FIX*/
padding: 0;
left: 6px;
top: -5px; /* corrects sub menu top alignment */
position: relative;
margin-bottom: 0px;
margin-left: 0px;
width: auto;
height: auto;
}
div.nav ul li:hover > ul {
display: inline-block;
}
/* Secondary list items */
div.nav > ul > li li {
max-height: 31px;
position: relative; /* required for child menu absolute positioning */
}
/* Tertiary menu list */
div.nav > ul ul ul {
position: absolute; /* removes child sub menu from flow and stops the expandsion of parent element */
left: 100%; /* positions sub menu to right side of parent */
}
/* =======-------- Shouldn't Be Relevant Beyond Here --------======= */
/* Page Setup */
@font-face
{
font-family: 'DejaVu Sans';
src: local(default_font), url('fonts/DejaVuSans.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-variant: normal;
}
@font-face
{
font-family: 'DejaVu Sans';
font-weight: bold;
font-style: normal;
font-variant: normal;
src: local('DejaVu Sans'), url('fonts/DejaVuSans.ttf') format('truetype');
}
@font-face
{
font-family: 'DejaVu Sans';
font-weight: normal;
font-style: italic;
font-variant: normal;
src: local('DejaVu Sans'), url('fonts/DejaVuSans.ttf') format('truetype');
}
*
{
padding: 0;
margin: 0;
border: 0;
/*font-family: "Arial", Gadget, sans-serif;*/
font-family: "DejaVu Sans", "Arial", "Gadget", "sans-serif";
color: #000;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}
* html .clearfix
{
height: 1%;
}
.clearfix
{
display: block;
}
html, body
{
min-height: 100%;
}
body
{
background: url(images/background.png) repeat; /*no-repeat*/
/*background-attachment: fixed;
background-size: cover;*/
font-family: Geneva, Arial, Helvetica, san-serif;
height: 100%;
min-height: 100%;
}
/* Main body components */
.header
{
height: 128px;
text-indent: -9999px;
margin: -1px 0px 0px 0px;
border-bottom: 0px solid #000;
padding: 0px;
}
#container
{
display: block;
position: relative;
width: 1000px; /* 750px */
height: 100%;
margin: 0 auto;
padding: 0px;
background-color: #fff;
box-shadow: 0px 0px 5px #888888;
border-bottom: 4px #000 solid;
margin-bottom: 32px;
z-index: 1;
}
.slideshow
{
display: block;
text-align: center;
margin-left: 0px;
margin-bottom: 24px;
}
#hide
{
display: none;
}
.announcement
{
/*color: #B0B0B0;*/
position: absolute;
top: 140px; left: 425px;
height: 47px; width:575px;
z-index: 20;
}
.selectable
{
}
.selectable:hover
{
cursor: pointer;
background-color: #F3F3FF;
}
#pagecategory
{
font-family: "League Gothic", "Arial", "sans-serif" !important;
letter-spacing: .02em;
position: absolute;
top: 128px;
left: 0px;
width: 400px;
height: 35px;
text-align: center;
padding-right: 32px;
background-color: transparent;
padding-top: .25em;
font-size: 24px;
/*text-shadow: 0 0 3px #777777;*/
}
/* Simple elements */
a
{
color: #FF6600 ;/*#151B8D; HYPERLINK 0066CC*/
font-style: bold;
/*text-shadow: 0.1em 0.1em 0.1em black;*/
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
a.a_subtle
{
color: #888;
font-style: italic;
text-decoration: none;
}
a.a_subtle:hover
{
color: #0000ff;
font-style: regular;
text-decoration: underline;
}
a.a_download
{
display: block;
color: #444444;
font-size: 20px;
text-decoration: none;
text-decoration: underline;
clear: left;
}
a.a_download:hover
{
color: #0000ff;
}
glowred
{
color: rgb(255, 102, 0);
/*text-shadow: 0.1em 0.1em 0.1em black;*/
}
.buildsbox
{
text-align: left;
display: inline-block;
border: 1px solid #bbbbbb;
border-radius: 3px;
padding: 12px;
overflow: scroll;
max-height: 512px;
width: 700px;
}
input
{
margin-bottom: 8px;
}
input[type="text"], textarea
{
border: 1px solid;
font-size: 16px;
padding: 3px;
}
input[type="submit"]
{
border: 1px solid;
font-size: 16px;
padding: 3px;
}
input[type="submit"]:hover
{
background-color: #CCCCFF;
cursor: pointer;
}
label
{
font-size: 15px;
}
.errorbox
{
display: block;
margin-top: 5px;
margin-bottom: 5px;
border: 1px dashed #903333;
border-radius: 2px;
padding: 5px;
background-color: #FFBBBB;
}
.successbox
{
display: block;
margin-top: 5px;
margin-bottom: 5px;
border: 1px dashed #339033;
border-radius: 2px;
padding: 5px;
background-color: #BBFFBB;
}
/* Posts/text */
h1
{
font-family: "League Gothic", arial, sans-serif !important;
text-align: left;
font-size: 30px;
font-weight: normal;
margin-bottom: 16px;
display: block;
}
h2
{
font-family: "League Gothic", arial, sans-serif !important;
margin-bottom: 8px;
margin-top: 16px;
display: block;
font-size: 16px;
letter-spacing: .02em;
font-weight: 700 !important;
}
em, i
{
font-style: italic !important;
font-family: inherit;
font-weight: inherit;
}
/*subtitle_in
{
margin-left: -4px;
margin-bottom: 8px;
margin-top: 16px;
text-shadow: 0 0 1px #111111;
display: inline-block;
font-weight: bold;
}*/
code
{
background: #EEEEEE;
display: inline-block;
padding: 1px;
font-family: "courier new", monospace !important;
}
ul
{
margin-left: 32px;
margin-top: 4px;
margin-bottom: 4px;
}
/*h1
{
height: 1px;
background: transparent;
font-size:0px;
font-weight:normal;
padding:0px;
color: transparent;
}
h1 em
{
font-style:normal;
}*/
#content
{
/*width: 916px; /* 1111 */
float: left;
margin: 0px;
margin-left: 12px;
margin-right: 12px;
width: 976px;
}
h3
{
font-size: 24px;
border-bottom: 2px solid #666666;
}
.category
{
font-size: 18px;
margin: 15px 0 0 20px;
}
ph
{
padding: 0px;
margin-left: -1px;
margin-top: 0px;
}
h5
{
font-size: 12px;
margin: 10px 10px 25px 50px;
line-height: 20px;
border-left: 3px solid #ffffff;
padding-left: 13px;
}
.post
{
display: inline-block;
font-size: 16px;
line-height: 25px !important;
margin-top: 5px;
margin-bottom: 10px;
margin-left: 16px;
margin-right: 16px;
line-height: 20px;
font-weight: 1;
background-color: transparent;
background-image: URL(images/PostBKG.png);
background-repeat: repeat;
padding: 15px;
width: 914px;
text-align: justify;
}
.pagesplit
{
height: 20px;
width: 904px;
background: transparent URL(images/postbreak.png);
margin-top: 16px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
.summaryblock
{
width: 440px;
display: inline-block;
vertical-align: top;
margin-left: 8px;
margin-right: 8px;
height: 275px !important;
overflow-x: visible;
overflow-y: hidden;
}
.summaryblock:hover
{
cursor: pointer;
/*color: #000099;*/
}
.summaryblock a
{
text-decoration: none;
color: inherit;
}
.summaryblock a:hover
{
text-decoration: none;
}
.imgleft
{
border-radius: 5px;
box-shadow: 2px 2px 5px #888888;
float: left;
margin-right: 16px;
margin-top: 2px;
margin-bottom: 8px;
margin-left: 0px;
}
.imgleft_noborder
{
float: left;
margin-right: 16px;
margin-top: 2px;
margin-bottom: 8px;
margin-left: 0px;
}
.imgright
{
border-radius: 5px;
box-shadow: 2px 2px 5px #888888;
float: right;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 8px;
margin-left: 16px;
}
.imgright_noborder
{
float: right;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 8px;
margin-left: 16px;
}
.imgnormal
{
border-radius: 5px;
box-shadow: 2px 2px 5px #888888;
}
.rounded
{
border-radius: 16px;
}
/* Css Effect8 box shadow */
.elegant
{
position:relative;
-webkit-box-shadow:0 1px 4px #000000, 0 0 40px #000000 inset;
-moz-box-shadow:0 1px 4px #000000, 0 0 40px #000000 inset;
box-shadow:0 1px 4px #000000, 0 0 40px #000000 inset;
}
/*#comment
{
margin-left: 32px;
margin-right: 32px;
padding: 8px;
border-radius: 5px;
border: 1px solid #5555ee;
}*/
/* COMMENTS */
.comment
{
color: #000000;
font: 16px "Trebuchet MS", Helvetica, sans-serif;
/*line-height:24px;*/
padding: 15px;
background-color: #f2f2f2;/*#e8e7e2;*/
border: 1px solid #c2c2c2;
-moz-border-radius: 5px; /* Firefox 3.6-, removed in Firefox 13 */
-webkit-border-radius: 5px; /* Safari 4-, Chrome 3- */
border-radius: 5px; /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */
width: auto%;
margin-right: 32px;
margin-left: 32px;
}
.com_report
{
float: right;
}
.com_title_text
{
font-size:19px;
/*text-transform:capitalize;*/
color: #000000;
}
.com_title
{
padding: 5px;
margin-right: -15px;
padding-left: 10px;
background-color: #ffffff;
margin-left: -15px;
margin-top: -15px;
-moz-border-radius: 5px; /* Firefox 3.6-, removed in Firefox 13 */
-webkit-border-radius: 5px; /* Safari 4-, Chrome 3- */
border-top-right-radius: 5px; /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */
border-top-left-radius: 5px; /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */
border-bottom: 1px solid #e2e2e2;
width: auto;
}
.com_body
{
margin: 0 auto;
margin-top: 15px;
font: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size: 15px;
line-height: 21px;
}
.post r
{
color: #2554C7;
font-style: bold;
/*text-shadow: 0.1em 0.1em 0.2em black*/
}
.post span
{
display:block;
text-align:center;
}
.post form
{
display:block;
text-align:left;
}
.post table
{
display:block-inline;
border-collapse: collapse;
border: 2px solid #DDDDDD;
margin-left: 16px;
margin-right: 16px;
}
.post table caption
{
text-align: center;
font-size: 18px;
font-weight: bold;
margin-top: 3px;
}
.post td
{
border: 1px solid #DDDDDD;
padding: 5px;
font-size: 16px;
font-weight: normal;
}
.post th
{
border: 1px solid #DDDDDD;
padding: 5px;
font-weight: bold;
text-align: center;
background-color: #EEEEEE;
font-size: 16px;
}
input.myButton
{
background-image: url('images/formbutton.png');
width: 200px;
height: 48px;
border-style:none;
font-size: 20px;
color: #ffffff;
}
input.myButton:hover{
background-image: url('images/formbutton_hover.png');
}
input.myButton:active{
background-image: url('images/formbutton_press.png');
}
.cap
{
font-style: italic;
color: #666666;
display: block;
text-align: center;
}
#full_citation
{
display: none;
}
#full_citation_link
{
display: inline;
}
/* Footer */
footer
{
height: auto;
margin-left:auto;
margin-right:auto;
margin-bottom: 16px;
/*background: #000000;*/
background: transparent;
font-size: 12px;
/*color: #fff;*/
width: 984px;
border-radius: 8px;
text-align: center;
padding: 8px;
}
footer a
{
color: #FFF;
}
<!DOCTYPE html>
<body>
<!-- Header -->
<div id="container" class="clearfix">
<div class="nav">
<ul>
<li><a href="?page=">Home</a>
</li><li><a href="javascript:void(0);">Tech</a>
<ul>
<li><a href="#">Subject 1</a></li>
<li><a href="#">Subject 2</a>
<ul>
<li><a href="#">An Item</a></li>
<li><a href="#">Some Other Item</a></li>
<li><a href="#">And Yet Another!</a></li>
<li><a href="#">I Am Running Out of Ideas</a>
<ul>
<li><a href="#">Even More To Show Expansion</a></li>
<li><a href="#">And More</a></li>
<li><a href="#">And More!</a></li>
</ul>
</li>
<li><a href="#">One Last Item</a></li>
</ul>
</li>
<li><a href="#">Subject 3</a></li>
<li><a href="#">Subject 4</a></li>
</ul>
</li><li><a href="javascript:void(0);">Personal</a>
<ul>
<li><a href="#">Subject 1</a>
<ul>
<li><a href="#">1111</a></li>
<li><a href="#">2222</a></li>
<li><a href="#">3333</a></li>
<li><a href="#">4444</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li><a href="#">5555</a></li>
</ul>
</li>
<li><a href="#">Subject 2</a></li>
<li><a href="#">Subject 3</a></li>
</ul>
</li><li><a href="javascript:void(0);">Software</a>
<ul>
<li><a href="#">Subject 1</a></li>
<li><a href="#">Subject 2</a></li>
<li><a href="#">Subject 3</a></li>
</ul>
</li><li><a href="javascript:void(0);">Contact</a>
<ul>
<li><a href="#">Subject 1</a></li>
<li><a href="#">Subject 2</a></li>
<li><a href="#">Subject 3</a></li>
</ul>
</li>
</ul>
</div>
<div class="announcement">
<p>
<b>News - </b> Incredibly exciting news goes here!
</p>
</div>
<div id="pagecategory">Test Pages</div>
<div class='header' style="width: 1000px; height: 168px; background: #999999 url('http://www.bitfracture.com/images/header.png') 100% 100% no-repeat;') 100% 100% no-repeat; "></div>
<br/>
<div id="content">
<div class="post">
<h1>Test Page</h1>
Notice that when hovering over "Tech" and opening any sub-menu, all parent menus resize to the size of the sub-menu.<br/><br/>
Also notice that when hovering over "Personal" all sub-menus are now float as far left as the width of the parent, rather than their own width, leaving a gap. <br/><br/>
</div>
</div>
</div>
<footer>
© 2008-2015 Erik Greif All Rights Reserved. <br>Site design and content created by Erik Greif.
</footer>
</body>
</html>