SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot naynay99's Avatar
    Join Date
    Jan 2010
    Location
    Los Angeles
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    drop down menu not dropping

    Code:
    @charset "UTF-8";
    #wrapper {
    width: 990px;
    height: 560px;
    background-color: #8e536f;
    margin:auto;
    }
    #header {
    }
    #nav{
    }
    #nav{ 
    margin: 0px;
    padding: 0px;
    }
    #nav ul{
    margin: 0px;
    padding: 0px;
    line-height: 30px;
    
    }
    #nav li{ 
    margin: 0px;
    padding: 0px;
    list-style:none;
    float: left;
    position:: relative;
    background: #f96;
    }
    #nav ul li a {
    text-align: center;
    font-family:Tahoma, Geneva, sans-serif;
    text-decoration:none;
    height: 30px;
    width: 150px;
    display:block;
    color: #fff;
    border:1px solid #fff;
    }
    #nav ul ul{
    position:absolute;
    visibility: hidden;
    }
    #nav ul li:hover ul{
    visibility: visible;
    }
    #nav ul li:hover {
    background: #6cf;
    #nav ul li:hover ul li a:hover {
    background:#6cf;
    }
    .clearFloat {clear:both;
    margin: opx;
    padding: 0px;
    }
    #content {
    width: 990px;
    height: 560px;
    background-image:url(source_files/images/TheChef.jpg);
    }
    #footer {
    	
    }
    When I rollover it it goes inline and not drop down. Any help would be appreciated. I'm hoping it easy and something I am over looking.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    It would be better if you could show a live example, or at least post a working page with the HTML and CSS together. Other than that, I notice that you have

    Code:
    position:: relative;
    at one point, which is a typo, and also I'm pretty sure you can't use :hover more than once in a selector:

    Code:
    #nav ul li:hover ul li a:hover

  3. #3
    SitePoint Zealot naynay99's Avatar
    Join Date
    Jan 2010
    Location
    Los Angeles
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help. here is a link

    the chef

    rollover products

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    As the nested list items are floated that means the nested list items are also floated so makes sure you give them the appropriate width and clear them (or not float the nested lists.)

    Code:
    #nav li li{
        width:152px;
        clear:left
    }
    Careful with your code as you have typos creeping in.

    Missing closing bracket before the next rule:
    Code:
    #nav ul li:hover {
        background: #6cf;
    #nav ul li:hover ul li a:hover {
    background:#6cf;
    }
    Two colons instead of one:
    Code:
    position:: relative;
    Always run your code through the validator to catch simple typos.


    Quote Originally Posted by Ralph
    and also I'm pretty sure you can't use :hover more than once in a selector:
    No that's fine Ralph You can use as many as you need.

  5. #5
    SitePoint Zealot naynay99's Avatar
    Join Date
    Jan 2010
    Location
    Los Angeles
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you!


Tags for this Thread

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
  •