No replies
pdlw
pdlw's picture
Offline
newbie
Last seen: 3 years 26 weeks ago
Timezone: GMT-4
Joined: 2016-05-17
Posts: 1
Points: 2

The 'About us' sublink should link to www.google.com, but when I click it, the entire sub ul disappears and I find myself still on the same page. Here's a jsfiddle of it: https://jsfiddle.net/ovLrcrd6/1. I suspect it has to do with my last CSS style rule:

.navMain .listitem:focus ~ .navContent{
    		max-height:400px;
    		margin-top:-1px;
    	}

So whenever I click on the 'about us', the .navContent div becomes unfocused and returns to max-height:0 that I specified. How can I go about fixing this so that clicking on the parent ul's li will focus and show the sub ul but also clicking on 'about us' will bring me to google's home page?

HTML

<!doctype html>
<html>
 
<head>
  <title>practice</title>
  <meta charset='utf-8' />
</head>
 
<body>
  <nav class='navMain'>
    <div class='logo'>website</div>
    <ul>
      <li><a href="#" class='listitem'>css</a>
        <div class='navContent'>
          <div class='navSub'>
            <ul>
              <li><a href="http://www.google.com">about us</a></li>
              <li><a href="#">contact us</a></li>
              <li><a href="#">our works</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li><a href="#" class='listitem'>drop down</a>
        <div class='navContent'>
          <div class='navSub'>
            some text
          </div>
        </div>
      </li>
      <li><a href="#" class='listitem'>menu</a></li>
    </ul>
  </nav>
  <br />
  <br />
  <br />
  <a href='http://www.google.com'>google</a>
 
</body>
 
</html>

CSS

    *{
    		margin:0;
    		padding:0;
    		-webkit-box-sizing:border-box;
    	}
    	.navMain{
    		width:100%;
    		height:70px;
    		background-color:black;
    	}
    	.logo{
    		float:left;
    		color:white;
    		height:40px;
    		line-height:40px;
    		padding:15px 30px;
    	}
    	.navMain > ul{
    		float:left;
    	}
    	.navMain > ul > li{
    		float:left;
    	}
    	.navMain .listitem{
    		display:inline-block;
    		height:70px;
    		line-height:70px;
    		border:1px solid red;
    		color:white;
    		text-decoration:none;
    		position:relative;
 
    	}
    	.navMain .listitem:focus{
    		background-color:#222;
    	}
    	.navMain ul{
    		list-style-type:none;
    	}
    	.navMain ul li ul a{
    		padding:5px;
    		display:inline-block;
    		border:1px solid cyan;
    		text-decoration:none;
    	}
    	.navContent{
    		position:absolute;
    		top:70px;
    		max-height:0;
    		overflow:hidden;
    	}
    	.navMain .listitem:focus ~ .navContent{
    		max-height:400px;
    		margin-top:-1px;
    	}