我正在尝试突出显示以下菜单
<ul class="listing">
<li><a href="Review.html">Review</a></li>
<li><a href="Preview.html">Preview</a></li>
<li><a href="Images.html">Images</a></li>
<li><a href="Videos">Videos</a></li>
</ul>
还有CSS
.listing li{display: inline;
text-decoration: none}
ul.listing a{font-size: 15px;
text-align: justify;
text-decoration: none}
ul.listing a:hover{box-shadow: inset 0px 12px 15px -2px gray }
ul.listing{margin-left: 150px;
padding: 5px;
background: ;
box-shadow: inset 0px -20px -2px -16px #812;
width: 940px;
height: 25px;
margin-top: 100px;
}
我该怎么做？
最佳答案
试试这个，
你的代码是正确的，唯一的问题是你忘记在CSS中的类定义之前添加一个点。我已经改正了。现在您的代码可以运行了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
<style type="text/css">
.listing{margin-left: 150px;
padding: 5px;
background: ;
box-shadow: inset 0px -20px -2px -16px #812;
width: 940px;
height: 25px;
margin-top: 100px;
}
.listing li{display: inline;
text-decoration: none}
.listing a{font-size: 15px;
text-align: justify;
text-decoration: none}
.listing a:hover{box-shadow: inset 0px 12px 15px -2px gray }
}
</style>
</head>
<body>
<ul class="listing">
<li ><a href="Review.html">Review</a></li>
<li><a href="Preview.html">Preview</a></li>
<li><a href="Images.html">Images</a></li>
<li><a href="Videos">Videos</a></li>
</ul>
</body>
</html>
关于html - 突出显示菜单选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9394642/