Pain Posted October 18, 2011 Share Posted October 18, 2011 Hello folks. I have made a navigation bar, but it goes vertically. I need it to be horizontal. <html> <head> </head> <link rel="stylesheet" href="dropdown.css" type="text/css" /> <script type="text/javascript" src="dropdown.js"></script> <dl class="dropdown"> <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Members Section</dt> <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)"> <ul> <li><a href="#" class="underline">Login</a></li> <li><a href="#" class="underline">Register</a></li> <li><a href="#" class="underline">About Project</a></li> <li><a href="#" class="underline">Contacts</a></li> </ul> </dd> </dl> <dl class="dropdown"> <dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Jams Sections</dt> <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)"> <ul> <li><a href="#" class="underline">Jams</a></li> <li><a href="#" class="underline">Advanced Jams</a></li> <li><a href="#" class="underline">Gallery</a></li> <li><a href="#" class="underline">Leave Feedback</a></li> </ul> </dd> </dl> <div style="clear:both" /> </html> body {margin:25px; font:12px Verdana, Arial, Helvetica} * {padding:0; margin:0} .dropdown {float:left; padding-right:5px} .dropdown dt {width:188px; border:1px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background-color:6dcfee} .dropdown dt:hover {background:color: ffffff} .dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; z-index:200; opacity:0} .dropdown ul {width:204px; border:1px solid #000000; list-style:none; border-top:none} .dropdown li {display:inline} .dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px} .dropdown a:hover {background:#6dcfee; color:#000} .dropdown .underline {border-bottom:1px solid #b9d6dc} Can anyone please help me. Thank you! Quote Link to comment Share on other sites More sharing options...
Frank P Posted October 24, 2011 Share Posted October 24, 2011 See the last tutorial on my signature page. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.