ساخت منو با html و css [بایگانی]

mojtaba.baghban

پنج شنبه 30 مهر 1388, 11:09 صبح

یه منو با html و css ساختم ولی یخورده مشکل داره نگاه کنید ببینید مشکلش کجاست
کذش اینه:

<!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">

<head>
<title></title>
<style type="text/css">
#menu{
}

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

#menu ul li{
display: block;
float: left;
background-color: #0000FF;
color: white;
position: relative;
margin-left: 1px;
padding: 5px 15px 5px 15px;
white-space: nowrap;
}

#menu li:hover ul li a{
color: white;
text-decoration: none;
margin: 0;
padding: 0;
}

#menu ul li:hover{
background-color: #FF00FF;
}
#menu li ul{
display: none;
}
#menu li:hover ul{
display: block;
position: absolute;
}
#menu li:hover ul li{
float: none;
margin-top: 1px;
background-color: #006666;
}
#menu li:hover ul li:hover{
background-color: #FF6666;
}

</style>
</head>

<body>
<div id="menu">
<ul>
<li>Home
<ul>
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li><a href="">item3</a></li>
<li><a href="">item4</a></li>
</ul>

</li>
<li>About
<ul>
<li><a href="">Gdf dgs</a></li>
<li><a href="">Somewhere Else</a></li>
<li><a href="">item3</a></li>
<li><a href="">dgdsfgsd</a></li>
</ul>
</li>
<li>Product

<ul>
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li><a href="">item3</a></li>
<li><a href="">item4</a></li>
</ul>
</li>
<li>Contact
<ul>
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li><a href="">item3</a></li>
<li><a href="">item4</a></li>
</ul>
</li>
</ul>

</div>

</body>

</html>

mojtaba.baghban

پنج شنبه 30 مهر 1388, 12:02 عصر

جون هر کی دوست داری جواب بده

hosseinkhosravi

پنج شنبه 30 مهر 1388, 13:33 عصر

کدهای زیر را به بخش استایل اضافه کن:

#menu ul li ul{
margin-top: 5px;
margin-left: -15px;
padding: 0px;
}
#menu ul li ul li{
padding: 5px;
}