Question

我只需要将每个按钮都可点击，而不是将鼠标悬停在按钮上时。它之前有用，但是我对一些东西感到困惑，现在回到只读<a href的文本。

我得到了什么。（我自己也是这种教学的新手）

<!DOCTYPE html>
<html>
<head>
<style> 
#menubar {
    width: 200px;
    height: 50px;
    background: black;
    text-decoration: none;
    transition: all .25s;
    -webkit-transition: all .25s; 
    background: linear-gradient(silver, black);
    background: -webkit-linear-gradient(silver,black);
}

#menubar:hover {
    width: 225px;
    background: linear-gradient(lightskyblue, blue);
    background: -webkit-linear-gradient(lightskyblue,blue);
}
/* Code to make whole menu bar div clickable */
.default-link{
  position:absolute; 
  width:200px;
  height:50px;
}  

#menubar ul {
    list-style-type: none;
    padding: 10px;
    margin: 0 50px;
}

#menubar ul li a {
    color: white;
    font-size:25px;
    text-decoration:none;
    position:inherit;
}

.auto-style1 {
    margin-left: 0px;
}

</style>
</head>
<body>

<!--Left Side Menu Bar Code-->
<div id="menubar">
    <ul>
        <li class="auto-style1" style="width: 137px">
            <a class='default-link' href='javascript:void(0)'             onclick='window.location = "#"' style="left: 11px; top: 16px; width: 200px;     height: 50px">
            Menu 1</a>
        </li>
    </ul>
</div>

<div id="menubar">
    <ul>
        <li>
            <a class='default-link' href='javascript:void(0)'     onclick='window.location = "#"' style="left: 11px; top: 66px; width: 200px; height: 50px">
        Menu 2</a>
    </li>
</ul>
</div>

<div id="menubar">
    <ul>
        <li>
            <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"' style="left: 11px; top: 116px; width: 200px; height: 50px">
            Menu 3</a>
        </li>
    </ul>
</div>

<div id="menubar">
<ul>
    <li>
        <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"' style="left: 11px; top: 166px; width: 200px; height: 50px">
        Menu 4</a>
    </li>
</ul>
</div>

<div id="menubar">
<ul>
    <li>
        <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"' style="left: 11px; top: 216px; width: 200px; height: 50px">
        Menu 5</a>
    </li>
</ul>
</div>

<div id="menubar">
<ul>
    <li>
        <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"' style="left: 11px; top: 266px; width: 200px; height: 50px">
        Menu 6</a>
    </li>
</ul>
</div>



</body>
</html>

Answer 1

您共享的代码需要大量清理.Id是唯一标识符，您不能重复使用它。此外，您可以优化代码，但有许多不需要的div和ul代码。

请检查此JSFiddle。

＆＃13;

.menubar{
  padding:0;
}
.menubar li{
  width: 200px;
  height: 50px;
  background: black;
  text-decoration: none;
  transition: all .25s;
  -webkit-transition: all .25s;
  background: linear-gradient(silver, black);
  background: -webkit-linear-gradient(silver, black);
}
.menubar li:hover {
  width: 225px;
  background: linear-gradient(lightskyblue, blue);
  background: -webkit-linear-gradient(lightskyblue, blue);
}

/* Code to make whole menu bar div clickable */
.default-link {
  position:absolute;
  width:200px;
  height:50px;
  color: white;
  font-size:25px;
  text-decoration:none; 
}
.menubar li{
  list-style-type: none;
  padding: 10px;
  margin: 0 50px;
  position:relative;
}
.auto-style1 {
  margin-left: 0px;
}

＆＃13;

<!--Left Side Menu Bar Code-->
<ul class="menubar">
  <li class="auto-style1"> <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"'>
    Menu 1</a>
  </li>
  <li> <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"'>
    Menu 2</a>

  </li>
  <li> <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"'>
    Menu 3</a>

  </li>
  <li> <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"'>
    Menu 4</a>

  </li>
  <li> <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"'>
    Menu 5</a>

  </li>
  <li> <a class='default-link' href='javascript:void(0)' onclick='window.location = "#"'>
    Menu 6</a>

  </li>
</ul>

＆＃13;

希望它会对你有所帮助。

菜单栏的CSS和HTML

1 个答案: