CSS dropdown menu hover elemének pozicionálása
Sziasztok!
Szeretnék tanácsot kérni a következő problémámmal kapcsolatban;
Szeretnék lekódolni egy horizontális legördülő menüt, aminek a hover része a weblap beállított szélességéhez igazodna. A weblap 960px széles lenne, így a navigáció legördülő divíziójának is ezt a méretet szeretném megadni, ami sikerült; Viszont a pozicionálással gondban vagyok.
Mikor ráviszem az egeret a kívánt felületre, akkor legördül a felület, viszont a második elem ("second") már nem az oldal bal szélétől indul, így, ha be lesz rakva az oldalba, valószínűnek tartom, hogy az kimozdul, vagy eltolja az arculatot. El szeretném érni, hogy ha bármelyik elemre is viszem rá az egeret, akkor a legördülő divíziónak a kezdő pozíciója az oldal bal széle legyen, mint az első elemnél ("Explorer"). Így a weblap 960px széles layoutjának szélességéhez igazodna a legördülő elem, aminek ott is kellene maradnia -mármint az oldal keretén belül-, míg az elem használatban van.
A beillesztett példa jól szemlélteti, hogy mi is igazából a problémám. A design nem véletlenül nincs még berakva, hiszen ez még csak a GUI terve.
Tudom, hogy én hagytam ki, vagy írtam félre valamit, csak azt nem tudom, hogy mit.
Kérhetek ez ügyben valami kézenfekvő tanácsot?
Előre is köszönöm a segítséget!
Üdv!
html:
CSS:
■ Szeretnék tanácsot kérni a következő problémámmal kapcsolatban;
Szeretnék lekódolni egy horizontális legördülő menüt, aminek a hover része a weblap beállított szélességéhez igazodna. A weblap 960px széles lenne, így a navigáció legördülő divíziójának is ezt a méretet szeretném megadni, ami sikerült; Viszont a pozicionálással gondban vagyok.
Mikor ráviszem az egeret a kívánt felületre, akkor legördül a felület, viszont a második elem ("second") már nem az oldal bal szélétől indul, így, ha be lesz rakva az oldalba, valószínűnek tartom, hogy az kimozdul, vagy eltolja az arculatot. El szeretném érni, hogy ha bármelyik elemre is viszem rá az egeret, akkor a legördülő divíziónak a kezdő pozíciója az oldal bal széle legyen, mint az első elemnél ("Explorer"). Így a weblap 960px széles layoutjának szélességéhez igazodna a legördülő elem, aminek ott is kellene maradnia -mármint az oldal keretén belül-, míg az elem használatban van.
A beillesztett példa jól szemlélteti, hogy mi is igazából a problémám. A design nem véletlenül nincs még berakva, hiszen ez még csak a GUI terve.
Tudom, hogy én hagytam ki, vagy írtam félre valamit, csak azt nem tudom, hogy mit.
Kérhetek ez ügyben valami kézenfekvő tanácsot?
Előre is köszönöm a segítséget!
Üdv!
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="explorer.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Az eplorer tesztelése és fejlesztése -->
<nav><!-- mainnav -->
<div id="explorer"><!-- upnavigation -->
<!-- S: Explorer DIR -->
<ul class="dir">
<li><a href="#"><div class="dirtitle">Explorer</div><div class="diralt">Ez a DIR class ALT szövege</div></a>
<ul>
<li>
<div class="navdrop"><!-- S: navdrop -->
<p>Ebben egy szöveg van.</p>
</div><!-- E: navdrop -->
</li>
</ul>
</li>
<li><a href="#" >Second</a>
<ul>
<li>
<div class="navdrop"><!-- S: navdrop -->
<p>Második.</p>
</div><!-- E: navdrop -->
</li>
</ul>
</li>
<li><a href="#" >Lorem</a>
</li>
<li><a href="#" >Equilibrium</a>
</li>
</ul>
<!-- E: Explorer DIR -->
</div><!-- upnavigation -->
</nav><!-- mainnav -->
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="explorer.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Az eplorer tesztelése és fejlesztése -->
<nav><!-- mainnav -->
<div id="explorer"><!-- upnavigation -->
<!-- S: Explorer DIR -->
<ul class="dir">
<li><a href="#"><div class="dirtitle">Explorer</div><div class="diralt">Ez a DIR class ALT szövege</div></a>
<ul>
<li>
<div class="navdrop"><!-- S: navdrop -->
<p>Ebben egy szöveg van.</p>
</div><!-- E: navdrop -->
</li>
</ul>
</li>
<li><a href="#" >Second</a>
<ul>
<li>
<div class="navdrop"><!-- S: navdrop -->
<p>Második.</p>
</div><!-- E: navdrop -->
</li>
</ul>
</li>
<li><a href="#" >Lorem</a>
</li>
<li><a href="#" >Equilibrium</a>
</li>
</ul>
<!-- E: Explorer DIR -->
</div><!-- upnavigation -->
</nav><!-- mainnav -->
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
/*DIVISION MARKER*/
nav { border: #3d3d3d solid 1px; }
/* [DELETE] */
nav {
width: 700px; max-width: 700px;
height: 104px; max-height: 104px;
position: relative;
font-family: Verdana, Geneva, sans-serif;
outline: 0;
}
#explorer {
width: 700px; max-width: 700px;
height: 104px; max-height: 104px;
background: #FFF; /* Ide jöhet színezés, vagy pattern */
margin: 0; padding: 0; /* RESET */
text-align: left;
}
/*============================================================*/
/* ENGINE */
/*============================================================*/
#explorer ul {
margin: 0; padding: 0; display: block;
}
#explorer .dir li {
float: left; padding: 0;
}
#explorer .dir li ul li {
float: none;
}
#explorer ul li {
list-style: none; position: relative;
margin: 0; padding: 0;
}
#explorer ul ul {
display: none;
width: 10em; /*MOD*/
}
#explorer ul li:hover > ul {
display: block; position: absolute;
top: -20px; left: 100%;
}
#explorer li a {
display: block;
padding: 4px 7px;
width: auto;
}
/* HOVER vezérlő */
#explorer ul.dir > li:hover > ul {
width: 958px; max-width: 958px; min-width: 958px; /*original width: 960px. width=960-border(1+1)*/
height: 450px; max-height: 450px; min-height: 450px; /*original height: 461. height=461-border(1+1)-padding(10)*/
top: 82px; left: 0px; /*positions*/
text-align: left;
background: #c00;
border: #000 solid 1px;
padding-bottom: 10px;
z-index: 2;
}
#explorer a {
/*text-shadow: 1px 1px 1px #FFF;*/
outline: 0;
}
#explorer a:link, #explorer a:visited, #explorer a:hover {
color: #000;
font-size: 16px; font-weight: 100;
text-decoration: none;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 82px;
background: #c00; /*[MOD]*/
}
#explorer a:hover {
background: #c90;
padding-bottom: 82px;
}
/*==================================================================*/
.dir iframe {
width: 190px; max-width: 190px;
height: 116px; max-height: 116px;
margin-left: 2px;
border: #333 solid 3px;
}
/*explorer main bar style [DIR]*/
.dirtitle {
font-size: 16px; font-weight: 100;
color: #000; outline: 0;
}
.diralt {
font-size: 10px; font-weight: 100;
color: #000; outline: 0;
}
/* CSS Document */
/*DIVISION MARKER*/
nav { border: #3d3d3d solid 1px; }
/* [DELETE] */
nav {
width: 700px; max-width: 700px;
height: 104px; max-height: 104px;
position: relative;
font-family: Verdana, Geneva, sans-serif;
outline: 0;
}
#explorer {
width: 700px; max-width: 700px;
height: 104px; max-height: 104px;
background: #FFF; /* Ide jöhet színezés, vagy pattern */
margin: 0; padding: 0; /* RESET */
text-align: left;
}
/*============================================================*/
/* ENGINE */
/*============================================================*/
#explorer ul {
margin: 0; padding: 0; display: block;
}
#explorer .dir li {
float: left; padding: 0;
}
#explorer .dir li ul li {
float: none;
}
#explorer ul li {
list-style: none; position: relative;
margin: 0; padding: 0;
}
#explorer ul ul {
display: none;
width: 10em; /*MOD*/
}
#explorer ul li:hover > ul {
display: block; position: absolute;
top: -20px; left: 100%;
}
#explorer li a {
display: block;
padding: 4px 7px;
width: auto;
}
/* HOVER vezérlő */
#explorer ul.dir > li:hover > ul {
width: 958px; max-width: 958px; min-width: 958px; /*original width: 960px. width=960-border(1+1)*/
height: 450px; max-height: 450px; min-height: 450px; /*original height: 461. height=461-border(1+1)-padding(10)*/
top: 82px; left: 0px; /*positions*/
text-align: left;
background: #c00;
border: #000 solid 1px;
padding-bottom: 10px;
z-index: 2;
}
#explorer a {
/*text-shadow: 1px 1px 1px #FFF;*/
outline: 0;
}
#explorer a:link, #explorer a:visited, #explorer a:hover {
color: #000;
font-size: 16px; font-weight: 100;
text-decoration: none;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 82px;
background: #c00; /*[MOD]*/
}
#explorer a:hover {
background: #c90;
padding-bottom: 82px;
}
/*==================================================================*/
.dir iframe {
width: 190px; max-width: 190px;
height: 116px; max-height: 116px;
margin-left: 2px;
border: #333 solid 3px;
}
/*explorer main bar style [DIR]*/
.dirtitle {
font-size: 16px; font-weight: 100;
color: #000; outline: 0;
}
.diralt {
font-size: 10px; font-weight: 100;
color: #000; outline: 0;
}
Egy kis segítség (A layout)
A layout terve.
A képen az "Eplorer hover" mutatja, hogy az egeret minden menüpontra húzva a hovert ugyanakkora szélességgel és magassággal szeretném megjeleníteni, és a pozícióját is tartaná.
megoldás