SitePoint Sponsor

User Tag List

Results 1 to 25 of 48

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    May 2012
    Posts
    998
    Mentioned
    0 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,183
    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.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 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 Guru
    Join Date
    May 2012
    Posts
    998
    Mentioned
    0 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
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 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 Guru
    Join Date
    May 2012
    Posts
    998
    Mentioned
    0 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
    SitePoint Guru
    Join Date
    May 2012
    Posts
    998
    Mentioned
    0 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.


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
  •