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! Link to comment https://forums.phpfreaks.com/topic/249345-vertical-navigation-bar/ 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. Link to comment https://forums.phpfreaks.com/topic/249345-vertical-navigation-bar/#findComment-1281819 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.