PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Fri Jul 20, 2018 11:11 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 4 posts ] 
Author Message
PostPosted: Thu Nov 03, 2011 5:15 am 
Offline
Forum Regular
User avatar

Joined: Wed Aug 27, 2008 3:36 am
Posts: 958
Location: Sweden/Sthlm
Hi,

Trying to make a mega menu but having problem aligning my sub items..

I've tried float, display: block and tons of other stuff but can't get i to align properly.

Syntax: [ Download ] [ Hide ]
<html>
<head>

<style>
.menu ul { padding: 10px;}
.menu ul li
{
        position: relative;    
        top: 0; left: 0;        
        float: left;
        background: #dcdcdc;
        padding: 10px;
}

.menu ul li .content
{
        position: absolute;
        top: 100%; left: 0;
        background: green;
        width: 500px;
        float: left;
}
.menu ul li .content ul { float: left;}
.menu ul li .content ul li { float: none; background: lime;}
.menu ul li .content ul li .content2
{
        position: absolute;
        top: 0; left: 200;
        float: left;
        background: red;
}
#selected { background: #fff; color: #000;}
</style>

</head>

<body>

<div class="menu">
        <ul id="top">
                <li>my menu</li>
                <li>
                        my menu2
                <div class="content">
                        <ul>
                                <li>sub1a</li>
                                <li id="selected">
                                        sub1b
                                        <div class="content2">
                                                <ul>
                                                        <li>sub2a</li>
                                                        <li>sub2b</li>
                                                        <li>sub2c</li>
                                                        <li>sub2d</li>
                                                </ul>
                                        </div>
                                </li>                          
                                <li>sub1c</li>
                        </ul>
                </div>
                </li>
                <li>my menu2</li>
        </ul>
</div>

</body>
</html>
 


Image

I want sub2a to align horizontaly with sub1a. So no matter which sub1-item i hover it should always display the sub2-item on top of the green bg (or aligned with sub1a).

Any ideas?


Top
 Profile  
 
PostPosted: Fri Nov 04, 2011 3:37 pm 
Offline
Forum Regular
User avatar

Joined: Sun Dec 29, 2002 6:40 pm
Posts: 908
Location: VA
Try setting a negative top and left margin on the second sub-menu to force it back into place because your padding is throwing everything off.


Top
 Profile  
 
PostPosted: Fri Nov 04, 2011 3:42 pm 
Offline
Forum Regular
User avatar

Joined: Wed Aug 27, 2008 3:36 am
Posts: 958
Location: Sweden/Sthlm
The left margin is no problem, I can align it next to the first sub menu. If i set a specific top margin it will not align anyway though because the top margin differs depending on which link you hover.


Top
 Profile  
 
PostPosted: Mon Jan 02, 2012 9:42 am 
Offline
Forum Regular
User avatar

Joined: Wed Aug 27, 2008 3:36 am
Posts: 958
Location: Sweden/Sthlm
Hi,

The answer is to set .menu ul li .content ul li to position: static.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 4 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 3 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group