When I hover over links in navigation bar, they move to the right.

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • 4760marilyn
    New Member
    • Mar 2015
    • 2

    When I hover over links in navigation bar, they move to the right.

    I have a css style sheet and onmouseover in my html code, but something isn't right as the links move when hovering over them.
  • Claus Mygind
    Contributor
    • Mar 2008
    • 571

    #2
    Hard to help you when you don't show your code.

    Comment

    • 4760marilyn
      New Member
      • Mar 2015
      • 2

      #3
      Sorry, I thought I had included my code. Here it is

      Code:
      <TD class=menuNormal onmouseover="expand(this);" onmouseout="collapse(this);" width=130 align=left>
           <p><b>Vida de Mulher</b></p>
            <DIV class=menuNormal>
            <TABLE class=menu width=130>
                     <TR>
                <TD class=menuNormal><A class=menuitem href="aborto.htm">Aborto
                </A></TD></TR>
              <TR>
                <TD class=menuNormal><A class=menuitem href="anorexia.htm">Anorexia
                </A></TD></TR>
              <TR>
                <TD class=menuNormal><A class=menuitem href="beleza.htm">Beleza de mulher
                </A></TD></TR>
              </TABLE></DIV></TD>
      
      and the css menu
      
      table.navbar
      {font-size: 11pt;
      margin: 0px;
      padding: 0px; 
      border: 0px; 
      /*font-weight: bold;*/}
      
      table.menu
      {font-size: 11pt;
      margin: 5px;
      padding: 0px;
      /*font-weight: bold;*/}
      
      td.menuNormal
      {padding: 0px;
      color: #003399;
      /*font-weight: bold;*/
      vertical-align: top;
      background-color: #f6f6f6;}
      
      td.menuHover
      {padding: 0px;
      color:#003399;
      width: 112px;
      /*font-weight: bold;*/
      vertical-align: top;
      /*remove the following line for drop-down menu with images*/
      background-color: lightblue;}

      Comment

      • weboutgateway
        New Member
        • Sep 2014
        • 23

        #4
        Your codes is not to accurate.

        You can have your navigation as simple as this.
        Tips:
        Instead of using Table use ul and li and you may use tutorials or even browsing an samples of navigation menus

        Check this out.
        CSS menus enhance website navigation and user experience by providing stylish and functional design options. Discover the best practices for creating effective CSS menus.

        Comment

        • Exequiel
          Contributor
          • Jul 2012
          • 288

          #5
          table is not a good element in creating a navigator, you must use <ul> and <li> element with <a> element. its the best element to create a navigator.
          example:
          Code:
          <ul>
            <li>
              <a href="home.html">HOME</a>
            </li>
            <li>
              <a href="home.html">PROFILE</a>
            </li>
            <li>
              <a href="home.html">CONTACT</a>
            </li>
          </ul>
          //DO YOUR CSS DESIGNS

          Comment

          Working...