اشکال این کد css برای ساخت منوی کرکره ای چیه؟! [بایگانی]

e601

شنبه 06 خرداد 1391, 15:49 عصر

سلام

من کد زیر رو برای ساختن منوی کرکره ای با css پیدا کردم و تغییراتی هم توش دادم و نسبتا خوب هم هست ولی آیتم اول منو که نامش Home هست وقتی موس روی اون میره ، زیر منوهای زیر آیتم Home ظاهر نمیشن !

به نظر شما اشکال این کد کجاست؟!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html dir="rtl">
<head>
<title>Mini-Tab Preview</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

.container {
width: 500px;
padding: 15px;
margin: 3px 0 20px 0;
border: 1px solid #ccc;
border-radius: 5px;
background: #fff;
}

/* rounded */

#nav {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}

#nav ul{ margin:0;padding:0;list-style:none;}

#nav li {
float:right;
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#nav li ul{display:none;}

#nav li:hover ul{display:block;width:20em;position:absolute;}

#nav a{display:block;}

#nav a:link, #nav a:visited {
float:right;
font-size: 10px;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}

#nav a:link.active, #nav a:visited.active, #nav a:hover {
color: #000;
background: url(rounded.gif) no-repeat bottom center;
}

</style>

<style type="text/css">

<li><a class="active" href="Home.html">Home</a>
<ul>
<li><a href="">SubMenu 1</a></li>
<li><a href="">SubMenu 2</a></li>
<li><a href="">SubMenu 3</a></li>
</ul>
</li>
<li><a href="Products.html">Products</a></li>
<li><a href="Services.html">Services</a></li>
<li><a href="Support.html">Support</a></li>
<li><a href="Order.html">Order</a></li>
<li><a href="News.html">News</a></li>
<li><a href="About.html">About</a></li>
</ul>
</div>
</body>
</html>

Gold_cpp

شنبه 06 خرداد 1391, 16:17 عصر

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html dir="rtl">
<head>
<title>Mini-Tab Preview</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
font-family: verdana, sans-serif;
font-size: 11px;
background: #eeeeee;
}

h4 {
font-size: 100%;
color: #999;
margin: 0;
}
.container {
width: 500px;
padding: 15px;
margin: 3px 0 20px 0;
border: 1px solid #ccc;
border-radius: 5px;
background: #fff;
}

/* rounded */

#nav {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}

#nav ul{ margin:0;padding:0;list-style:none;}

#nav li {
float:right;
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
position:relative;
}

#nav li ul{display:none;}

#nav li:hover ul{display:block;width:40em;position:absolute;top: 20px}

#nav a{display:block;}

#nav a:link, #nav a:visited {
float:right;
font-size: 10px;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}

#nav a:link.active, #nav a:visited.active, #nav a:hover {
color: #000;
background: url(rounded.gif) no-repeat bottom center;
}

</style>

</head>

<body>
<h4>Rounded Tabs</h4>
<div class="container">
<ul id="nav">

<li><a class="active" href="Home.html">Home</a>
<ul>
<li><a href="">SubMenu 1</a></li>
<li><a href="">SubMenu 2</a></li>
<li><a href="">SubMenu 3</a></li>
</ul>
</li>
<li><a href="Products.html">Products</a></li>
<li><a href="Services.html">Services</a></li>
<li><a href="Support.html">Support</a></li>
<li><a href="Order.html">Order</a></li>
<li><a href="News.html">News</a></li>
<li><a href="About.html">About</a></li>
</ul>
</div>
</body>
</html>