مشکل در طراحی منو [بایگانی]

ali-software

پنج شنبه 16 مهر 1394, 01:01 صبح

سلام دوستان
من می خواستم یک منو ابشاری ساده طراحی کنم ولی هر کاری می کنم به مشکل می خورم!
کد html:

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="test.css">
<title>button</title>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<ul id="sub">
<li><a href="#">Sub-Item1</a></li>
<li><a href="#">Sub-Item2</a></li>
<li><a href="#">Sub-Item3</a></li>
</ul>
<li><a href="#">Item4</a></li>
</ul>
</div>
</body>
</html>
کد css:

.nav{
background-color:lightblue;
border:3px solid black;
}

a{
text-decoration:none;
}

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

.nav a{
position:relative;
}

li{
border:3px solid black;
background-color:lightblue;
}

#sub{
display:none;
}

.nav ul li:hover #sub{
display:block;
}
با تشکر :عصبانی++:

ravand

پنج شنبه 16 مهر 1394, 07:28 صبح

<!DOCTYPE html>
<html>
<head>
<title>button</title>
<style type="text/css">
.soto{
float:left;
margin-left:10px;
}
ul.hoverMenu, ul.hoverMenu ul {
list-style: none;
margin: 0;
padding: 0;
position: positive;
}
ul.hoverMenu ul {
display: none; /*initially menu item is hidden*/;
position: absolute; /*absolute positioning is important for menu to float*/;
width: 60px;
padding: 0;
}
ul.hoverMenu li:hover > ul {
/* Hover effect for menu*/
display: block;
width: 60px;
position: absolute;
padding: 0;
}
</style>
</head>
<body>
<ul class="hoverMenu">
<li class="soto"><a href="timetable.html">Timetable</a>
<ul>
<li><a href="classes.html">Classes</a></li>
<li><a href="workshops.html">Workshops</a></li>
<li><a href="dances.html">Dances</a></li>
<li><a href="meals.html">Meals</a></li>
</ul>
</li>

<li class="soto"><a href="timetable.html">Timetable</a>
<ul>
<li><a href="classes.html">Classes</a></li>
<li><a href="workshops.html">Workshops</a></li>
<li><a href="dances.html">Dances</a></li>
<li><a href="meals.html">Meals</a></li>
</ul>
</li>

</ul>
</div>
</body>
</html>