...

View Full Version : box-shadow and multi-column drop down HELP



feinburgrl
06-12-2012, 06:48 PM
http://www.imagraphicdesigner.com/roma/products/biocalceclassico/

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.




<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 -->






.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;
}

feinburgrl
06-12-2012, 07:43 PM
What it should look like!

http://s16.postimage.org/x7ooi1o8l/Screen_Shot_2012_06_12_at_2_34_46_PM.jpg

aaronhockey_09
06-12-2012, 09:31 PM
What you need to do is wrap the inner UL inside of a div like so.

<div class="inner-wrapper">
<ul id="navFirst"></div>
<ul id="navSecond"></div>
</div>


And style "inner-wrapper to have the drop shadow.

feinburgrl
06-12-2012, 09:37 PM
I try using a div but it would not going around the ul. Any reason why?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum