#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    100
    Rep Power
    2

    My CSS based drop-down menu going behind the wrapper. Help?


    HTML
    Code:
    <div class="menu" id="menu">
    	<ul>
    		<li><a class="home" id="home" href="">Home</a></li>
    			<li><a class="about" id="about" href="">About Us</a>
    			<ul>
    				<li><a href="">About Us</a></li>
    				<li><a href="">About us1</a></li>
    				<li><a href="">About us2</a></li>
    				<li><a href="">About usn</a></li>
    			</ul>
    		</li>
    		<li><a class="prod" id="prod" href="">Products</a>
    			<ul>
    				<li><a href="">Product1</a></li>
    				<li><a href="">Product2</a></li>
    				<li><a href="">Product3</a></li>
    			</ul>
    		</li>
    		<li><a class="contact" id="contact" href="">Contact</a>
    			<ul>
    				<li><a href="">Contact1</a></li>
    				<li><a href="">Contact2</a></li>
    				<li><a href="">Contact3</a></li>
    			</ul>
    		</li>
    		<li><a class="program" id="program" href="">Programmes</a>
    			<ul>
    				<li><a href="">Program1</a></li>
    				<li><a href="">Program2</a></li>
    			</ul>
    		</li>
    		<li><a class="gallery" id="gallery" href="">Galleries</a>
    			<ul>
    				<li><a href="">Photo Gallery</a></li>
    				<li><a href="">Video Gallery</a></li>
    			</ul>
    		</li>
    		<li><a class="gallery" id="gallery" href="">Downloads</a>
    			<ul>
    				<li><a href="">Download1</a></li>
    				<li><a href="">Download2</a></li>
    			</ul>
    		</li>
    	</ul>
    </div>
    CSS of my wrapper
    Code:
    div.wrapper 
    {
    	box-shadow: 0 0 30px 5px #999;
    	-moz-box-shadow: 0 0 30px 5px #999;
    	-webkit-box-shadow: 0 0 30px 5px #999;
    	-msie-box-shadow: 0 0 30px 5px #999;
    	-o-box-shadow: 0 0 30px 5px #999;
    	border-radius: 10px 10px 10px 10px;
    	-o-border-radius: 10px 10px 10px 10px;
    	-msie-border-radius: 10px 10px 10px 10px;
    	-webkit-border-radius: 10px 10px 10px 10px;
    	-moz-border-radius: 10px 10px 10px 10px;
    	background-color: #E8E8E8;
    	width: 1024px; 
    	height: 1400px;
    	margin: auto;
    	position: relative;
    }
    CSS of my drop-down menu
    Code:
    div.menu
    {
    	font-family: serif, Verdana, Geneva, Arial, helvetica, sans-serif;
    	height: 45px;
    	width: 1024px;
    	background-color: #06472F;
    	-msie-border-radius: 0px 0px 5px 5px;
    	-o-border-radius: 0px 0px 5px 5px;
    	-moz-border-radius: 0px 0px 5px 5px;
    	-webkit-border-radius: 0px 0px 5px 5px;
    	border-radius: 0px 0px 5px 5px;
    	display: table-cell;
    }
    
    div.menu ul 
    {
    	font-size: 24px;
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    div.menu ul li 
    {
    	display: block;
    	position: relative;
    	float: left;
    	list-style: none;
    }
    
    div.menu ul li ul 
    {
    	display: none;
    }
    
    div.menu ul li a 
    {
    	border-radius: 2px;
    	-msie-border-radius: 2px;
    	-o-border-radius: 2px;
    	-webkit-border-radius: 2px;
    	-moz-border-radius: 2px;
    	display: block;
    	text-decoration: none;
    	color: #FFFFFF;
    	border-top: 1px solid #FFFFFF;
    	padding: 5px 15px 5px 15px;
    	background: #06472F;
    	margin-left: 1px;
    	white-space: nowrap;
    }
    
    div.menu ul li a:hover 
    {
    	color: #FFFF00;
    }
    
    div.menu li:hover ul 
    {
    	display: block;
    	position: absolute;
    }
    
    div.menu li:hover li 
    {
    	float: none;
    	font-size: 25px;
    }
    
    div.menu li:hover li a:hover 
    {
    	background-color: #000000;
    	color: #FFFF00;
    }
    Now, when I use Chrome and zoom-out, when it reaches 33%, it actually goes to the next line. How may I prevent this using only CSS?
    [Problem solved. Requesting to close this thread.]
    Last edited by Akshat1; October 18th, 2013 at 02:53 AM.

IMN logo majestic logo spyfu logo threadwatch logo seochat tools logo