Hi everyone I was wondering if any one can help I am not sure if this should be in the HTML thread ut suspect its more of a CSS issue, please move if required I have created a moving drop-down menu bar which at the moment sits underneath the logo.png banner. The movement runs an image along the top of the logo.png, which is where I would like it to stay, however I would ideally like the menu bar to sit underneath it as if it is part of the logo The drop-down menu was a template from http://www.script-tutorials.com If you require the files you can download them here As you will see there is a image that hovers above the logo image when moving across the menu bar. The objective is to get the menu bar to sit on the logo directly under the moving image. Index2.html [/B][/B][/B][/B] [B][B][B] [/B][/B][/B] [B][B][B] <!DOCTYPE html>[/B][/B][/B] [B][B][B] <html lang="en" >[/B][/B][/B] [B][B][B] <head>[/B][/B][/B] [B][B][B] <meta charset="utf-8" />[/B][/B][/B] [B][B][B] <title>Pure CSS3 LavaLamp Menu | Script Tutorials</title>[/B][/B][/B] [B][B][B] <link href="css/layout.css" rel="stylesheet" type="text/css" />[/B][/B][/B] [B][B][B] <link href="css/menu.css" rel="stylesheet" type="text/css" />[/B][/B][/B] [B][B][B] </head>[/B][/B][/B] [B][B][B] <body>[/B][/B][/B] [B][B][B] [/B][/B][/B] [B][B][B] <header>[/B][/B][/B] [B][B][B] [/B][/B][/B] [B][B][B] <ul id="nav">[/B][/B][/B] [B][B][B] <img src="css/logo.png" alt="logo" width="1000" height="175">[/B][/B][/B] [B][B][B] [/B][/B][/B] [B][B][B] <li><a href="http://torfaenpcrepair.com" target="_blank">Home</a></li>[/B][/B][/B] [B][B][B] <li><a href="http://gallery.torfaenpcrepair.com/#home" target="_blank">Gallery</a>[/B][/B][/B] [B][B][B] <ul class="subs">[/B][/B][/B] [B][B][B] </ul>[/B][/B][/B] [B][B][B] <li><a href="http://blog.torfaenpcrepair.com/" target="_blank">Blog</a></li>[/B][/B][/B] [B][B][B] <li><a href="http://torfaenpcrepair.webs.com/" target="_blank">Our Original Site</a>[/B][/B][/B] [B][B][B] <ul class="subs">[/B][/B][/B] [B][B][B] </ul>[/B][/B][/B] [B][B][B] </li>[/B][/B][/B] [B][B][B] <li><a class="hsubs" href="#">Shortcuts</a>[/B][/B][/B] [B][B][B] <ul class="subs">[/B][/B][/B] [B][B][B] <li><a href="http://torfaenpcrepair.com/XP_Shortcuts.html" target="_blank">XP</a></li>[/B][/B][/B] [B][B][B] <li><a href="http://torfaenpcrepair.com/Vista_Shortcuts.html" target="_blank">Vista</a></li>[/B][/B][/B] [B][B][B] <li><a href="http://torfaenpcrepair.com/Win7_Hotkeys.html" target="_blank">Windows 7</a></li>[/B][/B][/B] [B][B][B] <li><a href="http://torfaenpcrepair.com/Win8_Hotkeys.html" target="_blank">Windows 8</a></li>[/B][/B][/B] [B][B][B] <li><a href="http://torfaenpcrepair.com/Mac_OSx_Shortcuts.html" target="_blank">Mac</a></li>[/B][/B][/B] [B][B][B] <li><a href="http://torfaenpcrepair.com/Photoshop_Shortcuts.html" target="_blank">PhotoShop</a></li>[/B][/B][/B] [B][B][B] <li><a href="http://torfaenpcrepair.com/Dreamweaver_Shortcuts.html" target="_blank">Dreamweaver</a></li>[/B][/B][/B] [B][B][B] <li><a href="http://torfaenpcrepair.com/Brackets_Shortcuts.html" target="_blank">Brackets</a></li>[/B][/B][/B] [B][B][B] </ul>[/B][/B][/B] [B][B][B] </li>[/B][/B][/B] [B][B][B] <li><a href="http://torfaenpcrepair.com/Guestbook.html?_cache=1348799726" target="_blank">Guestbook</a></li>[/B][/B][/B] [B][B][B] <li> <a class="hsubs" href="#">Links</a>[/B][/B][/B] [B][B][B] <ul class="subs">[/B][/B][/B] [B][B][B] <li><a href="http://torfaenpcrepair.com/out-and-about.html" target="_blank">Out and About</a></li>[/B][/B][/B] [B][B][B] <li><a href="http://torfaenpcrepair.com/Services.html" target="_blank">Services</a></li>[/B][/B][/B] [B][B][B] <li><a href="http://torfaenpcrepair.com/links.html" target="_blank">Useful Links</a></li>[/B][/B][/B] [B][B][B] <li><a href="http://torfaenpcrepair.com/contacted.html" target="_blank">Contact Us</a></li>[/B][/B][/B] [B][B][B] </ul>[/B][/B][/B] [B][B][B] </li>[/B][/B][/B] [B][B][B] <div id="lavalamp"></div>[/B][/B][/B] [B][B][B] </ul>[/B][/B][/B] [B][B][B] [/B][/B][/B] [B][B][B] </header>[/B][/B][/B] [B][B][B] [/B][/B][/B] [B][B][B] <h1>Windows 8 Keyboard Shortcuts</h1>[/B][/B][/B] [B][B][B] <table border="">[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <th>Command</th>[/B][/B][/B] [B][B][B] <th>Shortcut</th>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>WIN + Z</td>[/B][/B][/B] [B][B][B] <td>Access Options of Metro Apps</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + Spacebar</td>[/B][/B][/B] [B][B][B] <td>Change the language / keyboard layout</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + Y</td>[/B][/B][/B] [B][B][B] <td>Switches to desktop view</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + Q</td>[/B][/B][/B] [B][B][B] <td>Open Global Search</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>WIN + W</td>[/B][/B][/B] [B][B][B] <td>Search Within System Settings</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>WIN + F</td>[/B][/B][/B] [B][B][B] <td>Search Within Files</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>WIN + O</td>[/B][/B][/B] [B][B][B] <td>Disable screen rotation</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + Print Screen</td>[/B][/B][/B] [B][B][B] <td>Take Screenshot (Saves as PNG in Pictures Library)</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + C</td>[/B][/B][/B] [B][B][B] <td>Open Charms Bar</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + Tab</td>[/B][/B][/B] [B][B][B] <td>Open Switch List</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + I</td>[/B][/B][/B] [B][B][B] <td>Open Settings Menu</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + P</td>[/B][/B][/B] [B][B][B] <td>Open Second Screen/ Projector Settings</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + H</td>[/B][/B][/B] [B][B][B] <td>Go to Share Settings Pane</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + K</td>[/B][/B][/B] [B][B][B] <td>Open Devices Settings Pane</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + X</td>[/B][/B][/B] [B][B][B] <td>Open System Utility Settings Menu</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + T</td>[/B][/B][/B] [B][B][B] <td>Preview Opened Windows in Taskbar</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + U</td>[/B][/B][/B] [B][B][B] <td>Open Ease of Access Center</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + E</td>[/B][/B][/B] [B][B][B] <td>Open Windows Explorer</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + R</td>[/B][/B][/B] [B][B][B] <td>Open Run Dialogue Box</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + Pause</td>[/B][/B][/B] [B][B][B] <td>Open System Properties Window</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + Enter</td>[/B][/B][/B] [B][B][B] <td>Open Windows Narrator</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + Shift + .</td>[/B][/B][/B] [B][B][B] <td>Snap Application to Right Side</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + .</td>[/B][/B][/B] [B][B][B] <td>Snap Application to Left Side</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + ,</td>[/B][/B][/B] [B][B][B] <td>Peek at Desktop (Aero Peek)</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + D</td>[/B][/B][/B] [B][B][B] <td>Go to Desktop</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + M</td>[/B][/B][/B] [B][B][B] <td>Minimize All Applications</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + B</td>[/B][/B][/B] [B][B][B] <td>Go Back to Desktop</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + J</td>[/B][/B][/B] [B][B][B] <td>Switches focus between snapped Metro applications</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + L</td>[/B][/B][/B] [B][B][B] <td>Lock Screen</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Win + Page Up/ Page Down</td>[/B][/B][/B] [B][B][B] <td>Switch Primary & Secondary Monitors</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Ctrl + Mouse Scroll (In Start Screen)</td>[/B][/B][/B] [B][B][B] <td>Tile Zoom Toggle</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Ctrl + Mouse Scroll (In Desktop)</td>[/B][/B][/B] [B][B][B] <td>Change Desktop Icon Size</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] <tr>[/B][/B][/B] [B][B][B] <td>Ctrl + Shift+ N</td>[/B][/B][/B] [B][B][B] <td>Create New Folder in Current Directory</td>[/B][/B][/B] [B][B][B] </tr>[/B][/B][/B] [B][B][B] </table>[/B][/B][/B] [B][B][B] <div>[/B][/B][/B] [B][B][B] </div>[/B][/B][/B] [B][B][B] [/B][/B][/B] [B][B][B] <div class="container"></div>[/B][/B][/B] [B][B][B] <div id="footer">[/B][/B][/B] [B][B][B] <h6><a href="http://jigsaw.w3.org/css-validator/check/referer">[/B][/B][/B] [B][B][B] <img style="border:0;width:88px;height:31px"[/B][/B][/B] [B][B][B] src="http://jigsaw.w3.org/css-validator/images/vcss"[/B][/B][/B] [B][B][B] alt="Valid CSS!" />[/B][/B][/B] [B][B][B] </a> © All Rights Reserved © <a href="http://jigsaw.w3.org/css-validator/check/referer">[/B][/B][/B] [B][B][B] <img style="border:0;width:88px;height:31px"[/B][/B][/B] [B][B][B] src="http://jigsaw.w3.org/css-validator/images/vcss-blue"[/B][/B][/B] [B][B][B] alt="Valid CSS!" />[/B][/B][/B] [B][B][B] </a></h6>[/B][/B][/B] [B][B][B] </div>[/B][/B][/B] [B][B][B] [/B][/B][/B] [B][B][B] </body>[/B][/B][/B] [B][B][B] </html>[/B][/B][/B] [B][B][B][B] Code (markup): menu.css [/B][B]#nav,#nav ul {[/B][/B][/B][/B] [B][B][B][B] list-style: none outside none;[/B][/B][/B][/B] [B][B][B][B] margin: auto;[/B][/B][/B][/B] [B][B][B][B] padding: 0;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#nav {[/B][/B][/B][/B] [B][B][B][B] margin: auto;[/B][/B][/B][/B] [B][B][B][B] background: url('menu_bg.png') no-repeat scroll 0 0 transparent;[/B][/B][/B][/B] [B][B][B][B] clear: both;[/B][/B][/B][/B] [B][B][B][B] font-size: 12px;[/B][/B][/B][/B] [B][B][B][B] height: 58px;[/B][/B][/B][/B] [B][B][B][B] padding: 0 0 0 0;[/B][/B][/B][/B] [B][B][B][B] position: relative;[/B][/B][/B][/B] [B][B][B][B] width: 700px;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#nav ul {[/B][/B][/B][/B] [B][B][B][B] background-color: #222;[/B][/B][/B][/B] [B][B][B][B] border:2px solid #000;[/B][/B][/B][/B] [B][B][B][B] border-radius: 0 5px 5px 5px;[/B][/B][/B][/B] [B][B][B][B] border-width: 0 1px 1px;[/B][/B][/B][/B] [B][B][B][B] box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);[/B][/B][/B][/B] [B][B][B][B] left: -9999px;[/B][/B][/B][/B] [B][B][B][B] overflow: hidden;[/B][/B][/B][/B] [B][B][B][B] position: absolute;[/B][/B][/B][/B] [B][B][B][B] top: -9999px;[/B][/B][/B][/B] [B][B][B][B] z-index: 2;[/B][/B][/B][/B] [B][B][B][B][/B][/B][/B][/B] [B][B][B][B] -moz-transform: scaleY(0);[/B][/B][/B][/B] [B][B][B][B] -ms-transform: scaleY(0);[/B][/B][/B][/B] [B][B][B][B] -o-transform: scaleY(0);[/B][/B][/B][/B] [B][B][B][B] -webkit-transform: scaleY(0);[/B][/B][/B][/B] [B][B][B][B] transform: scaleY(0);[/B][/B][/B][/B] [B][B][B][B][/B][/B][/B][/B] [B][B][B][B] /*-moz-transform-origin: 0 0;[/B][/B][/B][/B] [B][B][B][B] -ms-transform-origin: 0 0;[/B][/B][/B][/B] [B][B][B][B] -o-transform-origin: 0 0;[/B][/B][/B][/B] [B][B][B][B] -webkit-transform-origin: 0 0;[/B][/B][/B][/B] [B][B][B][B] transform-origin: 0 0;[/B][/B][/B][/B] [B][B][B][B][/B][/B][/B][/B] [B][B][B][B] -moz-transition: -moz-transform 0.1s linear;[/B][/B][/B][/B] [B][B][B][B] -ms-transition: -ms-transform 0.1s linear;[/B][/B][/B][/B] [B][B][B][B] -o-transition: -o-transform 0.1s linear;[/B][/B][/B][/B] [B][B][B][B] -webkit-transition: -webkit-transform 0.1s linear;[/B][/B][/B][/B] [B][B][B][B] transition: transform 0.1s linear;*/[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#nav li {[/B][/B][/B][/B] [B][B][B][B] background: url('menu_line.png') no-repeat scroll right 5px transparent;[/B][/B][/B][/B] [B][B][B][B] float: left;[/B][/B][/B][/B] [B][B][B][B] position: relative;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#nav li a {[/B][/B][/B][/B] [B][B][B][B] color: #FFFFFF;[/B][/B][/B][/B] [B][B][B][B] display: block;[/B][/B][/B][/B] [B][B][B][B] float: left;[/B][/B][/B][/B] [B][B][B][B] font-weight: normal;[/B][/B][/B][/B] [B][B][B][B] height: 20px;[/B][/B][/B][/B] [B][B][B][B] padding: 1px 20px 0;[/B][/B][/B][/B] [B][B][B][B] position: relative;[/B][/B][/B][/B] [B][B][B][B] text-decoration: none;[/B][/B][/B][/B] [B][B][B][B] text-shadow: 1px 1px 1px #000000;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#nav li:hover > a {[/B][/B][/B][/B] [B][B][B][B] color: #00B4FF;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {[/B][/B][/B][/B] [B][B][B][B] background: none repeat scroll 0 0 #121212;[/B][/B][/B][/B] [B][B][B][B] outline: 0 none;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#nav li:hover ul.subs {[/B][/B][/B][/B] [B][B][B][B] left: 0;[/B][/B][/B][/B] [B][B][B][B] top: 53px;[/B][/B][/B][/B] [B][B][B][B] width: 180px;[/B][/B][/B][/B] [B][B][B][B][/B][/B][/B][/B] [B][B][B][B] -moz-transform: scaleY(1);[/B][/B][/B][/B] [B][B][B][B] -ms-transform: scaleY(1);[/B][/B][/B][/B] [B][B][B][B] -o-transform: scaleY(1);[/B][/B][/B][/B] [B][B][B][B] -webkit-transform: scaleY(1);[/B][/B][/B][/B] [B][B][B][B] transform: scaleY(1);[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#nav ul li {[/B][/B][/B][/B] [B][B][B][B] background: none;[/B][/B][/B][/B] [B][B][B][B] width: 100%;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#nav ul li a {[/B][/B][/B][/B] [B][B][B][B] float: none;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#nav ul li:hover > a {[/B][/B][/B][/B] [B][B][B][B] background-color: #121212;[/B][/B][/B][/B] [B][B][B][B] color: #00B4FF;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#lavalamp {[/B][/B][/B][/B] [B][B][B][B] background: url('lavalamp.png') no-repeat scroll 0 0 transparent;[/B][/B][/B][/B] [B][B][B][B] height: 16px;[/B][/B][/B][/B] [B][B][B][B] left: 13px;[/B][/B][/B][/B] [B][B][B][B] position: absolute;[/B][/B][/B][/B] [B][B][B][B] top: 0px;[/B][/B][/B][/B] [B][B][B][B] width: 64px;[/B][/B][/B][/B] [B][B][B][B][/B][/B][/B][/B] [B][B][B][B] -moz-transition: all 300ms ease;[/B][/B][/B][/B] [B][B][B][B] -ms-transition: all 300ms ease;[/B][/B][/B][/B] [B][B][B][B] -o-transition: all 300ms ease;[/B][/B][/B][/B] [B][B][B][B] -webkit-transition: all 300ms ease;[/B][/B][/B][/B] [B][B][B][B] transition: all 300ms ease;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#lavalamp:hover {[/B][/B][/B][/B] [B][B][B][B] -moz-transition-duration: 3000s;[/B][/B][/B][/B] [B][B][B][B] -ms-transition-duration: 3000s;[/B][/B][/B][/B] [B][B][B][B] -o-transition-duration: 3000s;[/B][/B][/B][/B] [B][B][B][B] -webkit-transition-duration: 3000s;[/B][/B][/B][/B] [B][B][B][B] transition-duration: 3000s;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B][/B][/B][/B][/B] [B][B][B][B]#nav li:nth-of-type(1):hover ~ #lavalamp {[/B][/B][/B][/B] [B][B][B][B] left: 13px;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#nav li:nth-of-type(2):hover ~ #lavalamp {[/B][/B][/B][/B] [B][B][B][B] left: 90px;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#nav li:nth-of-type(3):hover ~ #lavalamp {[/B][/B][/B][/B] [B][B][B][B] left: 170px;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#nav li:nth-of-type(4):hover ~ #lavalamp {[/B][/B][/B][/B] [B][B][B][B] left: 250px;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#nav li:nth-of-type(5):hover ~ #lavalamp {[/B][/B][/B][/B] [B][B][B][B] left: 330px;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#nav li:nth-of-type(6):hover ~ #lavalamp {[/B][/B][/B][/B] [B][B][B][B] left: 410px;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#nav li:nth-of-type(7):hover ~ #lavalamp {[/B][/B][/B][/B] [B][B][B][B] left: 490px;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]#nav li:nth-of-type(8):hover ~ #lavalamp {[/B][/B][/B][/B] [B][B][B][B] left: 565px;[/B][/B][/B][/B] [B][B][B][B]}[/B][B] Code (markup): layout.css [/B][B]*{[/B][/B][/B][/B] [B][B][B][B] margin: 0;[/B][/B][/B][/B] [B][B][B][B] padding:0;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]body {[/B][/B][/B][/B] [B][B][B][B] font:14px/1.3 Arial,sans-serif;[/B][/B][/B][/B] [B][B][B][B] background-color:#212121;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]header {[/B][/B][/B][/B] [B][B][B][B] position: absolute;[/B][/B][/B][/B] [B][B][B][B] text-align: center;[/B][/B][/B][/B] [B][B][B][B] background-color:#212121;[/B][/B][/B][/B] [B][B][B][B] color:#ccc;[/B][/B][/B][/B] [B][B][B][B] display:block;[/B][/B][/B][/B] [B][B][B][B] height:280px;[/B][/B][/B][/B] [B][B][B][B] position:relative;[/B][/B][/B][/B] [B][B][B][B] width:100%;[/B][/B][/B][/B] [B][B][B][B] z-index:100;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]header h2{[/B][/B][/B][/B] [B][B][B][B] font-size:22px;[/B][/B][/B][/B] [B][B][B][B] font-weight:normal;[/B][/B][/B][/B] [B][B][B][B] left:50%;[/B][/B][/B][/B] [B][B][B][B] margin-left:-400px;[/B][/B][/B][/B] [B][B][B][B] padding:22px 0;[/B][/B][/B][/B] [B][B][B][B] position:absolute;[/B][/B][/B][/B] [B][B][B][B] width:540px;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]header a.stuts,a.stuts:visited{[/B][/B][/B][/B] [B][B][B][B] border:none;[/B][/B][/B][/B] [B][B][B][B] text-decoration:none;[/B][/B][/B][/B] [B][B][B][B] color:#fcfcfc;[/B][/B][/B][/B] [B][B][B][B] font-size:14px;[/B][/B][/B][/B] [B][B][B][B] left:50%;[/B][/B][/B][/B] [B][B][B][B] line-height:31px;[/B][/B][/B][/B] [B][B][B][B] margin:23px 0 0 110px;[/B][/B][/B][/B] [B][B][B][B] position:absolute;[/B][/B][/B][/B] [B][B][B][B] top:0;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]header .stuts span {[/B][/B][/B][/B] [B][B][B][B] font-size:22px;[/B][/B][/B][/B] [B][B][B][B] font-weight:bold;[/B][/B][/B][/B] [B][B][B][B] margin-left:5px;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B].container {[/B][/B][/B][/B] [B][B][B][B] height: 571px;[/B][/B][/B][/B] [B][B][B][B] margin: 30px auto;[/B][/B][/B][/B] [B][B][B][B] width: 1000px;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]h1 {[/B][/B][/B][/B] [B][B][B][B] font-weight: bold;[/B][/B][/B][/B] [B][B][B][B] padding-top: 10px;[/B][/B][/B][/B] [B][B][B][B] padding-bottom: 10px;[/B][/B][/B][/B] [B][B][B][B] border: outset;[/B][/B][/B][/B] [B][B][B][B] border-color: black;[/B][/B][/B][/B] [B][B][B][B] margin: auto;[/B][/B][/B][/B] [B][B][B][B] background-color:#0CF;[/B][/B][/B][/B] [B][B][B][B] width: 500px;[/B][/B][/B][/B] [B][B][B][B] text-align: center;[/B][/B][/B][/B] [B][B][B][B] -moz-border-radius: 10px;[/B][/B][/B][/B] [B][B][B][B] -webkit-border-radius: 10px;[/B][/B][/B][/B] [B][B][B][B] border-radius: 10px;[/B][/B][/B][/B] [B][B][B][B] text-shadow: 0px 0px 0px #666;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]table { [/B][/B][/B][/B] [B][B][B][B]margin: auto;[/B][/B][/B][/B] [B][B][B][B]width: 1000px;[/B][/B][/B][/B] [B][B][B][B]border: outset; [/B][/B][/B][/B] [B][B][B][B] background-color: #0FF;[/B][/B][/B][/B] [B][B][B][B] font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;[/B][/B][/B][/B] [B][B][B][B] border-color: black;[/B][/B][/B][/B] [B][B][B][B] border-collapse: separate; border-spacing: 24px;[/B][/B][/B][/B] [B][B][B][B] border-collapse: collapse; border-spacing: 24px;[/B][/B][/B][/B] [B][B][B][B] /**rounded borders**/[/B][/B][/B][/B] [B][B][B][B] -moz-border-radius: 20px;[/B][/B][/B][/B] [B][B][B][B] -webkit-border-radius: 20px;[/B][/B][/B][/B] [B][B][B][B] border-radius: 20px;[/B][/B][/B][/B] [B][B][B][B] text-shadow: 0px 0px 0px #666;[/B][/B][/B][/B] [B][B][B][B][/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]th {[/B][/B][/B][/B] [B][B][B][B] text-align: center;[/B][/B][/B][/B] [B][B][B][B] width: auto;[/B][/B][/B][/B] [B][B][B][B] column-width: auto;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B]th {[/B][/B][/B][/B] [B][B][B][B] text-align:center;[/B][/B][/B][/B] [B][B][B][B] vertical-align: middle;[/B][/B][/B][/B] [B][B][B][B][/B][/B][/B][/B] [B][B][B][B] font-weight: bold;}[/B][/B][/B][/B] [B][B][B][B]td {[/B][/B][/B][/B] [B][B][B][B] text-align: center;[/B][/B][/B][/B] [B][B][B][B]}[/B][/B][/B][/B] [B][B][B][B][/B][/B][/B][/B] [B][B][B][B][/B][/B][/B][/B] [B][B][B][B]h6 {[/B][/B][/B][/B] [B][B][B][B] text-align: center;[/B][/B][/B][/B] [B][B][B][B] margin: auto;[/B][/B][/B][/B] [B][B][B][B] color: #00F;[/B][/B][/B][/B] [B][B][B][B] font-weight: bolder;[/B][/B][/B][/B] [B][B][B][B] font-size:x-large;[/B][/B][/B][/B] [B][B][B][B]}[/B][B][/code[/B] Code (markup):
That's the most mangled I've seen code in a forum post yet... what the devil is that?!? Ok, after copy, search/replace... you've got the typical HTML 5 asshat bloat, so I'd suggest getting that nonsense out of the markup first, particularly since it seems to be wrapped around HTML 3.2 like it's 1997. Endless target attributes shoving new windows down the users throat breaking normal navigation, incomplete tables (almost said tables for layout, but that is tabular data -- just get thead, tbody and SCOPE on there, and make the first TD in the data rows a TH), and nonsensical use of a H6 aren't exactly encouraging. I can't be bothered to clean up your multiple CSS files doing the job of one with no MEDIA targets -- do you have a copy LIVE somewhere, that's generally a lot easier for us to deal with here.
I dont know what happened tbh I will re-submit the code Sorry no live version index2.html <!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>Pure CSS3 LavaLamp Menu | Script Tutorials</title> <link href="css/layout.css" rel="stylesheet" type="text/css" /> <link href="css/menu.css" rel="stylesheet" type="text/css" /> </head> <body> <header> <ul id="nav"> <img src="css/logo.png" alt="logo" width="1000" height="175"> <li><a href="http://torfaenpcrepair.com" target="_blank">Home</a></li> <li><a href="http://gallery.torfaenpcrepair.com/#home" target="_blank">Gallery</a> <ul class="subs"> </ul> <li><a href="http://blog.torfaenpcrepair.com/" target="_blank">Blog</a></li> <li><a href="http://torfaenpcrepair.webs.com/" target="_blank">Our Original Site</a> <ul class="subs"> </ul> </li> <li><a href="http://torfaenpcrepair.com/forum" target="_blank">Forum</a></li> <li><a class="hsubs" href="#">Shortcuts</a> <ul class="subs"> <li><a href="http://torfaenpcrepair.com/XP_Shortcuts.html" target="_blank">XP</a></li> <li><a href="http://torfaenpcrepair.com/Vista_Shortcuts.html" target="_blank">Vista</a></li> <li><a href="http://torfaenpcrepair.com/Win7_Hotkeys.html" target="_blank">Windows 7</a></li> <li><a href="http://torfaenpcrepair.com/Win8_Hotkeys.html" target="_blank">Windows 8</a></li> <li><a href="http://torfaenpcrepair.com/Mac_OSx_Shortcuts.html" target="_blank">Mac</a></li> <li><a href="http://torfaenpcrepair.com/Photoshop_Shortcuts.html" target="_blank">PhotoShop</a></li> <li><a href="http://torfaenpcrepair.com/Dreamweaver_Shortcuts.html" target="_blank">Dreamweaver</a></li> <li><a href="http://torfaenpcrepair.com/Brackets_Shortcuts.html" target="_blank">Brackets</a></li> </ul> </li> <li><a href="http://torfaenpcrepair.com/Guestbook.html?_cache=1348799726" target="_blank">Guestbook</a></li> <li> <a class="hsubs" href="#">Links</a> <ul class="subs"> <li><a href="http://torfaenpcrepair.com/out-and-about.html" target="_blank">Out and About</a></li> <li><a href="http://torfaenpcrepair.com/Services.html" target="_blank">Services</a></li> <li><a href="http://torfaenpcrepair.com/links.html" target="_blank">Useful Links</a></li> <li><a href="http://torfaenpcrepair.com/contacted.html" target="_blank">Contact Us</a></li> </ul> </li> <div id="lavalamp"></div> </ul> </header> <h1>Windows 8 Keyboard Shortcuts</h1> <table border=""> <tr> <th>Command</th> <th>Shortcut</th> </tr> <tr> <td>WIN + Z</td> <td>Access Options of Metro Apps</td> </tr> <tr> <td>Win + Spacebar</td> <td>Change the language / keyboard layout</td> </tr> <tr> <td>Win + Y</td> <td>Switches to desktop view</td> </tr> <tr> <td>Win + Q</td> <td>Open Global Search</td> </tr> <tr> <td>WIN + W</td> <td>Search Within System Settings</td> </tr> <tr> <td>WIN + F</td> <td>Search Within Files</td> </tr> <tr> <td>WIN + O</td> <td>Disable screen rotation</td> </tr> <tr> <td>Win + Print Screen</td> <td>Take Screenshot (Saves as PNG in Pictures Library)</td> </tr> <tr> <td>Win + C</td> <td>Open Charms Bar</td> </tr> <tr> <td>Win + Tab</td> <td>Open Switch List</td> </tr> <tr> <td>Win + I</td> <td>Open Settings Menu</td> </tr> <tr> <td>Win + P</td> <td>Open Second Screen/ Projector Settings</td> </tr> <tr> <td>Win + H</td> <td>Go to Share Settings Pane</td> </tr> <tr> <td>Win + K</td> <td>Open Devices Settings Pane</td> </tr> <tr> <td>Win + X</td> <td>Open System Utility Settings Menu</td> </tr> <tr> <td>Win + T</td> <td>Preview Opened Windows in Taskbar</td> </tr> <tr> <td>Win + U</td> <td>Open Ease of Access Center</td> </tr> <tr> <td>Win + E</td> <td>Open Windows Explorer</td> </tr> <tr> <td>Win + R</td> <td>Open Run Dialogue Box</td> </tr> <tr> <td>Win + Pause</td> <td>Open System Properties Window</td> </tr> <tr> <td>Win + Enter</td> <td>Open Windows Narrator</td> </tr> <tr> <td>Win + Shift + .</td> <td>Snap Application to Right Side</td> </tr> <tr> <td>Win + .</td> <td>Snap Application to Left Side</td> </tr> <tr> <td>Win + ,</td> <td>Peek at Desktop (Aero Peek)</td> </tr> <tr> <td>Win + D</td> <td>Go to Desktop</td> </tr> <tr> <td>Win + M</td> <td>Minimize All Applications</td> </tr> <tr> <td>Win + B</td> <td>Go Back to Desktop</td> </tr> <tr> <td>Win + J</td> <td>Switches focus between snapped Metro applications</td> </tr> <tr> <td>Win + L</td> <td>Lock Screen</td> </tr> <tr> <td>Win + Page Up/ Page Down</td> <td>Switch Primary & Secondary Monitors</td> </tr> <tr> <td>Ctrl + Mouse Scroll (In Start Screen)</td> <td>Tile Zoom Toggle</td> </tr> <tr> <td>Ctrl + Mouse Scroll (In Desktop)</td> <td>Change Desktop Icon Size</td> </tr> <tr> <td>Ctrl + Shift+ N</td> <td>Create New Folder in Current Directory</td> </tr> </table> <div> </div> <div class="container"></div> <div id="footer"> <h6><a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /> </a> © All Rights Reserved © <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /> </a></h6> </div> </body> </html> HTML: menu.css #nav,#nav ul { list-style: none outside none; margin: auto; padding: 0; } #nav { margin: auto; background: url('menu_bg.png') no-repeat scroll 0 0 transparent; clear: both; font-size: 12px; height: 58px; padding: 0 0 0 0; position: relative; width: 700px; } #nav ul { background-color: #222; border:2px solid #000; border-radius: 0 5px 5px 5px; border-width: 0 1px 1px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); left: -9999px; overflow: hidden; position: absolute; top: -9999px; z-index: 2; -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); /*-moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -moz-transition: -moz-transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear; transition: transform 0.1s linear;*/ } #nav li { background: url('menu_line.png') no-repeat scroll right 5px transparent; float: left; position: relative; } #nav li a { color: #FFFFFF; display: block; float: left; font-weight: normal; height: 20px; padding: 1px 20px 0; position: relative; text-decoration: none; text-shadow: 1px 1px 1px #000000; } #nav li:hover > a { color: #00B4FF; } #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active { background: none repeat scroll 0 0 #121212; outline: 0 none; } #nav li:hover ul.subs { left: 0; top: 53px; width: 180px; -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } #nav ul li { background: none; width: 100%; } #nav ul li a { float: none; } #nav ul li:hover > a { background-color: #121212; color: #00B4FF; } #lavalamp { background: url('lavalamp.png') no-repeat scroll 0 0 transparent; height: 16px; left: 13px; position: absolute; top: 0px; width: 64px; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -webkit-transition: all 300ms ease; transition: all 300ms ease; } #lavalamp:hover { -moz-transition-duration: 3000s; -ms-transition-duration: 3000s; -o-transition-duration: 3000s; -webkit-transition-duration: 3000s; transition-duration: 3000s; } #nav li:nth-of-type(1):hover ~ #lavalamp { left: 13px; } #nav li:nth-of-type(2):hover ~ #lavalamp { left: 90px; } #nav li:nth-of-type(3):hover ~ #lavalamp { left: 170px; } #nav li:nth-of-type(4):hover ~ #lavalamp { left: 250px; } #nav li:nth-of-type(5):hover ~ #lavalamp { left: 330px; } #nav li:nth-of-type(6):hover ~ #lavalamp { left: 410px; } #nav li:nth-of-type(7):hover ~ #lavalamp { left: 490px; } #nav li:nth-of-type(8):hover ~ #lavalamp { left: 565px; } Code (markup): layout.css *{ margin: 0; padding:0; } body { font:14px/1.3 Arial,sans-serif; background-color:#212121; } header { position: absolute; text-align: center; background-color:#212121; color:#ccc; display:block; height:280px; position:relative; width:100%; z-index:100; } header h2{ font-size:22px; font-weight:normal; left:50%; margin-left:-400px; padding:22px 0; position:absolute; width:540px; } header a.stuts,a.stuts:visited{ border:none; text-decoration:none; color:#fcfcfc; font-size:14px; left:50%; line-height:31px; margin:23px 0 0 110px; position:absolute; top:0; } header .stuts span { font-size:22px; font-weight:bold; margin-left:5px; } .container { height: 571px; margin: 30px auto; width: 1000px; } h1 { font-weight: bold; padding-top: 10px; padding-bottom: 10px; border: outset; border-color: black; margin: auto; background-color:#0CF; width: 500px; text-align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; text-shadow: 0px 0px 0px #666; } table { margin: auto; width: 1000px; border: outset; background-color: #0FF; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; border-color: black; border-collapse: separate; border-spacing: 24px; border-collapse: collapse; border-spacing: 24px; /**rounded borders**/ -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; text-shadow: 0px 0px 0px #666; } th { text-align: center; width: auto; column-width: auto; } th { text-align:center; vertical-align: middle; font-weight: bold;} td { text-align: center; } h6 { text-align: center; margin: auto; color: #00F; font-weight: bolder; font-size:x-large; } Code (markup): The files can be found @ https://dl.dropbox.com/u/48948362/lava-lamp%20dropdown%20menu.zip
Ok, the markup is... problematic... the CSS is... problematic, and to be frank, that type of 'gimmicky' menu is the type of thing I'd not put on a website simply because it's too fragile... and would need a rewrite if you add or remove menu items. That it interferes with the dropdowns is reason enough to swing an axe at it... But when you say 'part of the logo' do you mean just sliding it up a bit? The top:0; is the part you'd change, just set it negative. BUT -- really the invalid garbage markup isn't helping; much less the HTML 5 lip-service wrapped around what is basically a HTML 3.2 document. Ok, see this: <ul id="nav"> <img src="css/logo.png" alt="logo" width="1000" height="175"> Code (markup): You can't put an IMG there, the only tag that can be a direct child of UL is LI. that img belongs BEFORE the UL. NOT that it belongs there as a IMG tag, since that image is presentation of the company name -- which should probably be a H1 in it's own right, NOT that said image is viable for web deployment since it locks you into a crappy inaccessible fixed width -- to go with the uselessly undersized 12px fonts on that not all that viable menu concept either. ALSO, you cannot put a DIV here: </li> <div id="lavalamp"></div> </ul> Code (markup): That too is invalid/gibberish markup because again, the only thing that can be a direct child of a UL is a LI. ... and that's before we get into the H6 without any H2..H5 preceding it, the H1 doing CAPTION's job, the lack of SCOPE, the absolute URL's on everything for no good reason, the invalid empty UL's in teh menu, the presence of the TARGET and BORDER attributes that have no business on ANY website written after 1997, etc, etc... In the 'modern' age of responsive layout, this is a decade and a half behind the curve filled with concepts and "gee ain't it neat" nonsense that to be frank, has no business on a website... from the giant fixed size logo image, to the menu with dropdowns that really could never be made fluid, to the dropdowns that wouldn't function on mobile, to the inaccessible and generally speaking invalid markup. It's also gibberish to use the copyright symbol more than once, PARTICULARLY without saying "to whom" and since you are NOWHERE near valid code, and really normal visitors to a website could give a flying purple fish it's a waste of time to show those logo's in the footer... Much less that 'valid CSS' is a pipedream in the age of vendor specific prefixes. More so what even makes that a sixth level heading -- is it the start of a subsection of a h5? Is there content AFTER it? A heading indicates the start of a subsection, NOT the section itself. Numbered headings mean the start of a subsection of the lower numbered heading before it... H2 is the start of a subsection of the H1, H3 is the start of a subsection of a H2 -- this is why there should only be one H1 on a page for which everything else is a subsection, why pairing H1+h2 for a heading and tagline is gibberish (you'll see that all the time), why if the only thing there is the heading they shouldn't be headings (this H6 for example), and why skipping over numbers when going up is also gibberish. I have to ask, what WYSIWYG are you using? The reason I'm asking is that to be frank, even with the formatting the code ends up a bit like symmetrical book stacking. Just like the Philadelphia mass turbulence of 1947. Given the complete lack of structure, proper semantics, and even the willy nilly slap it in there any old way formatting that's pretty much all over the place, You're right, no human being would stack books like this... Only a WYSIWYG or 'programmers IDE' could make this big a mess out of things. The first step I'd suggest is getting VALID markup, preferably in a RECOMMENDATION document instead of one that's not only not even out of draft, but seems carefully crafted to set coding practices back a decade and a half... that would go something like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> Pure CSS3 LavaLamp Menu | Script Tutorials </title> </head><body> <div id="pageWrapper"> <h1> Torfaen PC Repair <span><!-- image replacement --></span> </h1> <ul id="mainMenu"> <li><a href="/">Home</a></li> <li><a href="http://gallery.torfaenpcrepair.com/#home">Gallery</a></li> <li><a href="http://blog.torfaenpcrepair.com/">Blog</a></li> <li><a href="http://torfaenpcrepair.webs.com/">Our Original Site</a></li> <li><a href="/forum">Forum</a></li> <li> <a href="/shortcuts.html">Shortcuts</a> <!-- include a page for mobile users since there's no such thing as hover on a touchscreen! --> <ul> <li><a href="/XP_Shortcuts.html">XP</a></li> <li><a href="/Vista_Shortcuts.html">Vista</a></li> <li><a href="/Win7_Hotkeys.html">Windows 7</a></li> <li><a href="/Win8_Hotkeys.html">Windows 8</a></li> <li><a href="/Mac_OSx_Shortcuts.html">Mac</a></li> <li><a href="/Photoshop_Shortcuts.html">PhotoShop</a></li> <li><a href="/Dreamweaver_Shortcuts.html">Dreamweaver</a></li> <li><a href="/Brackets_Shortcuts.html">Brackets</a></li> </ul> </li> <li><a href="/Guestbook.html?_cache=1348799726">Guestbook</a></li> <li> <a href="/links">Links</a> <!-- include a page for mobile users since there's no such thing as hover on a touchscreen! --> <ul> <li><a href="/out-and-about.html">Out and About</a></li> <li><a href="/Services.html">Services</a></li> <li><a href="/links.html">Useful Links</a></li> <li><a href="/contacted.html">Contact Us</a></li> </ul> </li> </ul> <table class="keyShortcuts"> <caption><span>Windows 8 Keyboard Shortcuts</span></caption> <!-- extra span is because not all browsers style CAPTION the same way --> <thead> <tr> <th scope="col">Command</th> <th scope="col">Shortcut</th> </tr> </thead><tbody> <tr> <th scope="row">WIN + Z</th> <td>Access Options of Metro Apps</td> </tr><tr> <th scope="row">Win + Spacebar</th> <td>Change the language / keyboard layout</td> </tr><tr> <th scope="row">Win + Y</th> <td>Switches to desktop view</td> </tr><tr> <th scope="row">Win + Q</th> <td>Open Global Search</td> </tr><tr> <th scope="row">WIN + W</th> <td>Search Within System Settings</td> </tr><tr> <th scope="row">WIN + F</th> <td>Search Within Files</td> </tr><tr> <th scope="row">WIN + O</th> <td>Disable screen rotation</td> </tr><tr> <th scope="row">Win + Print Screen</th> <td>Take Screenshot (Saves as PNG in Pictures Library)</td> </tr><tr> <th scope="row">Win + C</th> <td>Open Charms Bar</td> </tr><tr> <th scope="row">Win + Tab</th> <td>Open Switch List</td> </tr><tr> <th scope="row">Win + I</th> <td>Open Settings Menu</td> </tr><tr> <th scope="row">Win + P</th> <td>Open Second Screen/ Projector Settings</td> </tr><tr> <th scope="row">Win + H</th> <td>Go to Share Settings Pane</td> </tr><tr> <th scope="row">Win + K</th> <td>Open Devices Settings Pane</td> </tr><tr> <th scope="row">Win + X</th> <td>Open System Utility Settings Menu</td> </tr><tr> <th scope="row">Win + T</th> <td>Preview Opened Windows in Taskbar</td> </tr><tr> <th scope="row">Win + U</th> <td>Open Ease of Access Center</td> </tr><tr> <th scope="row">Win + E</th> <td>Open Windows Explorer</td> </tr><tr> <th scope="row">Win + R</th> <td>Open Run Dialogue Box</td> </tr><tr> <th scope="row">Win + Pause</th> <td>Open System Properties Window</td> </tr><tr> <th scope="row">Win + Enter</th> <td>Open Windows Narrator</td> </tr><tr> <th scope="row">Win + Shift + .</th> <td>Snap Application to Right Side</td> </tr><tr> <th scope="row">Win + .</th> <td>Snap Application to Left Side</td> </tr><tr> <th scope="row">Win + ,</th> <td>Peek at Desktop (Aero Peek)</td> </tr><tr> <th scope="row">Win + D</th> <td>Go to Desktop</td> </tr><tr> <th scope="row">Win + M</th> <td>Minimize All Applications</td> </tr><tr> <th scope="row">Win + B</th> <td>Go Back to Desktop</td> </tr><tr> <th scope="row">Win + J</th> <td>Switches focus between snapped Metro applications</td> </tr><tr> <th scope="row">Win + L</th> <td>Lock Screen</td> </tr><tr> <th scope="row">Win + Page Up/ Page Down</th> <td>Switch Primary & Secondary Monitors</td> </tr><tr> <th scope="row">Ctrl + Mouse Scroll (In Start Screen)</th> <td>Tile Zoom Toggle</td> </tr><tr> <th scope="row">Ctrl + Mouse Scroll (In Desktop)</th> <td>Change Desktop Icon Size</td> </tr><tr> <th scope="row">Ctrl + Shift+ N</th> <td>Create New Folder in Current Directory</td> </tr> </tbody> </table> <hr /> <div id="footer"> © WhoeverOwnsThis, All Rights Reserved <!-- #footer --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): But the design? That's not even viable -- I can make some CSS to do what you are asking and will do so sometime dinner tonight, but to be frank I wouldn't be doing what you are asking, using any of the images you are trying to put on the page or "Gee ain't it neat" animated nonsense you're trying to do to the menu. It forces it into absurdly undersized fixed metric (px) fonts, inaccessible crappy fixed width too big for a normal laptop and uselessly tiny on a desktop like mine (2560x1440 on the primary display, 1920x1200 in the wings), and in general is a laundry list of how not to design a website in THIS century. Which also means stay away from garbage like that "scripts-tutorials" website or places like dynamic drive -- 99% of their crap is pointless code bloat, breaks too easily cross-browser or god forbid at different system metrics (aka default OS/browser font-size), or relies on -- again -- fixed width layouts pissing away any usefulness of the page for a LOT of users. Case in point the twit who wrote this: http://www.script-tutorials.com/pure-css3-lavalamp-menu/ Needs a good swift kick in the crotch for the unnecessary classes, invalid/gibberish placement of a DIV, presence of CSS3 attributes that are just redeclaring default values, etc, etc, etc...