SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Help required!

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help required!

    Hi, i've been trying to put a drop down menu in place, it works but only in Internet explorer compatibility mode!


    CSS
    #nav, #nav ul { padding: 0; margin: 0; list-style: none; }
    #nav li { float: left; position: relative; width: 14em; background-color: #ffffff; color: #fffff; font-size: 1.0em; margin-right: 1em; }
    #nav a:link, #nav a:visited { display: block; text-decoration: none; padding-left: 1em; color: #fffff; }


    #nav ul { display: none; position: absolute; padding: 0; }
    #nav ul li { border: 0 none transparent; border-bottom: 1px solid #fffff; border-top: .5em solid #FFF; background-color: #fffff; font-size: 0.9em; margin-bottom: -1px; margin-top: 1px; padding: 0; }
    #nav li:hover ul { display: block; }

    Html
    <ul id="nav">
    <li><a href="../membersonly/memberlogin.php">Member already?</a></li>
    <ul>
    <li><a href="../membersonly/memberlogin.php">Login</a></li>
    <li><a href="../members/list.php">Who else is a member?</a></li>
    <li><a href="../members/member_benefits.php">Use of logo</a></li>
    </ul>

    <li><a href="../membersonly/memberlogin.php">Member quick links</a></li>
    <ul>
    <li><a href="../members/food-law-alert.php">Food law alert</a></li>
    <li><a href="../research/panels.php">Panels</a></li>
    <li><a href="../new-technologies.php">NTB</a></li>
    </ul>


    <li><a href="../membersonly/memberlogin.php">Why join?</a></li>
    <ul>
    <li><a href="../members/member_benefits.php">What do you get?</a></li>
    <li><a href="../members/member_benefits.php">Joining process</a></li>
    <li><a href="../members/member_benefits.php">Application form</a></li>
    </ul>


    <li><a href="../membersonly/memberlogin.php">Ways to join</a></li>
    <ul>
    <li><a href="../members/member_team.php">Contact us</a></li>
    <li><a href="../members/member_team.php">Enquiry form</a></li>
    <li><a href="../members/member_team.php">PDF Application form</a></li>
    </ul>


    <li><a href="../membersonly/memberlogin.php">Brewing members</a></li>
    <ul>
    <li><a href="http://www.bri-advantage.com/">Brewing membership</a></li>
    </ul>
    </ul>
    I'm using 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" xml:lang="en" lang="en">


    Sorry for the long post! any help would be brilliant

    Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi unchained. Welcome to the forums.

    Yeah, you have some major errors in your HTML and CSS. For example, in the HTML, the sub lists aren't contained inside the parent <li>s.

    Here's a cleaned up version:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    
    <title>Experiment</title>
    	
    <style media="all">
    body {background: #30353b;}
    #nav, #nav ul { padding: 0; margin: 0; list-style: none; }
    #nav > li { float: left; position: relative; width: 14em; font-size: 1.0em; margin-right: 1em; }
    #nav a:link, #nav a:visited { display: block; text-decoration: none; padding-left: 1em; color: #ffffff; }
    #nav ul { position: absolute; padding: 0; top: 100%; width: 14em; margin-left: -9999px; }
    #nav ul li {border-bottom: 1px solid #ffffff; font-size: 0.9em; padding: 0; }
    #nav li:hover ul {margin-left: 0;}
    </style>
    	
    </head>
    
    <body>
    
    <ul id="nav">
    <li><a href="../membersonly/memberlogin.php">Member already?</a>
    	<ul>
    		<li><a href="../membersonly/memberlogin.php">Login</a></li>
    		<li><a href="../members/list.php">Who else is a member?</a></li>
    		<li><a href="../members/member_benefits.php">Use of logo</a></li>
    	</ul>
    </li>
    <li><a href="../membersonly/memberlogin.php">Member quick links</a>
    	<ul>
    		<li><a href="../members/food-law-alert.php">Food law alert</a></li>
    		<li><a href="../research/panels.php">Panels</a></li>
    		<li><a href="../new-technologies.php">NTB</a></li>
    	</ul>
    </li>
    
    <li><a href="../membersonly/memberlogin.php">Why join?</a>
    	<ul>
    		<li><a href="../members/member_benefits.php">What do you get?</a></li>
    		<li><a href="../members/member_benefits.php">Joining process</a></li>
    		<li><a href="../members/member_benefits.php">Application form</a></li>
    	</ul>
    </li>
    
    <li><a href="../membersonly/memberlogin.php">Ways to join</a>
    	<ul>
    		<li><a href="../members/member_team.php">Contact us</a></li>
    		<li><a href="../members/member_team.php">Enquiry form</a></li>
    		<li><a href="../members/member_team.php">PDF Application form</a></li>
    	</ul>
    </li>
    
    <li><a href="../membersonly/memberlogin.php">Brewing members</a>
    	<ul>
    		<li><a href="http://www.bri-advantage.com/">Brewing membership</a></li>
    	</ul>
    </li>
    </ul>
    
    </body>
    
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •