SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Location
    Manila, Philippines, Philippines
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HELP on dropdown CSS

    Hi everyone! I need help.. If you check our website www.ksays.multiply.com You will notice that there's a glitch with the drop down navigation. Everytime I try to press the second line, it disappears. Can anyone help me with this? Attached is my CSS Thank you!

    PHP Code:
    #nav{
        
    list-style:none;
        
    font-weight:normal;
        
    margin-top:104px;
            
    text-shadow1px 1px 1px #C56161;
        /* Clear floats */
        
    float:left;
        :
    100%;
        
    /* Bring the nav above everything else--uncomment if needed.
        position:relative;
        z-index:5;
        */
    }
    #nav li{
        
    float:left;
    margin-right:-10px;
    position:relative;
    text-shadow1px 1px 1px #C56161;
    }
    #nav a{
    display:block;
    padding:5px;
    color:#fff;
    text-decoration:none;
    text-shadow1px 1px 1px #C56161;
    }
    #nav a:hover {
        
    backgroundnone repeat scroll 0 0 #5F340D;
    color#F9A99A;
    text-decorationnone;
    }

    /*--- DROPDOWN ---*/
    #nav ul{
        
    background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
        
    background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
        
    list-style:none;
        
    position:inherit;
        
    left:-9999px/* Hide off-screen when not needed (this is more accessible than display:none;) */
    }
    #nav ul li{
        
    padding-top:1px/* Introducing a padding between the li and the a give the illusion spaced items */
        
    float:none;
            -
    webkit-border-radius5px;
    -
    moz-border-radius5px;
    border-radius5px;
    }
    #nav ul a{
        
    white-space:nowrap;
            
    text-indent10px
           -
    webkit-border-radius5px;
    -
    moz-border-radius5px;
    border-radius5px/* Stop text wrapping and creating multi-line dropdown items */
    }
    #nav li:hover ul{ /* Display the dropdown on hover */
        
    left:0
            
    /* Bring back on-screen when needed */
    }
    #nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
        
    background:#5f340d;
        
    text-decoration:none;
    }
    #nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
        
    text-decoration:none;
    }
    #nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
        
    background:#333;
    }


  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Welcome to Sitepoint

    Set the z-index for the parent of the nav to be higher than anything underneath.

    e.g.
    Code:
    #owner_nav_wrapper{position:relative;z-index:99}

  3. #3
    SitePoint Member
    Join Date
    Jun 2012
    Location
    Manila, Philippines, Philippines
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AAAHH it worked!! THANK YOU SOSOOO MUCH!!

  4. #4
    SitePoint Member
    Join Date
    Jun 2012
    Location
    Manila, Philippines, Philippines
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi Welcome to Sitepoint

    Set the z-index for the parent of the nav to be higher than anything underneath.

    e.g.
    Code:
    #owner_nav_wrapper{position:relative;z-index:99}
    Oh I have another concern! How can I make the levels come out with arrows similar as this one...
    And how can I make the sizes/width of each section (Home, Apple, Blackberry etc) all the same?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That's really a question for a tutorial rather than a quick answer I'm afraid

    A quick overview would be that you give the anchors a width that suits your design and then decide if nested lists should be the same etc.

    You also need to hide nested menus so when you show the first item (#nav li:hover ul{}) then at the same time you need to hide any deeper nested menus (#nav li:hover li ul{left:-999em}) and then you show the last level with (#nav li:hover li:hover ul{leftxpx}) - where xx px equals the width of the previous menu.

    The drop downs should be position:absolute and you have forgotten to remove the default padding and margins from them.

    To create a sub arrow you need to add a class to the item that is a sub trigger.

    e.g.

    Code:
    <li><a href="#">iPhone</a>
     <ul>
      <li class="sub"><a href="#">iPhone4S </a>
    Then you can target that in css and add a background image:

    Code:
    #nav li.sub>a{
    background:#000 url(arrow.gif) no-repeat 98% 50%;
    }

    Here's a rough fix that should give the basic idea:

    Code:
    #nav, #nav ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    #nav { padding:0 0 0 10px }
    #nav { margin-top:104px }
    #nav> li a {
    	width:115px;
    	text-align:left;
    	padding:5px 0;
    	display:block
    }
    #nav> li {
    	width:115px;
    	margin:0
    }
    #nav li ul { position:absolute; }
    ul #nav li { margin:0 }
    #nav li:hover li ul { left:-999em }
    #nav li li:hover ul {
    	left:114px;
    	top:0
    }
    #nav li.sub>a{
    background-image: url(arrow.gif)!important; 
    background-repeat:no-repeat;
    background-position:98% 50%;
    }
    You would probably be better off running through a good tutorial as there is a lot to take in.

    Also you have many errors on that page and its a very small page so you need ot be careful and try and get it error free as a single error can break a whole page.

    Hope that's a start anyway


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
  •