我一直在摆弄我网站上基于CSS的下拉导航，并且修改了父菜单宽度的子菜单遇到了一些麻烦。打开子下拉列表时，父下拉列表将放大以匹配宽度。如果子下拉菜单小于父级，则它们似乎使用父菜单的宽度作为其水平偏移而不是它们自己的宽度，这会产生间隙。
我在这里汇集了一个实例：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>
...
总结：如何让每个导航子菜单都有自己的大小，不会修改其他菜单的大小？而且，我怎样才能让子菜单引用自己的宽度而不是父母的宽度呢？
欢迎所有建议;我为未经修饰的代码道歉。
答案 0 :(得分：1)
您的父元素正在展开的原因是您没有在子菜单上使用绝对定位，并且父宽度正在相应地调整更宽的子元素。您需要将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 */
}
子菜单垂直对齐：
我还更改了子菜单上的顶部位置，以调整UL上的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>