Help - Search - Members - Calendar
Full Version: Need a dropdown box thing
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
wwwww
Not those crappy things with an arrow, I need something similar to the navigation at the top of CB. I see that CB somehow uses lists, but that doesn't help me too much.
synapse
it does infact use lists, with css to make them dropdown lists. Alternatively, you can use javascript to do the same exact thing. The basic code of this is:

CODE
<ul id='nav2'>
    <li ><a href='http://www.createblog.com/layouts/'>Layouts</a>
        <ul>
        <li class='top'><a href='http://www.createblog.com/layouts/index.php?layout=myspace-layouts'>Myspace Layouts</a></li>
        </ul>
</ul>


CODE
#nav2, #nav2 ul { list-style:none; margin:0px; padding:0px; }

#nav2 a { display:block; width:75px; line-height:40px; }
#nav2 a:link, #nav2 a:visited, #nav2 a:active { color:#B8C9DD; text-decoration:none; }
#nav2 a:hover { color:#D6DEE6; }
#current a:link, #current a:visited, #current a:active { color:#ffffff; }
#current a:hover { color:#eeeeff; }
#nav2 li:hover ul, #nav2 li.over ul { left:0px; top:40px; }
#nav2 li:hover ul#rightdrop, #nav2 li.over ul#rightdrop { left:-61px; top:40px; }

#nav2 li { position:relative; float:left; display:block; width:75px; text-align:center; border-right:1px solid #32547b; background-color:#476588; font-family:Arial; font-size:12px; font-weight:bold; }
#nav2 li#current { background-color:#5a7594; }
#nav2 li#search { background-color:#5a7594; width:161px; height:40px; }
#nav2 li#search input { padding:1px; vertical-align:middle; margin-top:9px; }
#nav2 li.submit { background-color:#5a7594; border:0px; width:76px; }

#nav2 li ul { position:absolute; width:75px; left:-999em; }
#nav2 li ul li { font-family:Verdana; width:125px; text-transform:none; text-align:left; font-weight:normal; font-size:9px; background-color:#5a7594; padding:0px 6px; border:0px; border-bottom:1px solid #32547b; }
#nav2 li ul li a { width:125px; line-height:24px; }
#nav2 li ul li.top { border-top:1px solid #fff; }


This is the boxed type, u can remove the borders in the css part, and voila, same thing.
wwwww
Works perfectly, thanks.

Now time for customization :science:
Mickey
Topic closed and moved.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.