CSS horizontal flyout menu, dropdown list items show differently in each dropdown
I used the adx menu css code from here: http://aplus.rs/adxmenu/ for my top navigation on this page:
http://www.centerpointpilates.com/redesign/index.html
Three of the links lead to drop downs (Studios, Getting Started, Class Schedule). They are each set up exacly the same, yet you will see they each appear differently. Studios is the only one where the drop downs display in a column as wanted, yet even in this one the 2nd item is slightly less wide than the first.
Any ideas on why they are showing differently and how to fix this? The aplus website troubleshooting page doesn't list this as an issue.
http://www.centerpointpilates.com/redesign/index.html
Three of the links lead to drop downs (Studios, Getting Started, Class Schedule). They are each set up exacly the same, yet you will see they each appear differently. Studios is the only one where the drop downs display in a column as wanted, yet even in this one the 2nd item is slightly less wide than the first.
Any ideas on why they are showing differently and how to fix this? The aplus website troubleshooting page doesn't list this as an issue.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<link rel="shortcut icon" href="" />
<!--<link rel="stylesheet" type="text/css" href="centerpointstyle.css" /> -->
<title>CENTERPOINT PILATES :: a Santa Barbara pilates studio</title>
<style type="text/css" media="screen, tv, projection">
/* Normalizes margins, padding */
body, div, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, blockquote, th, td {
margin: 0;
padding: 0;
}
/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
/* Removes Styles from lists */
ol {
list-style: none;
list-style-position: none;
list-style-image: none;
}
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
/* Removes list-style from lists */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Removes border from fieldset and img */
fieldset, img {
border: 0;
}
/* Left-aligns text in caption and th */
caption, th {
text-align: left;
}
/* Removes quotation marks form q */
q:before, q:after {
content: '';
}
/*<![CDATA[*/
/* - - - ADxMenu: BASIC styles [ MANDATORY ] - - - */
/* remove all list stylings */
.menu, .menu ul {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
font-family: Calibri, "Trebuchet MS", sans-serif;
font-size: 13px;
}
.menu li {
margin: 0;
padding: 0;
border: 0;
display: block;
float: left; /* move all main list items into one row, by floating them */
position: relative; /* position each LI, thus creating potential IE.win overlap problem */
z-index: 5; /* thus we need to apply explicit z-index here... */
}
.menu li:hover {
z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */
white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}
.menu li li {
float: none;/* items of the nested menus are kept on separate lines */
}
.menu ul {
visibility: hidden; /* initially hide all submenus. */
position: absolute;
z-index: 10;
left: 0; /* while hidden, always keep them at the top left corner, */
top: 0; /* to avoid scrollbars as much as possible */
}
.menu li:hover>ul {
visibility: visible; /* display submenu them on hover */
top: 100%; /* 1st level go below their parent item */
}
.menu li li:hover>ul { /* 2nd+ levels go on the right side of the parent item */
top: 0;
left: 100%;
}
/* -- float.clear --
force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.menu, .menu ul { /* IE7 float clear: */
min-height: 0;
}
/* -- float.clear.END -- */
/* -- sticky.submenu --
it should not disappear when your mouse moves a bit outside the submenu
YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
if you do it, make sure you 110% know what you do */
.menu ul {
background-image: url(empty.gif); /* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
padding: 10px;
margin: -10px 0 0 -30px;
background: #f00; /* uncomment this if you want to see the "safe" area.
you can also use to adjust the safe area to your requirement */
}
/*.menu ul ul {padding: 30px 30px 30px 10px;margin: -30px 0 0 -10px;}*/
/* -- sticky.submenu.END -- */
/* - - - ADxMenu: DESIGN styles [ OPTIONAL, design your heart out :) ] - - - */
.menu, .menu ul li {
color: #eee;
background: #960b0b;
}
.menu ul {
width: 13em;
}
.menu a {
text-decoration: none;
color: #eee;
padding-left: .7em;
display: block;
position: relative;
}
.menu a:hover, .menu li:hover>a {
color: #fc3;
}
.menu li li { /* create borders around each item */
border: 1px solid #ccc;
}
.menu ul>li + li { /* and remove the top border on all but first item in the list */
border-top: 0;
}
.menu li li:hover>ul { /* inset 2nd+ submenus, to show off overlapping */
top: 5px;
left: 90%;
}
/* special colouring for "Main menu:", and for "xx submenu" items in ADxMenu
placed here to clarify the terminology I use when referencing submenus in posts */
/*.menu>li:first-child>a, .menu li + li + li li:first-child>a {color: #567;}*/
body {
background-color: #507386;
font-family: Calibri, "Trebuchet MS", sans-serif;
/*font-family: Arial, Helvetica, sans-serif;*/
font-size: 13px;
color: #295D79;
}
.allcontent {
width: 750px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
border-style: double;
border-width: 2px double;
border-color: #507386;
margin-top: 10px;
background-color: #f6eec2;
background-image: url(bg.jpg);
background-repeat: no-repeat;
height: 105%;
}
#navWrapper {
background-color: #960b0b;
height: 35px;
margin-top: 94px;
margin-left: 3px;
margin-right: 3px;
border-style:solid;
border-width:2px;
border-color: #93abb8;
}
#navigation li {
float: left;
list-style: none;
padding-top: 9px;
}
#navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
color: #ffffff;
padding-left: 5px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 19px;
color: #960B0B;
}
#textWrapper {
height: 100%;
margin-top: 25px;
margin-left: 20px;
margin-right: 20px;
}
#textWrapper ul {
list-style: bullet;
list-style-position: inside;
/*list-style-image: none;*/
}
#textWrapper li {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #295D79;
font-weight: bold;
}
.align-right { float:right; margin: 0 0 15px 15px; }
.align-left { float:left; margin: 0 15px 15px 0; }
/* Fix for IE5/Mac \*//*/
.menu a {
float: left;
}
/* End Fix */
/*]]>*/
</style>
<!--[if lte IE 6]>
<style type="text/css" media="screen, tv, projection">
/*<![CDATA[*/
/* - - - ADxMenu: IE6 BASIC styles [MANDATORY] - - - */
/*
this rules improves accessibility - if Javascript is disabled, the entire menu will be visible
of course, that means that it might require different styling then.
in which case you can use adxie class - see: aplus.co.yu/adxmenu/examples/ie6-double-style/
*/
.menu ul {
visibility: visible;
position: static;
}
.menu, .menu ul { /* float.clear */
zoom: 1;
}
.menu li.adxmhover {
z-index: 10000;
}
.menu .adxmhoverUL { /* li:hover>ul selector */
visibility: visible;
}
.menu .adxmhoverUL { /* 1st-level submenu go below their parent item */
top: 100%;
left: 0;
}
.menu .adxmhoverUL .adxmhoverUL { /* 2nd+ levels go on the right side of the parent item */
top: 0;
left: 100%;
}
/* - - - ADxMenu: DESIGN styles - - - */
.menu ul a { /* fix clickability-area problem */
zoom: 1;
}
.menu li li { /* fix white gap problem */
float: left;
width: 100%;
}
.menu li li { /* prevent double-line between items */
margin-top: -1px;
}
.menu a:hover, .menu .adxmhoverA { /* li:hover>a selector */
color: #fc3;
}
.menu .adxmhoverUL .adxmhoverUL { /* inset 2nd+ submenus, to show off overlapping */
top: 5px;
left: 90%;
}
/*]]>*/
</style>
<script type="text/javascript" src="ADxMenu.js"></script>
<![endif]-->
</head>
<body>
<div class="allcontent">
<div id="navWrapper">
<div id="navigation">
<ul class="adxm menu">
<li><a href="index.html" title="Welcome to CenterPoint Pilates">Welcome</a></li>
<li><a href="index.html">Studios</a>
<ul>
<li><a href="index.html">Studio 1: Equipment Studio</a></li>
<li><a href="index.html">Studio 2: Movement Studio</a></li>
</ul>
</li>
<li><a href="index.html">Getting Started</a>
<ul>
<li><a href="index.html">Overview</a></li>
<li><a href="index.html">Instructions</a></li>
<li><a href="index.html">Examples</a></li>
<li><a href="index.html">Troubleshooting</a></li>
</ul>
</li>
<li><a href="index.html">Classes</a></li>
<li><a href="index.html">Class Schedule</a>
<ul>
<li><a href="index.html">Studio 1</a></li>
<li><a href="index.html">Studio 2</a></li>
</ul>
</li>
<li><a href="index.html">New Classes</a></li>
<li><a href="index.html">Pricing</a></li>
<li><a href="index.html">Teachers</a></li>
<li><a href="index.html">Teacher Training</a></li>
<li><a href="index.html">Contact Us</a></li>
</ul> </div><!-- end navigation -->
</div><!-- end navWrapper -->
<div id="textWrapper">
<img src="pilatesImageColored.jpg" class="align-left">
<h2>Vision Statement</h2>
<p>CenterPoint Pilates is dedicated to excellence. We inspire growth and change, promote physical movement education and dedicate ourselves to the success of each client. We believe in continuing education and teach with respect, integrity and safety.</p>
<h2>Welcome</h2>
<p>The studio was founded in 2001 with the goal of inspiring every individual on a program of exercising the body, mind and spirit. Our certified teachers provide exceptional guidance in private, group and class settings. Located downtown between the historic Arlington and Granada theatres, CenterPoint has two studios boasting stunning views of the Santa Ynez Mountains and downtown Santa Barbara. With its two airy and loft-like studios, both with high ceilings, abundant space and natural light, the second floor studio at 1 W. Victoria is equipped with classic and contemporary equipment and serves our private, semi-private and group equipment classes while the ground level studio at 1233 State Street serves our group MAT, yoga, dance and dance fitness classes.</p>
<p>The second floor studio has three workout spaces, one large room for group equipment classes and two smaller rooms to accommodate private and semi-private training. The ground floor space is one large open room perfect for group movement classes. You can expect a supportive, non-competitive environment, one that is rich with quality hands on instruction from both our certified and apprentice teachers. CenterPoint is a studio that promotes an overall sense of education, focus, energy and well-being and provides some of the best Pilates classes and workouts around. The studio also has one massage room with therapists specializing in sports massage, deep tissue, cranio-sacral and neck and shoulder injury recovery.
</p>
<h2>The Method</h2>
<p><ul>
<li>Develops long, lean muscles without bulk</li>
<li>Great for dance and sports conditioning</li>
<li>Injury prevention and rehabilitation</li>
<li>Pre-Post Natal fitness ----- breathing techniques, concentration, restoring body shape and muscle tone, posture and trunk strength post delivery</li>
<li>Appropriate for senior citizens ----- improves balance and posture, tones muscles, helps prevent bone deterioration</li>
</ul></p><br /><br />
</div><!-- end textWrapper -->
</div><!-- end allcontent -->
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
The #navigation li float: left; changed this part of the menu CSS below: You also changed the padding-top that was previously defined for the menu elements.
.menu li li {
float: none;/* items of the nested menus are kept on separate lines */
}
ASKER
I tried only commenting out the #navigation li float: left; portion and that solved the problem. I want to keep the top padding... though I am going to experiment and see if I can put it elsewhere then I'll delete the whole #navigation li.
If you have the time I'd love to know why float: left; affected things like it did.
Thank you for your help!