Retain space before, after for nested, hidden, vertical menu items "li > ul"

HTML & CSS
1

Can someone help me solve issues with nested, hidden, vertical menu items “li ul”. The margin bottom works fine for top level only (<li>'s) yet when I try to create nested li’s they are not spacing properly, I do understand why, could someone point out a better way and where I am going wrong, the layout should space the nested li’s 5px for the second tier li’s also.

BTW, while I have you here, I have been able to remove the indentation for the unordered list and it appears to work fine in all browsers using “em’s”, is this the most precise method?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="mind,body,spirit,depression,gout,meditation,bioenergy" />
<meta name="description" content="A website dedicated to examining the holistic healing of the mind, body, spirit, connection." />
<title>The Wisdom of the Mind Body Spirit Connection</title>
<style type="text/css">
.menu {
	width: 180px;
	background-color: #C0C0C0;
}
.menu ul {
	font-size:12px;
 	margin-left:-3.3em;
 	width: 180px;
 }

.menu li {
  	list-style-type: none;
  	border-top: 1px white solid;
  	border-bottom: 1px white solid;
  	padding-top:3px;
  	padding-bottom:3px;
  	width: 179px;
  	background-color: purple;
  	text-align: center;
  	margin-bottom:5px;
  	-webkit-box-shadow: 0 8px 6px -6px black;
	-moz-box-shadow: 0 8px 6px -6px black;
	box-shadow: 0 8px 6px -6px black; /* For IE 8 */;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')"; /* For IE 5.5 - 7 */;
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');


}
.menu a {
  	color: gray;
  	text-decoration: none;
  	display: block;
}
.menu a:hover {
	color: white;
	background-color: #3366CC;
}
.menu li ul {
  	display: none;
  	
}
.menu li:hover > ul {
  	display: block;
 	 margin-left:-3.3em;
}
 .menu a {
      color: #C46805;
      text-decoration: none;
      display: block;
    }
.menu a:hover {
	color:#F98A12;
  background-color: #530CB4;
}
.menu li ul {
      display: none;
    }
.menu li:hover > ul {
      display: block;
      padding-top:3px;
  padding-bottom:3px;
}
</style>
</head>

<body>
<div class="menu"><ul>
      	
      	<li>
      	<a href = "#">Menu 1</a>
      	<ul>
      			
      			<li>
      			<a href = "#">Sub Menu 1</a>
      			</li>
      			</ul>
      			</li>
        <li><a href = "#">Menu 2</a>
		<ul>
      			<li>
      			<a href = "#">Sub Menu 2</a>
      			</li>
      			</ul>
      			</li>

        <li><a href = "#">Menu 3</a>
        <ul>
      			<li>
      			<a href = "#">Sub Menu 3</a>
      			</li>
      			
      			
      			</ul>
</div>
</body>

</html>
2

Hi,

What are you trying to do here exactly?

The submenu opens and pushes the rest of the menu down making it very difficult to navigate. Is that the effect you were trying for?

Usually the submenu would open to the side and be out of the flow and not impact on the rest of the menu. It seems like you are trying an accordion type menu but they are not very usable on hover. The bottom margin on the nested list would be reached via .menu li li{margin-bottom:25px} but you would do better to target the nested ul otherwise each nested list item also gets the margin. However, I;m not really sure how you want this to look so I need some clarification :slight_smile:

You don’t need negative ems on the ul you just need to set the padding and margin of the ul to zero. Some browsers use a default left margin and some use a default left padding for the bullet space so you must set both to zero.

3

Hi Paul, you are right, I was looking for an accordion type menu, I will take your advice for usability and build a menu system that is outside the flow of the first level tags. BTW, thanks for clarifying the negative em’s.

4

No worries, just shout if you need help. You can still use your existing menu but make the nested ul position:absolute so that is removed from the flow. Hide it offscreen with a large negative left margin and bring it back with a suitable margin to stay at the right of the current menu (don’t hide with display:none/block as that is bad for accessibility).