SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 48
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post block did not work

    Hi i need some help on my menu it will not show the drop down list...

    menu.css
    Code:
    .nav{
      list-style-type: none;
      padding: 0;
      margin: 0;
      width: 200px;
      text-transform: uppercase;
    }
    
    .nav  li{
      border-left: 10px solid blue;
      border-bottom: 1px solid red;
    }
    
    .nav li a:link,
    .nav li a:visited{
      text-decoration: none;
      padding: 0.5em;
      display: block;
      background-color: yellow;
      border-left: 5px solid rgb(239,213,252);
      
    }
    
    .nav li a:hover{
      background-color: blue;
      color: #FFF;
      border-left: 5px solid green;
    
    }
    
    .nav ul{
      list-style: none;
      margin: 0;
      padding: 0;
      border: 0;
    }
    
    .nav ul li{
      border: 0;
      display: none;
    }
    
    
    .nav ul li a:link,
    .nav ul li a:visited{
      background-color: orange;
      color: #FFF;
      padding: 0.5em 0.5em 0.5em 1em;
      display: block;
      text-decoration: none;
      border-left: 5px solid rgb(239,213,252);
    
    }
    
    
    .nav  li a:hover ul li {
       display: block; // I think this is my problem it will not work
    }
    my page


    Code:
    <!Doctype html>
    
    <html lang="en">
    <head>
     <meta charset="utf-8" />
     
     <link rel="stylesheet" href="menu.css" style="text/css"/>
     
    </head>
    
     <body>
        <ul class="nav">
           <li><a href="#">T-shirt</a>
    	       <ul>
    		       <li><a href="#">small</a></li>
    			   <li><a href="#">medium</a></li>
    			   <li><a href="#">large</a></li>
    	       </ul>
    	   </li>
    	   <li><a href="#">Brand</a></li>
    	   <li><a href="#">What's new</a></li>
    
        </ul>	
    
       
     <body>
    
    
    
    </html>

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Your anchor element is a child of the <li> element there for it can't trigger a hover state for the <ul> element because they are both children of the same parent, for the above to work you need to set the :hover event on the <li> element instead as that is the parent that every child element will attach itself to.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yes, as Chris said, the last rule needs to be changed to

    Code:
    .nav li:hover ul li {
       display: block;
    }
    Before, the rule said make the <ul> that is inside the <a> display: block, but the <ul> isn't inside the <a>, but it is inside the <li>.

  4. #4
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, as Chris said, the last rule needs to be changed to

    Code:
    .nav li:hover ul li {
       display: block;
    }
    Before, the rule said make the <ul> that is inside the <a> display: block, but the <ul> isn't inside the <a>, but it is inside the <li>.

    Thank you chris for explaining me and also to ralph for helping me to enlighten my mind, it's working i tried your codes.

    also one thing i also modify like this

    Code:
    .nav  li:hover li {
       display: block;
    }
    and it's working also but i don't know if this is the right way.

    so i will just follow what have you shared to me.thank you so much.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jemz View Post
    and it's working also but i don't know if this is the right way.
    Yes, that's fine. The "ul" bit was redundant. Well spotted!

  6. #6
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes, that's fine. The "ul" bit was redundant. Well spotted!
    Wow, Thank you ralph...I thought i was wrong

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    CSS is pretty logical in this way. .nav li:hover li means specifically this: "apply these styles to a LI that's inside another LI that's inside an element with the class 'nav' ". It doesn't matter if there are any elements in between those elements.

  8. #8
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph and chris, i will modify this menu i am going to make a horizontal dropdown,and i will post if i get trouble.Thank you in advance.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Here is a nice example by Paul:

    http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

  10. #10
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you for this link,,..Okay i will read this first.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    It's just a simple example, but a nice one to start with. There's nothing to read, but if you view the source code, you'll all the code involved.

  12. #12
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    it's an example of menu i thought it's a tutorial.

  13. #13
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    but if you view the source code, you'll all the code involved.
    i will just make my own code first so that i can try to code like this after it i will try to see how paul did it.

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    As I said, just look at the code, and it's all the tutorial you need.

  15. #15
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph, is there a tweak that can only the first letter to be uppercase?

    i use this

    .nav li a:first-letter{
    text-transform: uppercase;

    }
    but it will not capital the firs letter

  16. #16
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i got it now

    .nav li:first-letter{
    text-transform: uppercase;

    }
    it's working now.

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    First-letter only works on block elements and similar:

    http://reference.sitepoint.com/css/p...nt-firstletter

    So you could either try changing it to

    Code:
    .nav li:first-letter{
      text-transform: uppercase;
    }
    or just wrap the first letter in a span and do this:

    Code:
    .nav li a span{
      text-transform: uppercase;
    }
    That option works in more browsers, too.

  18. #18
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks ralph

  19. #19
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph, how did paul do that when we hover to "About" the background will be red and then if we go down to sub item list the background will change to red?how can i achieve that. I inspect the code but i am confuse.can you please help me.

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    It's this bit here (you can see Paul even commented in his code):

    Code:
    /* this sets all hovered lists to red */
    #nav li:hover a,#nav  li.over a,
    #nav li:hover li a:hover,#nav li.over li a:hover {
       color: #fff;
       background-color: red;
    }

  21. #21
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It's this bit here (you can see Paul even commented in his code):

    Code:
    /* this sets all hovered lists to red */
    #nav li:hover a,#nav  li.over a,
    #nav li:hover li a:hover,#nav li.over li a:hover {
       color: #fff;
       background-color: red;
    }

    Yup i saw that, but he uses the script .over?..i was confused in the script.

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jemz View Post
    Yup i saw that, but he uses the script .over?..i was confused in the script.
    Yeah, that's just for IE6, I think, which had problems with hovering on elements other than <a>. But IE6 is dead now, so don't worry about it.

  23. #23
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It's this bit here (you can see Paul even commented in his code):

    Code:
    /* this sets all hovered lists to red */
    #nav li:hover a,#nav  li.over a,
    #nav li:hover li a:hover,#nav li.over li a:hover {
       color: #fff;
       background-color: red;
    }

    Hi ralph, I got it now take a look at i did not use script...i can hover and put background color.

    please correct me if i am wrong...

    Code:
    .nav {
      list-style: none;
      padding: 0;
      margin: 0;
     
     
      
    }
    
    .nav > li:first-letter{
      text-transform: uppercase;
      
    }
    
    
    
    .nav > li{
       float: left;
       margin-right: 0.1em;
       min-width: 8em;
       text-align: center;
       background-color: red;
       
    }
    
    .nav li a:link,
    .nav li a:visited{
      text-decoration: none;
     
    }
    
    .nav li ul {
      list-style: none;
      margin: 0;
      padding: 0;
      border: 0;
    }
    
    .nav li ul li{
      display: none;
     
    }
    
    
    .nav li:hover li{
      display: block;  
      padding: 0.5em;
      background-color: yellow;
      color: #FFF; 
    }
    
    .nav li:hover,
    .nav ul li:hover {
      background-color: violet;
      display: block;
    }

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Are you using the same HTML as Paul? If you've changed it at all, post that too.

  25. #25
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Are you using the same HTML as Paul? If you've changed it at all, post that too.

    This is my HTML sorry i forgot to post,..i got problem i tested it I.E 8 but my css did not work at all.what lacking on this Ralph?
    Code:
    <!Doctype html>
    
    <html lang="en">
    <head>
     <meta charset="utf-8" />
     
     <link rel="stylesheet" href="menu2.css" style="text/css"/>
     
    </head>
    
     <body>
        <ul class="nav">
           <li><a href="#">home</a></li>
    	   <li><a href="#">about</a>
    	       <ul>
    		       <li><a href="#">how</a></li>
    			   <li><a href="#">where</a></li>
    			   <li><a href="#">when</a></li>
    	       </ul>
    	   </li>
    	   <li><a href="#">services</a></li>
    
        </ul>	
    
       
     <body>
    
    
    
    </html>
    Last edited by jemz; Sep 13, 2012 at 23:21. Reason: I forgot the html tag sorry


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
  •