Уважаемые профи, посмотрите моё меню и поправьте если где-что ни так. Делал его так, чтоб работало оптимально во всех браузерах. Был вариант для IE6 с таблицами через <if>, но по моему и без них в старых браузерах отображает вполне корректно.
| Код |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="1" />
<meta name="description" content="1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>1</title>
</head>
<body><!--начало бокса--><div id="box">
<div id="menu">
<ul><li class="CurrentItem">
<a href="" title="" rel=""><b>Главная</b></a></li>
<li>
<a href="" title="" rel=""><b>Раздел 1</b></a></li>
<li>
<a href="" title=""><b>Раздел 2</b></a></li>
<li>
<a href="" title="" rel=""><b>Раздел 3</b></a></li>
<li>
<a href="" title="" rel=""><b></b></a></li>
<li>
<a href="" title="" rel=""><b></b></a></li>
<li>
<a href="" title="" rel=""><b></b></a></li>
<li>
<a href="" title="" rel=""><b></b></a></li>
<li>
<a href="" title="" rel=""><b></b></a></li>
<li>
<a href="" title="" rel=""><b>RUS</b></a></li>
<li>
<a href="" title="" rel=""><b>ENG</b></a></li>
</ul>
</div>
</div><!--конец бокса--></body>
</html>
|
| Код |
/*----------общие параметры для страницы----------*/
html {background:#fff;}
body {
margin:0;
padding:0;
font-family:arial, verdana, sans-serif;
font-size: 12px;
color:#3e3e3e;
text-align:center;
}
ul {list-style:none;padding:0; }
a, a:visited {color:#048;text-decoration:none;}
a:hover {text-decoration:none;}
a img {border: none}
/*----------общая коробка для всего сайта----------*/
#box {border: px solid black;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
width: 900px;}
#menu
{clear:both ;
background-color:#F97906;
width:900px;
height:25px;
margin-bottom: 20px;}
#menu ul {padding:0px; margin:0;list-style-type: none;height:25px; position:relative;}
#menu ul li {float:left; position:relative; list-style-image: none;margin:0;}
#menu ul li a,
#menu ul li a:link,
#menu ul li a:visited
{
display:block; height:25px; line-height:25px; padding:0 20px 0 0;
float:left; text-decoration:none; font-weight:lighter;font-size:0.95em;
color:#fff;font-family: Trebuchet MS, Verdana, Helvetica, Arial, Tahoma;
}
#menu ul li a b {display:block; height:25px; float:left; padding:0 0 0 20px; cursor:pointer; color:#fff; }
#menu ul li a:hover {background-color:#000; line-height:25px; height:25px; position:relative; color:#ffffff;}
#menu ul li a:hover b {background-color:#000; line-height:25px; position:relative; color:#ffffff;}
#menu ul li:hover > a {background-color:#000; line-height:25px; height:25px; position:relative; color:#ffffff;}
#menu ul li:hover > a b {background-color:#000; line-height:25px; position:relative; color:#ffffff;}
#menu ul li.CurrentItem a,
#menu ul li.CurrentItem a:link,
#menu ul li.CurrentItem a:visited
{
background-color:#000; line-height:25px; height:25px; color:#fff; border:0;
}
#menu ul li.CurrentItem a b {background-color:#000; line-height:25px; color:#fff;}
/*-----раздел подвала-----*/
#footer { clear:both; margin-top:20px;width:900px; height:25px;border-top: 1px solid #ddd;}
#copyr { margin-left:20px; font-size: .7em;}
|
ссылка на рабочую страницу http://zone11.ru/test/home.html |