我正在设计一个水平菜单,我在其中使用完整菜单栏的简单单色图像,以及悬停状态的第二个图像,它有点暗。实际上我只制作了一张包含两者的图像,但这不是重点。
我的问题是:
请注意我几天前开始使用CSS,因此可能还有一些我尚未理解的基本概念。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<meta name="author" content="SS" />
<!-- Date: 2011-11-26 -->
<link href="site2.css" rel="stylesheet"type="text/css" />
</head>
<body>
<div class="header-wrap">
header
</div>
<div class="main-wrap">
<div class="main-content">
<div class="inner-header">
inner header
</div>
<div class="navbox">
<div class="navmenu">
<ul class="ul_nav">
<li class="nav-item nav-item-first">
<a href="index.html">Home</a>
</li>
<li class="nav-item">
<a href="">Page1</a>
</li>
<li class="nav-item">
<a href="">Page2</a>
</li>
<li class="nav-item nav-item-last">
<a href="">Page3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="lower-content">
lower-content
</div>
<div class="footer">
footer
</div>
</body>
</html>
CSS:
/* Basics */
body {
background: #888 url() center 30px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
margin: 0 auto;
}
/* Main divs */
.header-wrap {
background: #ddd;
height: 35px;
color: #00f;
}
.main-wrap {
background: #000 url(07h600a.png) no-repeat center 0;
margin: 0 auto;
}
.main-content {
overflow: hidden;
position: relative;
z-index: 10;
background: transparent; /* to be transparent*/
height: 600px;
margin: 0 auto;
width: 980px;
}
.lower-content {
background: #000;
color: #888;
height: 100px;
}
.footer {
background: #777;
height: 100px;
margin: 0 auto;
}
/* Content */
/* Menu */
.navbox {
background: #660;
position: relative;
padding: 0px 0 0 0;
margin: 0 auto 0px;
font-weight: bold;
font-size: 12px;
line-height: 40px;
height: 50px;
width: 980px;
margin: 0 auto;
}
.navmenu {
margin: 0 auto 0px;
padding: 0 0 0 0;
width: 980px;
}
.ul_nav {
margin: 0;
padding: 0;
list-style: none outside none;
text-transform: uppercase;
}
.navmenu .ul_nav {
width: 980px;
position: relative;
display: table;
}
.ul_nav li {
display: table-cell;
}
.ul_nav a, .ul_nav a:visited {
padding: 0 0;
text-decoration: none;
color: #fff;
}
.navmenu .nav-item {
background: transparent url(MenuGray.png) no-repeat scroll;
background-position: 50% -10px;
}
.navmenu .nav-item-first {
background-position: 0px -10px;
}
.navmenu .nav-item-last {
background-position: 100% -10px;
}
/* Menu hover */
.ul_nav .nav-item-first li:hover {
background: transparent url(MenuGray.png) no-repeat scroll;
background-position: 0px -50px;
}
.ul_nav .nav-item-last li:hover {
background-position: 100% -50px;
}
.ul_nav li:hover {
background-position: 50% -60px;
}
/* Menu font */
.ul_nav_color a, .ul_nav_color a:visited {
color: #FFF;
}
答案 0 :(得分:1)
有关
a
标记填充li
父级,方法是将其设置为block
或inline-block
,并调整填充,边距等。它的边缘匹配li
边缘。这将为您提供整个空间的链接,而不仅仅是文本。您在li
课程后列出了li
,因此您需要:
.ul_nav .nav-item-first:hover
不
.ul_nav .nav-item-first li:hover
答案 1 :(得分:0)
我建议您通过http://css.maxdesign.com.au/listutorial/index.htm查看水平列表的一些好例子。可能会避免将列表设置为表格。
这是一个简单的水平列表,用于设置锚点的宽度/高度,如果需要,可以将其更改为图像。
CSS
.newnav ul {margin:0; padding:0; list-style-type: none;}
.newnav ul li { display:inline-block;margin:0; padding:0; }
.newnav ul li a { text-decoration: none; background-color: #aaa; display:inline-block; width: 150px; height: 50px; line-height: 50px; }
.newnav ul li a:hover{background-color: #ddd;}
HTML
<div class="newnav">
<ul>
<li class="nav-item nav-item-first"><a href="index.html">Home</a></li>
<li class="nav-item"><a href="">Page1</a></li>
<li class="nav-item"><a href="">Page2</a></li>
<li class="nav-item nav-item-last"><a href="">Page3</a></li>
</ul>
</div>