Jump to content

lora

Members
  • Content Count

    2
  • Joined

  • Last visited

Community Reputation

0 Neutral

About lora

  • Rank
    Newbie
  1. I have a working drop down menu almost perfectly styled. It functions however I want the submenus to appear in column rows not straight down. Here is my current HTML and CSS. Thanks in advance! <div id="navbar"> <ul id="dropdown"> <li class="topnav"><a href="#">Item One</a> <ul> <div class="column"> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">3rd Subitem</a></li> </div> <div class="column"> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">3rd Subitem</a></li> </div> <div class="column"> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">3rd Subitem</a></li> </div> </ul> </li> </ul></div> #navbar { width: 100%; border-bottom: 1px solid #ccc; padding: 10 10 10 10; }#dropdown { width: 960px; margin: 0 auto; padding: 0; height: 1em; text-transform: uppercase; text-align: center; font-weight: bold; }#dropdown li { list-style: none; float: left; }#dropdown li a { display: block; padding: 3px 8px; text-decoration: none; }#dropdown li ul { display: none; width: 10em; /* Width to help Opera out */ background-color: #fff; } #dropdown li:hover ul, #navbar li.hover ul { display: block; position: absolute; margin: 0; padding: 0; border-bottom: 1px solid #ccc; }#dropdown li:hover li, #navbar li.hover li { float: none; }#dropdown li:hover li a, #navbar li.hover li a { background-color: #fff; color: #000; }.topnav a { color: #000; text-decoration: none; }.topnav a:hover { border-bottom: 1px solid gold; }.column {list-style-type: none;float: right;margin: 5px 0 0 0;padding: 0 5px 0 0;width:180px; }.column a { color: #999; text-decoration: none; font-size: .7em; }.column a:hover { border-bottom: 0px; }
  2. I'm using the CSS below to turn a list of links into columns for the footer: [font='Helvetica Neue', Arial, Verdana, sans-serif]#footernav {[/font]width: 90%;padding: 20 20 20 20;}.footernavee ul {list-style-type: none;float: right;margin: 10px 0 0 0;padding: 0 10px 0 0;width:240px;}.footernavee {color: #999;text-align: right;text-transform: uppercase;}.footernavee a {color: #999;text-transform: uppercase;text-decoration: none;font-size: .7em;} It's working but the columns appear oddly staggered. How can I align the columns vertically to the top of the div they are in? Thanks in advance!
×
×
  • Create New...