Html <；ul>；列出在dreamweaver中编码时显示的样式，但在任何浏览器中测试时不显示_Html_Css

Html <；ul>；列出在dreamweaver中编码时显示的样式，但在任何浏览器中测试时不显示

html css

Html <；ul>；列出在dreamweaver中编码时显示的样式，但在任何浏览器中测试时不显示,html,css,Html,Css,我一直在尝试创建一个具有可点击按钮外观的导航菜单。我试着用css设计导航列表的样式；它正确地出现在dreamweaver的IDE中，但我尝试在其中测试它的任何浏览器都只会显示一个未设置样式的列表。我已经做了一些搜索，但没有发现我键入的html或css有任何错误。有什么建议吗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

我一直在尝试创建一个具有可点击按钮外观的导航菜单。我试着用css设计导航列表的样式；它正确地出现在dreamweaver的IDE中，但我尝试在其中测试它的任何浏览器都只会显示一个未设置样式的列表。我已经做了一些搜索，但没有发现我键入的html或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>Maine Windependence</title>
<link href="mainStyles.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="leftCol">

<div id="nav">
<ul>
    <li><a href="Homepage.html">Home</a></li>
    <li><a href="Contacts.html">Contacts</a></li>
    <li><a href="Calendar.html">Calendar</a></li>
    <li><a href="GeneralInfo.html">General Info</a></li>
    <li><a href="FactSheets.html">Fact Sheets</a></li>
    <li><a href="GetInvolved.html">Get Involved!</a></li>
    <li><a href="News.html">News</a></li>
    <li><a href="OtherResources.html">Other Resources</a></li>
</ul>
</div>

谢谢各位，任何建议都将不胜感激

================================================================ 编辑：

最后发现问题出在css文件的前一部分缺少一个结束括号。（Durrr…）无论如何，谢谢你们的帮助

James，我怀疑CSS文件保存不正确或位置错误。对于您的示例，它需要与HTML文件位于同一目录中

此外，上次我使用Dreamweaver（MX）时，它有一个讨厌的习惯，即制作不区分大小写的链接，这种链接在我（当时）的Windows box上运行良好，但在我的Linux服务器上根本不起作用。确保CSS文件名上的大小写与链接中的大小写匹配，尤其是文件扩展名（Windows默认情况下会对您隐藏！）

编辑：正如Sotiris所说，您的示例似乎在JSFIDLE中正确绘制，因此很可能Dreamweaver和您的文件系统的某些组合正在造成一个棘手的混乱

当前的外观是这样的：你能发布一张具有所需结果的图像吗？这确实（接近）我试图实现的外观，与dreamweaver在其IDE中显示的外观相似。然而，当在浏览器中打开时会发生以下情况：我们可以有一个演示的链接吗？如果不检查网站就很难告诉你出了什么问题。谢谢你的回复。然而，我不敢相信文件系统是个问题，因为我的其他css样式工作正常。css文件与html文件位于同一目录中。

#nav {
font-size: 14pt;
line-height: 200%;
}

#nav ul {
padding: 1em;
list-style-type: none;
}

#nav a:link, #nav a:visited {
padding: 0.5em;
color: #039;
background-color: #FFF;
text-decoration: none;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
border-bottom: 1px solid #039;
border-right: 1px solid #039;
}

#nav a:hover {
border-top: 1px solid #039;
border-left: 1px solid #039;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
}