03-05-2012, 23:24
(30-04-2012, 03:17)kornell napisał(a):(30-04-2012, 00:20)Kartofelek napisał(a): add this to your css:
ORKod:.topmenu .level2 {position:relative;}
Kod:.topmenu li {position:relative;}
Element with position:absolute is positioned to the first parent element with position:relative
check this out
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Thank you both for your help the link to the positioning article has help me understand more.
However I have tried all combination of relative and absolute I can think of and none of them work.
The menu is in a clearfix class does this makes any difference ? here is the html code
Kod:
<?php if (!defined('CMS')) exit; ?>
<?php echo $this->doctypeDeclaration(); ?>
<html<?php echo $this->htmlAttributes(); ?>>
<head>
<?php
$site->addCss(BASE_URL.THEME_DIR.THEME.'/960.css');
$site->addCss(BASE_URL.THEME_DIR.THEME.'/site.css');
$site->addCss(BASE_URL.THEME_DIR.THEME.'/ip_content.css');
$site->addCss(BASE_URL.LIBRARY_DIR.'js/colorbox/themes/2/colorbox.css');
echo $site->generateHead();
?>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body<?php if ($site->managementState()) { echo ' class="manage"'; } ?>>
<div class="container_12 wrapper">
<header class="grid_12">
<img class="sitename" src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/img/logo.png">
<div class="languages">
<?php echo $site->generateBlock('ipLanguages'); ?>
</div>
<?php echo $site->generateBlock('ipSearch'); ?>
<img class="banner" src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/img/header.jpg" alt="">
<div class="topmenu clearfix">
<?php
require_once (BASE_DIR.LIBRARY_DIR.'php/menu/common.php');
$menuTop = new Library\Php\Menu\Common();
echo $menuTop->generateSubmenu('top', null, 3); //$zoneName, $parentElementId, $depthLimit
?>
</div>
</header>
<div class="main grid_9 right">
<div class="breadcrumb">
<?php echo $site->generateBlock('ipBreadcrumb'); ?>
</div>
<?php echo $site->generateBlock('main'); ?>
</div>
<div class="side grid_3 left">
<nav class="collapse"><?php /* add class="collapse" to <nav> to hide second level by default */ ?>
<?php
require_once (BASE_DIR.LIBRARY_DIR.'php/menu/common.php');
$menuTop = new Library\Php\Menu\Common();
echo $menuTop->generate('top');
echo $menuTop->generate('top', 2, 3); //$zoneName, $parentElementId, $depthLimit
?>
</nav>
<aside>
<?php echo $site->generateBlock('side'); ?>
</aside>
</div>
<div class="clear"></div>
<footer class="clearfix">
<div class="grid_12 clearfix">
<p class="left">Theme "LT pagan"</p>
<p class="right">Drag & drop with <a href="http://www.impresspages.org">ImpressPages CMS</a></p>
</div>
</footer>
</div>
<?php
$site->addJavascript(BASE_URL.LIBRARY_DIR.'js/jquery/jquery.js');
$site->addJavascript(BASE_URL.LIBRARY_DIR.'js/colorbox/jquery.colorbox.js');
$site->addJavascript(BASE_URL.THEME_DIR.THEME.'/site.js');
echo $site->generateJavascript();
?>
</body>
</html>Both the css and the html are from a theme from a cms (impresspages.org). The original theme had a 2 level drop down. I modified the css for a 3 level drop down.
I had a look at this three level menu in a clearfix class:
http://css.find-info.ru/css/011/ch07lev1sec4.html
and there seems to be no relative or absolute positioning in the lower levels.
Now I am even more confused!!!
Alan
