#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    156
    Rep Power
    13

    HTML5 Nav Menu Help


    Hi

    I am building a new HTML5 template and so far so good but in the nav menu, the links is appearing just above the text

    The link is below

    http://irhwebsites.co.uk/html5%20think%20simple/index.html

    For example, hold the mouse just above the word portfolio and the link appears, the button should go blue when the link appears

    Any ideas, could it be in the css somewhere

    I have pasted html5 coding below for the nav menu

    Code:
    <nav>
    <ul>
    <li><a href="index.html" class="home">Home</a></li>
    <li><a href="about.html">About us</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="webportfolio.html">Portfolio</a></li>
    <li><a href="pricing.html">Pricing</a></li>
    <li><a href="seo.html">SEO</a></li>
    <li><a href="tcs.html">T & C's</a></li>
    <li><a href="feedbackform.html">Feedback Form</a></li>
    <li><a href="testimonials.php">Testimonials</a></li>
    <li><a href="contact.php">Contact</a></li>
    </ul>
    </nav>
    Below is the CSS for the nav menu

    Code:
    nav{ position:absolute; width:960px; top:113px; right:8px; background:transparent; }
    
    nav ul li{ float: left; line-height:normal; margin-right: 10px; }
    
    nav ul li a{ font-size: 16px; font-family:Arial, Helvetica, sans-serif; color: black; text-transform:capitalize; font-weight:normal; display:block; /* IE6, IE7 line height fix */ padding:4px; background-color:transparent; margin-top:0px; margin-right:4px; text-decoration:none; }
    
    nav ul li a:hover{ background-color:#00CCFF; color: gray; padding:4px; color:white; -moz-border-radius: 8px; border-radius: 8px; }
    
    nav ul li a.current{ background-color:#00CCFF; padding:4px; color:white; -moz-border-radius: 8px; border-radius: 8px; }
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    710
    Rep Power
    441
    You have a height of 100px set on your header, which is making your intro section overlap the nav and block hovering over the links. Try removing the height from the header.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    156
    Rep Power
    13
    Hi rdoyle720

    Thank you so much for the reply and for the info, will try it now and let you know in 2 mins
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    156
    Rep Power
    13
    Worked perfect thank you so much, are you any good at php, got a small issue with php coding

IMN logo majestic logo threadwatch logo seochat tools logo