How to make a DIV tag clickable wih an hyperlink-CodePudding

Could you please help me? I would like to be able to cick on "create road network" but nothing hapen. Here is my code https://jsfiddle.net/aba2s/fh49807n/4/

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Project structure</title>    
</head>
<body>
<div>
  <ul >
    <li><div >Project</div>
      <ul>
        <!-- Sub category -->
        <li><div >Road Network</div>
          <ul>
            <!-- Skill -->
            <li><div><a href="http://google.com">Create Road Network</a></div>
            <li><div>View Roads Networks</div>
            </li>
          </ul>
        </li>

        <li><div >Zone set</div>
          <ul>
            <li><div>Create Zone Set</div>
            <li><div>View Zones Sets</div>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

CodePudding user response：

Your problem is not because of a in div, but ul position

Your ul position is absolute and your li z-index is -1 which is under ul layer. That makes your a is not clickable

The fix could be removing z-index: -1; in .tree li

.tree li {
  font-weight: bold;
  line-height: 3em;
  margin: 0;
  padding: 1.5em 0 0 2em;
  position: relative;
  /*z-index: -1;*/
}

Full code

body {
  background: white;
  font: normal normal 13px/1.4 Segoe, "Segoe UI", Calibri, Helmet, FreeSans, Sans-Serif;
}

.tree ul {
  margin: 0 0 0 15em;
  padding: 0;
  list-style: none;
  color: #369;
  position: relative;
  /*relative;*/
}

.tree:before,
.tree ul:before {
  content: "";
  display: lock;
  width: 0px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-left: 1px solid;
  background: white;
  z-index: -1;
}

.tree li {
  font-weight: bold;
  line-height: 3em;
  margin: 0;
  padding: 1.5em 0 0 2em;
  position: relative;
  /*z-index: -1;*/
}

.tree li:before {
  border-top: 1px solid;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  margin-top: 1em;
  position: absolute;
  top: 1.5em;
  width: 2em;
}

.tree li:last-child:before {
  background: white;
  bottom: 0;
  height: auto;
  top: 1.5em;
}

.tree>li:before {
  border-top: none !important;
}

.tree li div {
  border-radius: 5px;
  border: 1px solid #afafaf;
  margin: 0;
  max-width: 15em;
  min-width: 15em;
  padding: 0.25em 0.5em;
  background: white;
  box-shadow: 1px 1px 4px #8F949A;
  color: #369;
  font-weight: bold;
}

ul.tree {
  margin-left: 0px;
}

ul.tree:before {
  border-left: none;
}


/*
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  width: 100%;
}*/

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Project structure</title>
  <!--link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"-->
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <!-- partial:index.partial.html -->
  <div>
    <ul >
      <li>
        <div >Project</div>
        <ul>
          <!-- Sub category -->
          <li>
            <div >Road Network</div>
            <ul>
              <!-- Skill -->
              <li>
                <div><a href="http://google.com">Create Road Network</a></div>
                <li>
                  <div>View Roads Networks</div>
                </li>
            </ul>
            </li>

            <li>
              <div >Zone set</div>
              <ul>
                <li>
                  <div>Create Zone Set</div>
                  <li>
                    <div>View Zones Sets</div>
              </ul>
              </li>
        </ul>
        </li>
    </ul>
  </div>
</body>

</html>

CodePudding user response：

z-index make this problem. If you will remove it will be clickable.

.tree li {
  font-weight: bold;
  line-height: 3em;
  margin: 0;
  padding: 1.5em 0 0 2em;
  position: relative;
  /*z-index: -1; */
}

CodePudding user response：

While looking on your fiddle i tried removing every single one of your css lines until it worked.. at the end i found this

you have to remove position: relative; in your .tree li after doing so the link will work

here is how the .tree li should look

.tree li {
  font-weight: bold;
  line-height: 3em;
  margin: 0;
  padding: 1.5em 0 0 2em;
  /* position: relative; */
  z-index: -1;
}

you can also just make the link a seperate class with diffrent position

EDIT: By looking at other answers i saw that removing the z-index: -1 is a much better solution

CodePudding user response：

you should do

<li>
  <a href="https://www.google.fr/">
    <div>Create Road Network</div>
  </a>
</li>

It's working on the half of the div

CodePudding user response：

You dont need a link in your object..

But cursor: pointer; in your div class in css so it looks clickable.

Then go to your html file and put onlick="window.location = 'YourLink'" into your html tag.

For example:

<li onlick="window.location = 'https://google.com'">Test - Button</li>