www.webdeveloper.com
Results 1 to 4 of 4

Thread: Dropdown Menu Problem

  1. #1
    Join Date
    Jun 2011
    Posts
    64

    Question Dropdown Menu Problem

    I have a dropdown menu on my mobile compatible version of my site but the drop down item are off to the side when they show up after the original div has been hovered on. Here is what the problem looks like http://i55.tinypic.com/301q4ae.png how can I fix this?

    Code:
    <div id="wrap">
    		<div id="head">
            <img src="images/head_home.png" width="47" height="50" alt="home" /><img src="images/head_title.png" width="205" height="50" alt="title" /><div class="navMenu">		
            <ul>
    			<li class="outer"><a href="#"></a>
    				<ul class="drop">
    					<li class="inner"><a href="#">Item1</a></li>
    					<li class="inner"><a href="#">Item2</a></li>
    				</ul>
    			</li>
    		</ul>
            
            </div>
            </div><!--END HEAD-->
    
    		<div id="content">
            	<p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas adipiscing purus vitae faucibus. Suspendisse potenti. Nunc turpis quam, porta ac mollis ut, dignissim at tortor. Vestibulum fringilla turpis a erat elementum eget sodales ipsum imperdiet. Duis ligula risus, consequat id commodo at, tincidunt eget erat. Mauris nec eros at magna dictum varius in at orci. In hac habitasse platea dictumst. Duis vel sagittis est. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sollicitudin sagittis nisi, nec scelerisque ligula pretium in. Nulla non dui nisi. Nulla tempor ante ac urna consequat eu gravida est scelerisque. Etiam sed porta massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum consectetur condimentum tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Nam viverra, nisi nec porta volutpat, odio leo blandit mi, non sodales tortor sem auctor neque. Ut pharetra, ante in congue placerat, dui metus dapibus est, ut faucibus est ipsum id nulla. Nunc aliquam arcu a lorem imperdiet semper. 
                </p>
            </div><!--END CONTENT-->
    
    
    
    
    	</div><!--END WRAP-->


    Code:
    #wrap {
    	height:auto;
    	width:300px;
    	margin:0px;
    	padding:0px;
    }
    
    #head {
    	height:50px;
    	width:300px;
    }
    
    .navMenu {
    	background-image:url(images/head_menu.png);
    	height:50px;
    	width:48px;
    	float:right;
    	padding:0;
    }
    
    .navMenu ul {
    	margin:0;
    	padding:0;
    	line-height:50px;
    }
    
    .navMenu li {
    	margin:0;
    	padding:0;
    	list-style:none;
    	float:left;
    	position:relative;
    	background-color:transparent;
    }
    
    .outer {
    }
    
    .navMenu .inner {
    	background-color:#73736b;
    	font-family:Arial, Helvetica, sans-serif;
    	line-height:30px;
    	height:30px;
    	width:81px;
    	display:block;
    }
    
    .navMenu ul li a {
    	text-align:left;
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	text-decoration:none;
    	width:49px;
    	height:50px;
    	display:block;
    	color:#ff9a29;
    	padding-left:3px;
    }
    
    .navMenu ul ul {
    	position:absolute;
    	visibility:hidden;
    	top:30px;
    }
    
    .navMenu ul li:hover ul {
    	visibility:visible;
    }
    
    .navMenu li:hover {
    	background-color:transparent;
    }
    
    .navMenu ul li:hover ul li a:hover {
    	background:#ff9a29;
    	color:#FFF;
    	width:78px;
    	height:30px;
    	float:right;
    	padding-left:3px;
    }
    
    .navMenu a:hover {
    	color:#FFF;
    }
    
    .navMenu ul li:hover a {
    	color:#fff;
    }
    
    .navMenu ul li:hover li a {
    	color:#FFF;
    } 
    
    
    .clearFloat {
    	clear:both;
    	margin:0;
    	padding:0;
    }
    Thanks
    Thomas

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,132
    You can shift it over to the left by adjusting the left property here:

    Code:
    .navMenu ul ul {
    	position:absolute;
    	visibility:hidden;
    	top:30px;
            left: -100px;
    }
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Jun 2011
    Posts
    64

    Thumbs up Thanks

    Thanks a lot. All is sorted now!! (Also thanks for your help in my Mobile Compatible thread!)

    Thanks
    Thomas

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,132
    No problem!
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles