利用UL、Li+CSS属性制作无表格实用菜单导航效果

`navigation li {

border-bottom: 1px solid ED9F9F; / 添加下划线 /

}

navigation li a {

display: block; / 区块显示 /

padding: 5px 5px 5px 0.5em;

text-decoration: none;

border-left: 12px solid 711515; / 左边的粗红边 /

border-right: 1px solid 711515; / 右侧阴影 /

}`

值得注意的是，“display:block”语句使得超链接成为块元素，这意味着无论用户点击链接的哪个部分，都会触发相应的动作，增强了用户体验。

通过超链接的伪属性来打造动态菜单效果。当链接被点击或未被点击时，呈现不同的背景颜色和文字颜色。当鼠标悬停在链接上时，更有醒目的背景色和文字颜色变化。样式代码如下：

`navigation li a:link, navigation li a:visited {

background-color: c11136;

color: FFFFFF;

}

navigation li a:hover {

background-color: 990020;

color: ffff00;

}`这样，一个简单的项目列表就被转化为了一个动态、醒目的导航菜单。试试看在你的网站上应用这些设置，看看效果如何？是否能与你的网站整体风格和SEO优化相协调呢？