Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,093
    Thanks
    297
    Thanked 12 Times in 12 Posts

    Arrow mega menu: changing the position of sub menu

    Hi all,

    im trying to create a mega menu and have followed a tutorial to do so, and it looks as it should

    i was wondering if it were at all possible to:

    1/
    have the sub menus appear directly under the menu like the first and last sub menu and not to be positioned relitave the their parent li menu item?
    here is my test page

    can anyone help me acheive this please?

    many thanks
    Luke

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello LJackson,
    Instead of making the li relative, using position: relative; on the parent ul will position each of your dropped divs from the same point.
    Like this (changes highlighted in red):
    Code:
    #menu li {
    	float:left;
    	text-align:center;
    /*position:relative;*/
    	padding: 4px 10px 4px 10px;
    	margin-right:30px;
    	margin-top:7px;
    	border:none;
    }
    #menu {
    	list-style:none;
    	width:940px;
    	margin:30px auto 0px auto;
    	height:53px;
    	padding:10px 20px 0px 20px;
    
    	/* Rounded Corners */
    
    	-moz-border-radius: 10px;
    	-webkit-border-radius: 10px;
    	border-radius: 10px;
    
    	/* Background color and gradients */
    
    	background: #014464;
    	background: -moz-linear-gradient(top, #0272a7, #013953);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
    
    	/* Borders */
    
    	border: 1px solid #002232;
    
    	-moz-box-shadow:inset 0px 0px 1px #edf9ff;
    	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
    	box-shadow:inset 0px 0px 1px #edf9ff;
    position: relative;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    LJackson (05-01-2011)

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,093
    Thanks
    297
    Thanked 12 Times in 12 Posts
    wow thanks so much mate!!!!!!!!!!

    works a treat
    cheers

  • #4
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,093
    Thanks
    297
    Thanked 12 Times in 12 Posts
    ok im really stuck, im in the process of adding data to the drop downs, 'retail stores' to be specific, you will notice when you hover over discount codes a list of stores appear grouped by letter.

    now the trouble im having is that i want the stores to appear as they are 'one under another' but instead of continuing outside of the div create a new 'column' inside and carry on so it woul look something like this

    a f k p u
    b g l q v
    c h m r w
    d i n s x
    e j o t y
    z

    and not
    a b c d e f
    g h i j k l m
    n o p q r s
    t u v w x y z

    here is my page again
    any ideas how this can be acheived pref just using css

    many thanks
    Last edited by LJackson; 05-02-2011 at 02:57 PM.

  • #5
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,093
    Thanks
    297
    Thanked 12 Times in 12 Posts
    ok ive kinda sorted it but its meant that ive just reused a section of code several times for a group of stores... but can anyone condense it for me so that its not such a mess.

    Code:
        <?php
    	mysql_query("SET NAMES 'utf8'");
    
    	$query = mysql_query("SELECT UPPER(SUBSTRING(stores.storeName,1,1)) 
    	AS letter, storeID, storeName, rating 
    	FROM stores ORDER BY storename ASC")or die(mysql_error());
    
    	while ($records = @mysql_fetch_array ($query))
    	{
    		$alpha[$records['letter']] = !isset($alpha[$records['letter']]) ? 1 : $alpha[$records['letter']] + 1;
    		${$records['letter']}[$records['storeID']] = $records['storeName'];
    	}
    		
    		
    	echo "<ul>";
    	// Create Alpha link Listing;
    	echo "<li>";
    	echo "<div style='height:14px; font-weight:bold;'>0-9</div>";
    	foreach(range('0','9') as $i)
    	{
    		if (array_key_exists ("$i", $alpha))
    		{
    			$count = 1;
    			foreach ($$i as $key=>$value)
    			{
    				$stores = "SELECT *
    				FROM stores 
    				WHERE storeID = '$key'";
    				$query  = mysql_query($stores);?>
    				<?php
    				while ($row = mysql_fetch_array($query))
    				{
    					$name = $row['name'];
    					$storename = trim(htmlspecialchars($row['storeName']));
    					$ids = $row['storeID'];
    					$link = htmlspecialchars($row['storeLink']);?>
    					<a href='<?php echo $link?>'><?php echo $storename.", ";?></a><?php
    					$count++;
    				}
    			}
    		}
    	}
    	echo "</li>";
    	
    	// Create Alpha link Listing;
    	foreach(range('A','E') as $i)
    	{
    		if (array_key_exists ("$i", $alpha))
    		{
    			$count = 1;
    			echo "<li>";
    			echo "<div style='height:14px; font-weight:bold;'>".$i."</div>";
    			foreach ($$i as $key=>$value)
    			{
    				$stores = "SELECT *
    				FROM stores 
    				WHERE storeID = '$key'";
    				$query  = mysql_query($stores);?>
    				<?php
    				while ($row = mysql_fetch_array($query))
    				{
    					$name = $row['name'];
    					$storename = trim(htmlspecialchars($row['storeName']));
    					$ids = $row['storeID'];
    					$link = htmlspecialchars($row['storeLink']);?>
    					<a href='<?php echo $link?>'><?php echo $storename.", ";?></a><?php
    					$count++;
    				}
    			}
    				echo "</li>";
    		}
    		#echo "</ul>";
    	}
    	echo "</ul>";
    	
    	echo "<ul>";
    	
    	// Create Alpha link Listing;
    	foreach(range('F','L') as $i)
    	{
    		if (array_key_exists ("$i", $alpha))
    		{
    			$count = 1;
    			echo "<li>";
    			echo "<div style='height:14px; font-weight:bold;'>".$i."</div>";
    			foreach ($$i as $key=>$value)
    			{
    				$stores = "SELECT *
    				FROM stores 
    				WHERE storeID = '$key'";
    				$query  = mysql_query($stores);?>
    				<?php
    				while ($row = mysql_fetch_array($query))
    				{
    					$name = $row['name'];
    					$storename = trim(htmlspecialchars($row['storeName']));
    					$ids = $row['storeID'];
    					$link = htmlspecialchars($row['storeLink']);?>
    					<a href='<?php echo $link?>'><?php echo $storename.", ";?></a><?php
    					$count++;
    				}
    			}
    				echo "</li>";
    		}
    		#echo "</ul>";
    	}
    	echo "</ul>";
    
    	echo "<ul>";
    	
    	// Create Alpha link Listing;
    	foreach(range('M','R') as $i)
    	{
    		if (array_key_exists ("$i", $alpha))
    		{
    			$count = 1;
    			echo "<li>";
    			echo "<div style='height:14px; font-weight:bold;'>".$i."</div>";
    			foreach ($$i as $key=>$value)
    			{
    				$stores = "SELECT *
    				FROM stores 
    				WHERE storeID = '$key'";
    				$query  = mysql_query($stores);?>
    				<?php
    				while ($row = mysql_fetch_array($query))
    				{
    					$name = $row['name'];
    					$storename = trim(htmlspecialchars($row['storeName']));
    					$ids = $row['storeID'];
    					$link = htmlspecialchars($row['storeLink']);?>
    					<a href='<?php echo $link?>'><?php echo $storename.", ";?></a><?php
    					$count++;
    				}
    			}
    				echo "</li>";
    		}
    		#echo "</ul>";
    	}
    	echo "</ul>";
    
    	echo "<ul>";
    	
    	// Create Alpha link Listing;
    	foreach(range('S','Z') as $i)
    	{
    		if (array_key_exists ("$i", $alpha))
    		{
    			$count = 1;
    			echo "<li>";
    			echo "<div style='height:14px; font-weight:bold;'>".$i."</div>";
    			foreach ($$i as $key=>$value)
    			{
    				$stores = "SELECT *
    				FROM stores 
    				WHERE storeID = '$key'";
    				$query  = mysql_query($stores);?>
    				<?php
    				while ($row = mysql_fetch_array($query))
    				{
    					$name = $row['name'];
    					$storename = trim(htmlspecialchars($row['storeName']));
    					$ids = $row['storeID'];
    					$link = htmlspecialchars($row['storeLink']);?>
    					<a href='<?php echo $link?>'><?php echo $storename.", ";?></a><?php
    					$count++;
    				}
    			}
    				echo "</li>";
    		}
    		#echo "</ul>";
    	}
    	echo "</ul>";
    	
    	
    	?>
    would appreciate it a lot, thanks
    Luke


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •