Merhaba,
Resimde göründüğü gibi açılır menü slaytın altında kalıyor. Araştırma sonuçlarıma göre "overflow:hidden" sorunumu giderecek gibi duruyor fakat nereye yerleştirsem bir türlü olmadı. Konu hakkında yardımcı olabilecek arkadaş varsa sevinirim.
.html'deki linkin içeriği
.css içeriği
Resimde göründüğü gibi açılır menü slaytın altında kalıyor. Araştırma sonuçlarıma göre "overflow:hidden" sorunumu giderecek gibi duruyor fakat nereye yerleştirsem bir türlü olmadı. Konu hakkında yardımcı olabilecek arkadaş varsa sevinirim.
.html'deki linkin içeriği
Kod:
<nav id="main-nav">
<ul class="group">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<style>
body{
margin:0;
padding:0;
}
ul#menu, ul#menu ul{
padding: 0;
margin: 0;
list-style: none;
}
ul#menu li {
float: left;
position: relative;
width: 150px;
}
ul#menu li ul {
display: none;
position: absolute;
top: 19px; /* yukseklik 15px + sonradan eklenecek paddingler 4px toplam 19px */
left: 0;
}
ul#menu li > ul {
top: auto;
left: auto;
}
ul#menu li a {
font: bold 13px Verdana, sans-serif;
display: block;
margin: 0 20px;
padding: 2px 3px;
color: #000;
text-decoration: none;
}
ul#menu li a:hover {
color: #a00;
}
ul#menu li:hover ul, ul#menu li.over ul {
display: block;
}
</style>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
</head>
<body>
<ul id="menu">
<li><a href="#">Başlık 1</a></li>
<li><a href="#">Başlık 2</a>
<ul>
<li><a href="#">Alt Başlık 2-1</a></li>
<li><a href="#">Alt Başlık 2-2 </a></li>
<li><a href="#">Alt Başlık 2-3</a></li>
</ul>
</li>
<li><a href="#">Alt Başlık 3</a>
<ul>
<li><a href="#">Alt Başlık 3-1</a></li>
<li><a href="#">Alt Başlık 3-2</a></li>
<li><a href="#">Alt Başlık 3-3</a></li>
<li><a href="#">Alt Başlık 3-4</a></li>
<li><a href="#">Alt Başlık 3-5</a></li>
</ul>
</li>
</ul>
</body>
</ul>
</nav>.css içeriği
Kod:
#logo { position: absolute; top: 11px; left: 20px; }
/* ------------------- Masthead ------------------- */
/* ------------------- Navigation ------------------- */
#main-nav { position: absolute; right: 0; bottom: 15px; }
#main-nav li { float: left; margin: 0 20px; color: #000; font: 13px/1 Verdana, sans-serif; }
#main-nav a { color: #000; }
/* ------------------- Navigation ------------------- */
/* ------------------- Content ------------------- */
#slogan { margin-bottom: 10px; color: #303030; font: italic 25px "Calisto MT", Garamond, serif; text-align: center; }
/* --------------- Tagline --------------- */
#tagline { position: relative; padding: 10px 10px 0 10px; background: #efefec; }
#slides { position: relative; overflow: hidden; height: 355px; }
.slide { position: absolute; top: 0; left: 0; }
.nextprev { position: absolute; top: 155px; display: block; cursor: pointer; width: 34px; height: 64px; background: url(../images/next-prev.png) no-repeat; text-indent: -9999px; }
.prev { left: 10px; background-position: top left; }
.next { right: 10px; background-position: top right; }
#slide-nav { width: 980px; height: 58px; margin: 10px 0 0 -10px; padding: 20px 0; background: #fff; }
.slide-nav { position: absolute; overflow: hidden; width: 816px; height: 58px; margin: 0 auto; }
.slide-nav li { float: left; }
.slide-nav a { display: inline-block; overflow: hidden; margin: 0 12px; }
.slide-nav img { padding: 3px; border: 1px solid #d9d9d9; }
.slide-nav .current img { border: 1px solid #000; }
#slide-nav-carousel { position: relative; width: 816px; height: 58px; margin: 0 auto; padding: 0 30px; }
#slide-nav-thumbs { position: relative; overflow: hidden; width: 816px; height: 58px; }
.carousel-nav { position: absolute; top: 14px; display: block; cursor: pointer; width: 30px; height: 30px; background: url(../images/carousel-nav.png) no-repeat; text-indent: -9999px; }
#carousel-prev { left: 0; background-position: top left; }
#carousel-next { right: 0; background-position: top right; }
/* --------------- Tagline --------------- */
/* --------------- Featured --------------- */
#featured article { float: left; width: 202px; margin-left: 30px; color: #787878; font-size: 13px; }
#featured article:first-child { margin-left: 0; }
#featured article h1 { margin-bottom: 5px; background: #f0eeec; color: #303030; font-size: 14px; font-style: bold; line-height: 25px; text-indent: 3px; }
#featured article img { margin-bottom: 25px; padding: 1px; border: 1px solid #d9d9d9; }
#featured article p:last-child { margin-bottom: 0; }
#featured article a { color: #fdb812; font-style: italic; }
#featured1 article { float: left; width: 100%; margin-left: 30px; color: #787878; font-size: 13px; }
#featured1 article:first-child { margin-left: 0; }