1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

drop down css menu not working

Discussion in 'HTML, Graphics & Programming' started by DJMK4, 7 Feb 2006.

  1. DJMK4

    Capodecina

    Joined: 1 Dec 2004

    Posts: 21,935

    Location: S.Wales, Cardiff

    Im creating a website using css..iv just made a css menu by following

    http://www.alistapart.com/articles/dropdowns/

    which now works,

    iv set-up the layout as follows

    css
    Code:
    /* CSS Document for FCV */
    
    body {
    background-image:url(Images/background.jpg);
    }
    
    div#container {
    position: absolute;
    background-color:#ffffff;
    margin-left: 50px;
    margin-top: 50px;
    width: 901px;
    height: 500px;
    }
    
    *html div#container {
    position: absolute;
    margin-top: 20px;
    }
    
    
    div#banner {
    position: absolute;
    background-image: url(Images/banner.jpg);
    height: 85px;
    width: 895px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
    border: 1px solid black
    }
    
    div#navigation {
    position: absolute;
    background-image:url(Images/menu.jpg);
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 90px;
    width: 895px;
    height: 20px;
    border:1px solid black;
    }
    
    div#content {
    height: 360px;
    width: 895px;
    position: absolute;
    background-color:#666666;
    margin-top: 113px;
    margin-bottom: 2px;
    margin-left: 2px;
    margin-right: 2px;
    border: 1px solid black;
    overflow:auto;
    }
    
    
    
    div#footer {
    position: absolute;
    background-color: #666666;
    height: 20px;
    width: 895px;
    margin-top: 476px;
    margin-bottom: 2px;
    margin-left: 2px;
    margin-right: 2px;
    border: 1px solid black;
    }
    
    ul#nav {
      padding: 0;
      margin: 0;
      list-style: none;
      z-index:1;
      }
      
      li {
      float: left;
      position: relative;
      width: 10em;
      border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    color:#FFFFFF;
    text-align: center;
      }
      
      li ul {
      display: none;
      position: absolute; 
      top: 1em;
      left: 0;
      border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    background-image:url(Images/menu.jpg);
      
      }
      
      li > ul {
    	top: auto;
    	left: auto;
    	}
    	
    	li:hover ul, li.over ul{ display: block; }
    	
    	
    a {text-decoration:none;
    color:#FFFFFF;
    }
    a:hover {
    color:#FF0000;
    }
    	
    
    
    i want the content div to be scrollable if i have too much info on there, but when i do set the overflow: auto on the content div this happens to the menu

    www.caldicot-pc-helpdesk.co.uk/fcv2/index.htm

    anyone have any ideas?
     
    Last edited: 7 Feb 2006
  2. yhack

    Mobster

    Joined: 6 Jan 2005

    Posts: 3,636

    Location: Cambridge

    Works fine in firefox

    Silly IE
     
  3. DJMK4

    Capodecina

    Joined: 1 Dec 2004

    Posts: 21,935

    Location: S.Wales, Cardiff

    try and select one of the submenu items tho, it wont let me??

    if i take overflow: auto; off it will work fine again and i can click the submenu items..why is this happening?

    even in IE on my comp i cant see the expansion and it messes up, iv tried a number of people, some people say it works, some people say it dissapears when they try and rollover a link.. :S
     
    Last edited: 7 Feb 2006
  4. DJMK4

    Capodecina

    Joined: 1 Dec 2004

    Posts: 21,935

    Location: S.Wales, Cardiff

    anyone?
     
  5. nolimit

    Wise Guy

    Joined: 20 Aug 2003

    Posts: 2,446

    Location: London

    works with FireFox but dont work with IE, Netscape
     
  6. DJMK4

    Capodecina

    Joined: 1 Dec 2004

    Posts: 21,935

    Location: S.Wales, Cardiff

    any idea why this is happening? it dont work in firefox with me..bit of a bitch really as it is being developed for uni which will be running IE