• Spiff75

    (@spiff75)


    I have a drop down menu:

    <ul id="nav" class="clearfloat">
    
    	<li class="cat-item"><a href="#">Categories</a>
    		<ul class="children">
    			<li class="cat-item"><a href="http://xxx.com/">All categories</a></li>
    			<li class="cat-item cat-item-6"><a href="http://xxx.com/?cat=6">Some category</a></li>
    			<li class="cat-item cat-item-8"><a href="http://xxx.com/?cat=8" >Some category</a></li>
    			<li class="cat-item cat-item-11"><a href="http://xxx.com/?cat=11" >Some category</a></li>
    			<li class="cat-item cat-item-9"><a href="http://xxx.com/?cat=9" >Some category</a></li>
    			<li class="cat-item cat-item-7"><a href="http://xxx.com/?cat=7">Some category</a></li>
    			<li class="cat-item cat-item-4"><a href="http://xxx.com/?cat=4" >Some category</a></li>
    			<li class="cat-item cat-item-10"><a href="http://xxx.com/?cat=10" >Some category</a></li>
    			<li class="cat-item cat-item-5"><a href="http://xxx.com/?cat=5">Some category</a></li>
    		</ul>
    	</li>
    </ul>

    And CSS like this:

    #nav {
    	width:120px;
    	background-color:#000000;
    	margin-left:0px;
    	border:1px solid #000000;
    	border-radius:3px;
    	letter-spacing:2px
    
    }
    
    #nav > li:first-child{
    	text-transform:uppercase;
    	font: bold 10.5px Georgia, 'Times New Roman', Times, serif;
    	margin-left:-10px;
    	margin-bottom:10px;
    	display: block;
    }
    
    #nav li{
    	display:none;
    	font: bold 9.5px Georgia, 'Times New Roman', Times, serif;
    	text-align:center;
    	padding:4px 0 4px 0;
    	margin-left:-38px;
    }
    
    #nav ul ul {
    	display: none;
    }
    
    #nav ul li:hover > ul {
    	display: block;
    }

    When hoverin on the Categories title the category list won’t appear. So obviously that is not targetet right? How do I target the categories to show?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Spiff75

    (@spiff75)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Look at what element has the ID of nav

    <ul id="nav" class="clearfloat">
    
    	<li class="cat-item"><a href="#">Categories</a>

    How can this CSS work?

    #nav ul ul {
    	display: none;
    }
    
    #nav ul li:hover > ul {
    	display: block;
    }

    Thread Starter Spiff75

    (@spiff75)

    I’m not sure I follow…

    the ul can’t have id as “nav” or…?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    This CSS

    #nav ul ul

    Will target this HTML

    <ul id="nav">
     <li>
      <ul>
       <li>
        <ul> <!-- This ul element -->

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘CSS drop down targeting’ is closed to new replies.