+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: 3rd level css menu problem (/thread-3rd-level-css-menu-problem)
3rd level css menu problem - alaneku - 29-04-2012
RE: 3rd level css menu problem - Kartofelek - 29-04-2012
CSS: line 197
You set position to relative. Delete this and leave position:absolute (you set this in 216).
RE: 3rd level css menu problem - alaneku - 29-04-2012
RE: 3rd level css menu problem - Kartofelek - 30-04-2012
add this to your css:
Kod:
.topmenu .level2 {position:relative;}Kod:
.topmenu li {position:relative;}Element with position:absolute is positioned to the first parent element with position:relative
RE: 3rd level css menu problem - alaneku - 03-05-2012
(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
RE: 3rd level css menu problem - Kartofelek - 04-05-2012
Yep. they have position:relative
Kod:
<ul>
<li position:relative>
<ul position:absolute right:0; top:0>
<li pos:relative></li>
<li pos:relative></li>
<li pos:relative>
<ul position:absolute right:0; top:0>
<li pos:relative></li>
<li pos:relative></li>
<li pos:relative></li>
</ul>
</li>
</ul>
</li>
<li position:relative></li>
</ul>RE: 3rd level css menu problem - alaneku - 04-05-2012
Many many thanks to both of you, now the menu works at last. I will go back again and clean up the complete mess I had made of the file by chaning everything I could think of - a good learning experience for me !!!!
It was the
Kod:
.topmenu li {
position: relative;
}that made the difference. What threw me is that this line was not in the original code for the 2 level version of the menu that I modified.
Much appreciated.
Alan