CSS Drop-down Sub-menu Erroneously Modifying Parent Width - html

Question

I have been fiddling with CSS-based drop-down navigation on my website and ran into some trouble with the sub-menus modifying the width of the parent menus. When a sub-drop-down is opened, the parent drop-down will enlarge to match the width. If sub-drop-down menus are smaller than the parent, they appear to be using the width of the parent menus for their horizontal offset instead of their own width, which creates a gap.
I have pulled together a live example here: http://jsfiddle.net/vwLf9f3w/2/
Sorry for the large quantity of CSS; I have pulled the relevant code to the top.
Here is the CSS just for my navigation:
/* ----------- 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;
}
And here is the relevant HTML:
...
<div class="nav">
<ul>
<li>Home
</li><li>Tech
<ul>
<li>Subject 1</li>
<li>Subject 2
<ul>
<li>An Item</li>
<li>Some Other Item</li>
<li>And Yet Another!</li>
<li>I Am Running Out of Ideas
<ul>
<li>Even More To Show Expansion</li>
<li>And More</li>
<li>And More!</li>
</ul>
</li>
<li>One Last Item</li>
</ul>
</li>
<li>Subject 3</li>
<li>Subject 4</li>
</ul>
</li><li>Personal
<ul>
<li>Subject 1
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>5555</li>
</ul>
</li>
<li>Subject 2</li>
<li>Subject 3</li>
</ul>
</li><li>Software
<ul>
<li>Subject 1</li>
<li>Subject 2</li>
<li>Subject 3</li>
</ul>
</li><li>Contact
<ul>
<li>Subject 1</li>
<li>Subject 2</li>
<li>Subject 3</li>
</ul>
</li>
</ul>
</div>
...
To summarize: How can I get each navigation sub-menu to have its own size that will not modify the size of other menus? And, how can I get the sub-menus to reference their own width rather than their parents' to prevent gaps?
All suggestions are welcome; my apologies for the unpolished code.

Answer 1

Parent element expansion:
The reason that your parent elements are expanding is because you are are not using absolute positioning on your child menus and the parent width is adjusting accordingly to the wider child elements. You will need to add position:relative; to div.nav > ul > li li and position: absolute; to div.nav > ul ul ul to remove your child menus from the flow so they don't widen your parent elements.
Sub Menu Alignment and Gap Elimination:
Sub Menus on right side of dropdown:
div.nav > ul ul ul {
left: 100%; /* All the way to the right of parent */
position: absolute;
}
Sub menus on left side of dropdown:
div.nav > ul ul ul {
left: auto; /* reset */
position: absolute;
right: 100%; /* All the way to the leftt of parent */
}
Sub Menu Vertical Alignment:
I also changed the top position on your sub menus to adjust the alignments for the 1px border and the 4px top margin on your ULs.
div.nav > ul ul {
top: -5px; / * corrects sub menu top alignment */
}
Take a look at the snippet below. It is set up with menus on the right side of the dropdown.
/* ===============----------- 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>Home
</li><li>Tech
<ul>
<li>Subject 1</li>
<li>Subject 2
<ul>
<li>An Item</li>
<li>Some Other Item</li>
<li>And Yet Another!</li>
<li>I Am Running Out of Ideas
<ul>
<li>Even More To Show Expansion</li>
<li>And More</li>
<li>And More!</li>
</ul>
</li>
<li>One Last Item</li>
</ul>
</li>
<li>Subject 3</li>
<li>Subject 4</li>
</ul>
</li><li>Personal
<ul>
<li>Subject 1
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>5555</li>
</ul>
</li>
<li>Subject 2</li>
<li>Subject 3</li>
</ul>
</li><li>Software
<ul>
<li>Subject 1</li>
<li>Subject 2</li>
<li>Subject 3</li>
</ul>
</li><li>Contact
<ul>
<li>Subject 1</li>
<li>Subject 2</li>
<li>Subject 3</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>