Sorry if this is really elementary, but I’ve got a typepad blog on which there is a horizontal nav menu. A few of the submenu items have really long names (not changeable per client) – luckily they are all in one “section”. Since the width style applies to all of the submenus, just widening the submenu is problematic for the template – and looks funky too.
I’m hoping there is there a way to take one submenu (in this case the second one named “Training Modules”)and apply a style to it alone – but i’m stumped as to what is going to override what. If that doesn’t work, is there a way to allow the height to increase only on items that may require 2 lines of space? The submenus are custom HTML and are not generally editable through the typepad UI.
I’m still learning css and really could use some help.
Thank you!!
Here is my menu http://jsfiddle.net/RpXd8/
<style type="text/css">
/* Derived from http://www.devinrolsen.com/pure-css-horizontal-menu/ */
#pagebody { position: inherit !important; width: 831px; } /* DO NOT EDIT */
#pagebody-inner { position: inherit !important; width: 100%; } /* DO NOT EDIT */
#alpha, #beta, #gamma, #delta {
display: none; /* DO NOT EDIT */
position: inherit !important; /* DO NOT EDIT */
float: left; /* DO NOT EDIT */
min-height: 1px; /* DO NOT EDIT */}
#centernav {width: 831px; /* if you want your nav centered, set this to the width of your container, if you don't want it centered, change this number to 100% */}
#dropnav
{height:40px; background:#d2d3d5;}
/* Changes the height and bg color of the main menu */
#dropnav ul
{margin:0px; padding:0px;}
#dropnav ul li
{display:inline; float:left; list-style:none; margin-left:0px; position:relative;
height: 15px;
padding: 10px 20px 15px 19px;
font-size: 14px;
valign: middle;
text-align: left;
text-decoration: none;
border-right: 1px solid #FFFFFF;
z-index: 99999}
/* only edit the last 2 items - sets the characteristics of the main menu */
#dropnav li a
{color:#000000; text-decoration:none;} /* Changes the link color of items on the main menu */
#dropnav li a:hover
{color:#900; text-decoration:none;}/* Changes the hover color of items on the main menu */
#dropnav li ul
{margin:0px; padding:0px; display:none; position:absolute; left:0px; z-index: 99999; top:40px; background-color:#d2d3d5;} /* Only edit the last 2 items - set the top margin and background color of the submenus */
#dropnav li:hover ul
{display:block;
padding: 0px;
width: 220px;
}/*sets the width of the submenus */
#dropnav li li
{list-style:none;
display:list-item;
border-right: 0 solid #000000;
border-bottom: 1px dotted #FFFFFF;
width: 220px;
padding: 5px 0 5px 20px;} /* DO NOT EDIT */
#dropnav li li a
{color:#000; text-decoration:none;} /* Changes the link color of items in the submenu */
#dropnav li li a:hover
{color:#900; text-decoration:none;} /* Changes the hover color of items in the submenu*/
li#main {padding-top: 6px;} /* Sets the padding of items in the main menu */
</style>
<div id="centernav">
<div id="dropnav">
<ul>
<li id="main">
<a href="#">Home</a>
<ul id="subnav">
<li><a href="#">About this site</a></li>
</ul>
</li>
<li id="main">
<a href="#">Training Modules</a>
<ul id="subnav">
<li><a href="#">Overview</a></li>
<li><a href="#">Technical Data Sheets</a></li>
<li><a href="#">Reference Documents</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Introduction to Modules</a></li>
<li><a href="#">1: Title</a></li>
<li><a href="#">2: Really really really really really really really long title</a></li>
<li><a href="#">3: </a></li>
<li><a href="#">4: </a></li>
<li><a href="#">5: </a></li>
<li><a href="#">6: </a></li>
<li><a href="#">7: </a></li>
<li><a href="#">8: Really really really long title</a></li>
<li><a href="#">9: </a></li>
<li><a href="#">10: </a></li>
<li><a href="#">11: Really really really really really long title</a></li>
<li><a href="#">12:</a></li>
<li><a href="#">13:</a></li>
<li><a href="#">14:</a></li>
<li><a href="#">15:</a></li>
<li><a href="#">16:</a></li>
<li><a href="#">17:</a></li>
<li><a href="#">18:</a></li>
<li><a href="#">19:</a></li>
</ul>
</li>
<li id="main">
<a href="#">Scientific Publications</a>
<ul id="subnav">
<li><a href="#">P</a></li>
<li><a href="#">P</a></li>
<li><a href="#">R</a></li>
<li><a href="#">C</a></li>
</ul>
</li>
<li id="main">
<a href="#">Marketing</a>
<ul id="subnav">
<li><a href="#">Brand Blueprint</a></li>
<li><a href="#">Print-ready Files</a></li>
<li><a href="#">Logos Photos</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Other Sales Tools</a></li>
<li><a href="#">Webstore</a></li>
<li><a href="#">Request for Files</a></li>
<li><a href="#">Translations</a></li>
</ul>
</li>
<li id="main">
<a href="#">eNews</a>
</li>
<li id="main">
<a href="#">Attend Training</a>
<ul id="subnav">
<li><a href="#">Training Calendar</a></li>
<li><a href="#">RSVP for Training</a></li>
<li><a href="#">Typical Agenda</a></li>
<li><a href="#">Request Training</a></li>
</ul> </li>
<li id="main">
<a href="#">Contact us</a>
</li></ul>
</div>
This change will affect the whole menu, but here is the easiest way to do this. If you look at the styles for your list items,
You are declaring a height for all list items. Meaning the ones that extend to two lines, will wrap, and the container won’t expand. In order to remedy, the situation, simply remove the height declaration. It will change a little bit, to look like this.
Here it is in JS Fiddle (with CSS separated) so you can see how it looks.
http://jsfiddle.net/RpXd8/1/