PDA

View Full Version : ideas to improve my nav bar


cocoonfx
04-22-2010, 01:52 PM
Hi Chaps


I am having creative block and can not think at this stage on how to make drop downs on the following nav bar. So for where I have Hotel & Hostels I want to show a list of countrys (which will be in a mysql db). Anyone could point me in the direction of a good tut or suggest something.... Normally I spend some time on this but I have man flu and need urgent assistance :o)



<div class="menu">
<ul>
<li><a href="index.html (http://www.dreamweaverclub.com/forum/view-source:http://www.test-cocoonfxmedia.co.uk/goss/index.html)" class="active"><span>Home Page </span></a></li>
<li><a href="test.html (http://www.dreamweaverclub.com/forum/view-source:http://www.test-cocoonfxmedia.co.uk/goss/test.html)"><span>Holiday Deals</span></a></li>
<li><a href="portfolio.html (http://www.dreamweaverclub.com/forum/view-source:http://www.test-cocoonfxmedia.co.uk/goss/portfolio.html)"><span>Hotel & Hostels</span></a></li>
<li><a href="about.html (http://www.dreamweaverclub.com/forum/view-source:http://www.test-cocoonfxmedia.co.uk/goss/about.html)"><span> Travel Guide </span></a></li>
<li><a href=""><span> Plan Your Trip</span></a></li>
<li><a href="contact.html (http://www.dreamweaverclub.com/forum/view-source:http://www.test-cocoonfxmedia.co.uk/goss/contact.html)"><span> Contact Us</span></a></li>
</ul>

/* menu */
.menu { padding:1px 0 0 0; margin:0; width:600px; float:left; }
.menu ul { text-align: left; padding:0; margin:0; list-style:none; border:0; float:left; }
.menu ul li { float:left; margin:0; padding:0; border:0; }
.menu ul li a { float:left; margin:0; padding:12px 0; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none; }
.menu ul li a span { padding:12px 9px; background:none; }
.menu ul li a:hover { background: url(images/r_menu.gif) no-repeat right; }
.menu ul li a:hover span { background:url(images/l_menu.gif) no-repeat left; }
.menu ul li a.active { background:url(images/r_menu.gif) no-repeat right; }
.menu ul li a.active span { background:url(images/l_menu.gif) no-repeat left; }


</div>

edbr
04-23-2010, 02:37 AM
in basic terms you need a second ul and li set for your drop downs , sett a different class and use absolute positioning for it to show them on hover.
if in doubt check cssplay.co.uk many menu examples there to blow you mind

cocoonfx
04-23-2010, 10:03 AM
Cheers Edbr


Will look at this thank you again.