Jump to content

Search the Community

Showing results for tags 'menu css rollover dropdown'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 1 result

  1. I was wondering if anyone out there can tell me a better way to replicate the main menu on the site www.sklz.com. Its a basic dropdown menu but the dropdown section is full width (instead of being under the menu item itself). Im assuming that the menu on this site is JavaScript driven but I was hoping to make it purely from CSS. I am open to doing a JS or JQuery based one if there is an easy solution but as mention, would prefer CSS. Ive played around and come up with the below CSS based solution but I'm not sure its the best way to do it... CSS ------------ body { margin:0px; padding:0px; text-align:center; } .dropdown { position: relative; display:block; cursor:pointer; width:25%; float:left; } .dropdownText { text-decoration:none; padding:20px 0px; background-color:#000; color:#fff; position: relative; z-index:20; margin:0px 0px 0px 0px; } .dropdown-content { display: block; position:fixed; left:0; background-color: #f9f9f9; width:100%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 10; margin:-200px 0px 0px 0px; transition:all ease-out 1s; } .dropdown:hover .dropdown-content { display: block; margin:0px 0px 0px 0px; } HTML ------------------ <div style="width:100%; z-index:5; position:relative;"> <div class="dropdown"> <div class="dropdownText">Mouse over me 1</div> <div class="dropdown-content"> <div style="float:left; width:32%"> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> </div> <div style="float:left; width:32%"> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> </div> <div style="float:left; width:32%"> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> </div> </div> </div> <div class="dropdown"> <div class="dropdownText">Mouse over me 2</div> <div class="dropdown-content"> <div style="float:left; width:49%"> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> </div> <div style="float:left; width:49%"> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> </div> </div> </div> <div class="dropdown"> <div class="dropdownText">Mouse over me 3</div> <div class="dropdown-content"> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> </div> </div> <div class="dropdown"> <div class="dropdownText">Mouse over me 4</div> <div class="dropdown-content"> <p><a href="#">Product link 1</a></p> </div> </div> <div style="clear:both;"></div> </div>
×
×
  • Create New...