i working on adding drop down menus website (http://www.nbm.org/test/nbm-online-drafts/dropdown-testing.html) gray buttons @ top of page. have working using html , css lists (code below) unable figure out how vertically align text in drop downs.
the alignment right
i have tried insterting divs , adding vertical-align: middle css, no visible changes.
html:
<nav id="main-nav"> <ul id="nav-primary"> <li><a href="http://www.nbm.org/plan-visit/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/planyourvisit.jpg" alt="plan visit" width="109" height="48" title="plan visit"></a> <ul class="subnav"> <li><a href="https://secure2.convio.net/nbm/site/ecommerce?store_id=2041&jservsessionidr004=gkto4vnlz1.app213a">buy tickets</a> </li> <li><a href="http://www.nbm.org/plan-visit/hours_amenities/">hours & admission</a> </li> <li><a href="http://www.nbm.org/plan-visit/accessibility-directions/">accessibility & directions</a> </li> <li><a href="http://www.nbm.org/programs-lectures/tours/">tours</a> </li> </ul> </li> <li><a href="http://www.nbm.org/exhibitions-collections/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/exhibitionscollections.jpg" alt="exhibitions / collections" width="109" height="48" title="exhibitions / collections"></a> <ul class="subnav"> <li><a href="http://www.nbm.org/exhibitions-collections/current-exhibitions.html">current exhibitions</a> </li> <li><a href="http://www.nbm.org/exhibitions-collections/upcoming-exhibitions.html">upcoming exhibitions</a> </li> <li><a href="https://secure2.convio.net/nbm/site/ecommerce?store_id=2041&jservsessionidr004=gkto4vnlz1.app213a">buy tickets</a> </li> <li><a href="http://www.nbm.org/exhibitions-collections/collections/">collections</a> </li> </ul> </li> <li><a href="http://www.nbm.org/programs-lectures/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/adultprogs.jpg" alt="adult programs" width="109" height="48" title="adult programs"></a> <ul class="subnav"> <li><a href="http://go.nbm.org/site/calendar/1810746008?view=monthgrid&day">upcoming programs</a> </li> <li><a href="http://www.nbm.org/about-us/multimedia/">watch / listen</a> </li> <li><a href="http://www.nbm.org/programs-lectures/continuing-education-credits.html">continuing education credits</a> </li> </ul> </li> <li><a href="http://www.nbm.org/families-kids/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/familiesteens.jpg" alt="families / teens" width="109" height="48" title="families / teens"></a> <ul class="subnav"> <li><a href="http://www.nbm.org/families-kids/festivals/">festivals</a> </li> <li><a href="http://www.nbm.org/families-kids/everyday-activities/">everyday activities</a> </li> <li><a href="http://www.nbm.org/families-kids/teens-young-adults/">teens & young adults</a> </li> <li><a href="http://www.nbm.org/families-kids/summer-camp.html">summer camp</a> </li> <li><a href="http://www.nbm.org/families-kids/scouts-and-youth-groups/">scouts & youth groups</a> </li> <li><a href="http://www.nbm.org/families-kids/birthday-parties/">birthday parties</a> </li> </ul> </li> <li><a href="http://www.nbm.org/schools-educators/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/schoolseducators.jpg" alt="schools / educators" width="109" height="48" title="schools / educators"></a> <ul class="subnav"> <li><a href="http://www.nbm.org/schools-educators/educators/">for educators</a> </li> <li><a href="http://www.nbm.org/families-kids/teens-young-adults/">for teens & young adults</a> </li> <li><a href="http://www.nbm.org/schools-educators/school-visit/">plan school visit</a> </li> </ul> </li> <li><a href="http://www.nbm.org/support-us/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/joindonate.jpg" alt="join / donate" width="109" height="48" title="join / donate"></a> <ul class="subnav"> <li><a href="https://secure2.convio.net/nbm/site/donation2?df_id=2420&2420.donation=form1&jservsessionidr004=gkto4vnlz1.app213a">donate now</a> </li> <li><a href="http://www.nbm.org/support-us/membership/">membership</a> </li> <li><a href="http://www.nbm.org/support-us/sponsorships/">corporate giving</a> </li> <li><a href="http://www.nbm.org/support-us/awards_honors/">awards & honors</a> </li> <li><a href="http://www.nbm.org/support-us/volunteer/">volunteer</a> </li> </ul> </li> <li><a href="https://secure2.convio.net/nbm/site/ecommerce?store_id=1161"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/shop.jpg" alt="shop" width="109" height="48" title="shop"></a> <ul class="subnav"> <li><a href="https://secure2.convio.net/nbm/site/ecommerce?store_id=1161&view_default=true&folder=1035&type=&name=">book shop</a> </li> <li><a href="https://secure2.convio.net/nbm/site/ecommerce?store_id=1161&view_default=true&folder=1036&type=&name=">home shop</a> </li> <li><a href="https://secure2.convio.net/nbm/site/ecommerce?store_id=1161&view_default=true&folder=1033&type=&name=">toy shop</a> </li> <li><a href="https://secure2.convio.net/nbm/site/ecommerce?store_id=1161&view_default=true&folder=1034&type=&name=">museum shop</a> </li> <li><a href="https://secure2.convio.net/nbm/site/ecommerce?store_id=1161&view_default=true&folder=2060&type=&name=">stationery shop</a> </li> <li><a href="https://secure2.convio.net/nbm/site/ecommerce?store_id=1161&view_default=true&folder=1040&type=&name=">fashion shop</a> </li> <li><a href="https://secure2.convio.net/nbm/site/ecommerce?store_id=1161&view_default=true&folder=2070&type=&name=">design shop</a> </li> </ul> </li> <li><a href="http://www.nbm.org/about-us/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/aboutus.jpg" alt="about us" width="109" height="48" title="about us"></a> <ul class="subnav"> <li><a href="http://www.nbm.org/about-us/about-the-museum/">about museum</a> </li> <li><a href="http://www.nbm.org/about-us/national-building-museum-online/">e-newsletters</a> </li> <li><a href="http://www.nbm.org/about-us/press-room/">press room</a> </li> <li><a href="http://www.nbm.org/about-us/management-staff/">staff & governance</a> </li> <li><a href="http://www.nbm.org/about-us/employment_internships/">employment & internships</a> </li> </ul> </li> </ul> </nav> <!--end primary navigation--> and css:
#main-nav { background: none repeat scroll 0 0 white; height: 53px; left: -3px; position: relative; top: 128px; width: 100%; } #main-nav .subnav { background: none repeat scroll 0 0 #d7d6d4; border: 0 solid #d4d5d6; display: none; left: 13px; list-style-type: none; margin: 0; padding: 0; position: absolute; top: 59px; width: 109px; z-index: 5; } #main-nav .subnav li { border-bottom: 1px solid #eeeeee; display: block; margin: 0; border-left: 1px solid #eeeeee; border-right: 1px solid #eeeeee; } #main-nav .subnav li { color: #000000; font-size: 11px; height: 18px; padding: 6px 5px 19px; } #main-nav .subnav li a:hover { background: none repeat scroll 0 0 #bfbeba; } #nav-primary { float: left; list-style-type: none; margin: -10px; padding: 0; } #nav-primary li { float: left; position: relative; } #nav-primary li { color: #000000; float: left; font-size: 13px; font-weight: bold; height: 48px; line-height: 16px; padding-left: 13px; padding-top: 10px; text-align: center; text-decoration: none; width: 100px; } #nav-primary li a:hover { text-decoration: none; } #nav-primary li:hover .subnav { display: block; }
you try adding attribute below (in html) each element want add padding (adjusting pixel value own preference):
style="padding-top:100px" as can see in fiddle: http://jsfiddle.net/zejrn/4/. added line above 'buy tickets' under 'plan visit' , every other element goes untouched
Comments
Post a Comment