Question

I want to create a floating footer menu using JavaScript and HTML & CSS with other-sub menus for elements in the footer menu. The sub-menus also should float on mouse hoover. Is there any way i can fulfill these needs. Please help and Thank you.

Answer 1

It sounds like you’re fairly new to CSS (no offence if you’re not!)

To make it easier, I’d suggest using the Twitter Bootstrap framework – it’ll save you a lot of time if you’re new to CSS and save you from many common pitfalls.

Bootstrap has a Navbar component, which you can be fixed to the bottom of the site. I’ve attached some sample code, but I’d strongly recommend visiting the Bootstrap website and learning your way around – it’ll be well worth your effort.

HTML (make sure you include the bootstrap stylesheet and javascript)

<div class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="navbar-inner">
    <div class="container">
      <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="./index.html" class="brand">Submenu Example</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="">
            <a href="./base-css.html">Normal Item</a>
          </li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
              Dropup Item
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Sub Item 1</a></li>
              <li><a href="#">Sub Item 2</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>