【发布时间】:2019-10-17 11:31:28
【问题描述】:
我不能在我的按钮上放置链接而不干扰我的 css?我该如何阻止这个。每次我添加链接标签时,它都会变回普通按钮。我尝试了一切以更改 css 以更改 html。
#cssmenu input {
padding: 0;
border-right: 1px solid;
border-top: none;
border-bottom: none;
border-left: none;
background: none;
border-radius : 0px 5px 0px 0px;
}
#cssmenu > ul {
background: black;
padding-bottom: 3px;
border-radius: 5px 5px 5px 5px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: "";
display: table;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu > ul {
background: #00bfff;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li {
float: left;
position: relative;
}
#cssmenu > ul > li > input {
padding: 12px 30px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
#cssmenu > ul > li:hover > input {
background:violet;
-webkit-transition: all 0.40s ease-in-out;
-moz-transition: all 0.40s ease-in-out;
-ms-transition: all 0.40s ease-in-out;
transition: all 0.40s ease-in-out;
}
#cssmenu > ul > li.active > input,
#cssmenu > ul > li > input.active {
background: black;
color:#fff;
}
#cssmenu > ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 40px;
background: green;
margin: 0;
padding: 0;
z-index: -1;
box-shadow: 5px 5px 5px #808080;
}
#cssmenu > ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #fff;
z-index: 2;
top: 40px;
left: 0;
}
#cssmenu > ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li input {
padding: 12px ;
display: block;
color: white;
font-size: 14px;
text-decoration: none;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
}
#cssmenu > ul ul li input[type=submit]:hover {
border-left: 10px solid #d64e34;
background: grey;
}
#cssmenu > ul ul li input[type=submit]:active {
background: green;
}
.downArrow {
display: block;
position: absolute;
top: 12px;
right: 2px;
color:white;
}
.upArrow {
display: none;
position: absolute;
top: 12px;
right: 2px;
color:white;
}
#cssmenu li:first-child:hover .upArrow{
display: block;
}
#cssmenu li:first-child:hover .downArrow{
display: none;
}
<div id='cssmenu'>
<ul>
<li ><input type="submit" value="Destinations" />
<div class="downArrow"> ▼ </div>
<div class="upArrow"> ▲ </div>
<ul>
<li><input type="submit" value="Passi-Church" /></li>
<li><input type="submit" value="Cabuttan-Church" /></li>
<li><input type="submit" value="San-Jose-Church" /></li>
<li><input type="submit" value="Molo-Church" /></li>
<li><input type="submit" value="Miago-Church" /></li>
</ul>
</li>
<li><input type="submit" value="Delicacy" /> </li>
<li><input type="submit" value="History" /></li>
<li><input type="submit" value="About" /></li>
</ul>
</div>
你能帮我添加链接吗?
【问题讨论】:
-
链接不是按钮。他们做完全不同的事情。 - stackoverflow.com/questions/30936608/…
-
欢迎来到 Stack Overflow!请澄清您的具体问题或添加其他详细信息以准确突出您的需求。正如目前所写的那样,很难准确地说出你在问什么。
-
您的代码未格式化什么是:
type=submit value=Delicacy?例如,它应该是type="submit" value="Delicacy"