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 4 of 4
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    15
    Thanks
    0
    Thanked 1 Time in 1 Post

    box-shadow and multi-column drop down HELP

    http://www.imagraphicdesigner.com/ro...calceclassico/

    Above is the link of the example. I'm trying to add a shadow too all the drop down menu but when I do it, it does it each column list on the Science Info. My goal is to just have the shadow on around the whole column and not each of them. Can anyone help me? I'm thinking it should be quick.

    Code:
    <div class="nav">
    
                    <ul>
                        <li id="navScience"><a href="#" id="current">science info</a>
                            <ul id="navFirst">
                                <li><strong>science</strong></li>
                                <li><a href="#" title="">Chemical Properties of Limewash Paints &amp; Plasters</a></li>
                                <li><a href="#" title="">Chemical Properties of Potassium Silicates Paints</a></li>
                                <li><a href="#" title="">Chemical Properties of Silossanic Paints</a></li>
                                <li><a href="#" title="">Mineral Paints versus Latex Paints</a></li>
                                <li><a href="#" title="">The Truth About VOC</a></li>
                                <li><a href="#" title="">Sick Building Syndrome SBS</a></li>
                                <li><a href="#" title="">Humidity &amp; Mold as a Factor in SBS</a></li>
                                <li><a href="#" title="">Breathable &amp; Permeable Paints &amp; Plasters </a></li>
                                <li><a href="#" title="">A House that Breathes</a></li>
                            </ul>
    						<ul id="navSecond">
                                <li><strong>history</strong></li>
                                <li><a href="#" title="">Lime Wash Paints</a></li>
                                <li><a href="#" title="">Potassium Silicate Paints</a></li>
                                <li><a href="#" title="">Marmorino Plasters</a></li>
                                <li><a href="#" title="">Grassello di Calce (Venetian Plasters)</a></li>
                                <li><a href="#" title="">Hydraulic Lime Cement Stuccos</a></li>
                            </ul>
    						<ul id="navThird">
                            	<li><strong>Building Technologies</strong></li>
                                <li><a href="#" title="">Ancient Construction Technologies</a></li>
                                <li><a href="#" title="">Passive Construction Buildings</a></li>
                                <li><a href="#" title="">Earth Walls</a></li>
                                <li><a href="#" title="">Bale Walls</a></li>
                                <li><a href="#" title="">Solar Energy Applications</a></li>
                                <li><a href="#" title="">Environmental Science &amp; Technological Offerings</a></li>
                           </ul>
                        </li>
                        <li><a href="#">portfolio</a></li>
                        <li><a href="#">products</a>
                            <ul>
                                <li><a href="#" title="">Interior Products</a></li>
                                <li><a href="#" title="">Exterior Products</a></li>
                                <li><a href="#" title="">Organic Products (BIO)</a></li>
                                <li><a href="#" title="">ECO Sustainable Products (ECO)</a></li>
                                <li><a href="#" title="">Painting BioDomus for Dummies</a></li>
                                <li><a href="#" title="">Diluting Paints for Dummies</a></li>
                            </ul>
                        </li>
                        <li><a href="#">newsstand</a></li>
                        <li><a href="#">video</a></li>
                        <li><a href="#">contact</a>
                            <ul>
                                <li><a href="#">about</a></li>
                            </ul>
                        </li>
                    </ul>
                    
                </div><!-- End Nav -->
    Code:
    .nav	{
    	font-family:'Book', Helvetica, sans-serif;
    	text-transform:capitalize;
    	font-size:16px;
    	color:white;
    	margin:14px 0 0 0;
    	clear:right;
    	float:right;
    	text-decoration:none;
    	position:relative;
    	z-index:10000;
    }
    
    .nav ul	{
    	height:35px;
    	list-style:none;
    	margin:0;
    	padding:0;
    	z-index:80000;
    }
    
    .nav li	{
    	float:left;
    	padding:0px;
    }
    
    .nav li a	{
    	color:white;
    	display:block;
    	font-weight:normal;
    	text-transform:uppercase;
    	line-height:35px;
    	border:3px solid rgba(0, 0, 0, .0);
    	margin:0 3px 0 3px;
    	padding:0px 10px;
    	text-align:center;
    	text-decoration:none;
    	-webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    	-webkit-transition: all .2s ease-out;
        -moz-transition: all .2s ease-out;
        -o-transition: all .2s ease-out;
        -ms-transition: all .2s ease-out;
    	transition: all .2s ease-out;
    	z-index:900004;
    }
    
    .nav li a:hover, .nav ul li:hover a	{
    	background:#000;
    	border:3px solid #2C2C2C;
    	opacity:1;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    	-webkit-transition: all .2s ease-in;
        -moz-transition: all .2s ease-in;
        -o-transition: all .2s ease-in;
        -ms-transition: all .2s ease-in;
    	transition: all .2s ease-in;
    	z-index:900004;
    }
    
    .nav li ul	{
    	background:#333333;
    	display:none;
    	height:auto;
    	padding:0px;
    	margin:0px;
    	border:0px;
    	position:absolute;
    	width:auto;
    	z-index:900004;
    	/*top:1em;
    	/*left:0;*/
    }
    
    #navScience	ul li	{
    	-webkit-box-shadow:none !important;
    	-moz-box-shadow: none !important;
    	box-shadow: none !important;
    }
    
    #navScience	ul	{
    	background:#333333;
    	border-radius: 3px;
    	height:346px;
    	border-radius:3px;
    	-webkit-box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .6);
    	-moz-box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .6);
    	box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .6);
    }
    
    .nav li:hover ul	{
    	display:block;
    	-webkit-border-radius: 0px 3px 3px 3px;
    	-moz-border-radius: 0px 3px 3px 3px;
    	-ms-border-radius: 0px 3px 3px 3px;
    	-o-border-radius: 0px 3px 3px 3px;
    	border-radius: 0px 3px 3px 3px;
    	-webkit-box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .6);
    	-moz-box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .6);
    	box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .6);
    	z-index:900001;
    	margin:-3px 0 0 3px;
    }
    
    .nav li li	{
    	background:url('images/sub_sep.gif') bottom left no-repeat;
    	display:block;
    	float:none;
    	margin:-2px 0;
    	padding:0;
    	width:auto;
    }
    
    .nav li:hover li a	{
    	background:black;
    	border-top:1px solid #2C2C2C !important;
    	border-bottom:1px solid #2C2C2C !important;
    }
    
    .nav li:hover li:first-child	{
    	margin-top:2px;
    }
    
    .nav li:hover li:last-child	{
    	margin-bottom:2px;
    }
    
    .nav strong	{
    	font-size:15px;
    	margin:8px 0 6px 13px;
    	display:block;
    }
    
    .nav li ul a	{
    	display:block;
    	height:35px;
    	font-family:Arial, Helvetica, sans-serif !important;
    	text-transform:capitalize;
    	font-size:14px;
    	color:#999;
    	font-style:normal;
    	font-weight:normal;
    	margin:0;
    	padding:0px 10px 0px 10px;
    	text-align:left;
    }
    
    .nav li ul a:hover, .nav li ul li:hover a	{
    	background:#161515;
    	border:3px solid rbga(0, 0, 0, .0);
    	color:#ffffff;
    	text-decoration:none;
    }
    
    .nav p	{
    	clear:left;
    }
    
    #navFirst	{
    	margin:-2px 0 0 -260px;
    	width:360px;
    	-webkit-box-shadow:0 !important;
    	-moz-box-shadow:0 !important;
    	box-shadow:0 !important;
    }
    
    #navSecond	{
    	margin:-2px 0 0 90px;
    	-webkit-box-shadow:0 !important;
    	-moz-box-shadow:0 !important;
    	box-shadow:0 !important;
    }
    
    #navThird	{
    	margin:-2px 0 0 351px;
    	-webkit-box-shadow:0 !important;
    	-moz-box-shadow:0 !important;
    	box-shadow:0 !important;
    }

  • #2
    New Coder
    Join Date
    May 2012
    Posts
    15
    Thanks
    0
    Thanked 1 Time in 1 Post
    What it should look like!


  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    What you need to do is wrap the inner UL inside of a div like so.
    Code:
    <div class="inner-wrapper">
    <ul id="navFirst"></div>
    <ul id="navSecond"></div>
    </div>
    And style "inner-wrapper to have the drop shadow.

  • #4
    New Coder
    Join Date
    May 2012
    Posts
    15
    Thanks
    0
    Thanked 1 Time in 1 Post
    I try using a div but it would not going around the ul. Any reason why?


  •  

    Posting Permissions

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