增加子菜单宽度

Question

我坚持我的子菜单下拉菜单...我需要增加我的子菜单的宽度，但我不能因为它增加菜单和子菜单...他们是相关的，我需要他们独立

.fancyNav{ 
/* Affects the UL element */ 
overflow: hidden; 
display: inline-block; 
z-index:999; 
} 
.fancyNav li{ 
/* Specifying a fallback color and we define CSS3 gradients for the major browsers: */ 

background: #CCC; 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=10); 
    opacity:.7; 

border-right: 1px solid rgba(0, 0, 0, 1); 

/* Adding a 1px inset highlight for a more polished efect: */ 



position:relative; 

float: left; 
list-style: none; 
} 

.fancyNav li:after{ 
    content:'.'; 
text-indent:-9999px; 
overflow:hidden; 
position:absolute; 
width:100%; 
height:100%; 
top:0; 
left:0; 
opacity:0; 
z-index:1; 
/* Gradients! */ 

background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5))); 

background-image:-moz-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,1) 100%, rgba(255,255,255,1)); 

background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); 
background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); 
background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); 

/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */ 

box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff; 
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff; 
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff; 

/* This will create a smooth transition for the opacity property */ 

-moz-transition:0.25s all; 
-webkit-transition:0.25s all; 
-o-transition:0.25s all; 
transition:0.25s all;} 

/* Treating the first LI and li:after elements separately */ 



.fancyNav li:first-child:after, 
.fancyNav li.selected:first-child:after{ 
box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff; 
-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff; 
-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff; 

-moz-transition:0.25s all; 
-webkit-transition:0.25s all; 
-o-transition:0.25s all; 
transition:0.25s all;} 

/* Treating the first LI and li:after elements separately */ 



.fancyNav li:first-child:after, 
.fancyNav li.selected:first-child:after{ 
box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff; 
-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff; 
-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff; 

} 

.fancyNav li:last-child{ 
} 

/* Treating the last LI and li:after elements separately */ 

.fancyNav li:last-child:after, 
.fancyNav li.selected:last-child:after{ 
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff; 
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff; 
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff; 
} 
.fancyNav li:hover:after, 
.fancyNav li.selected:after, 
.fancyNav li:target:after{ 
/* This property triggers the CSS3 transition */ 
opacity:1; 
} 

.fancyNav:hover li.selected:after, 
.fancyNav:hover li:target:after{ 
/* Hides the targeted li when we are hovering on the UL */ 
opacity:0; 
} 
.fancyNav li.selected:hover:after, 
.fancyNav li:target:hover:after{ 
opacity:1 !important; 

} 
/* Styling the anchor elements */ 
.menudiv{ 
position:fixed; 
z-index:999; 
width:951px; 
margin-left:-476px; 
left:50%; 
} 
.menlog{ 
padding-left:15px; 
padding-right:15px; 

} 
.menlog2{ 
padding:12px 15px 15px; 

} 
.corrente{ 
    background-color:white; 
padding:12px 15px 15px; 
} 
.corrente3{ 
} 
.fancyNav li a{ 
color: #000000; 
display: inline-block; 
position: relative; 
z-index:2; 
text-decoration:none !important; 
white-space:nowrap; 

} 
.fancyNav a.homeIcon{ 
background:url('../img/home.png') no-repeat center center; 
display: block; 
overflow: hidden; 
text-indent: -9999px; 
} 


nav{ 
display: block; 
text-align: center; 

} 
a, a:visited { 
text-decoration:none; 
outline:none; 
color:#54a6de; 
} 
a:hover{ 
text-decoration:underline; 
} 

子菜单代码是

ul ul li{ 
    float:none !important; 
display: block; 
padding: 2px; 
} 
ul ul{ 
display:none; 
position:relative; /* updated */ 
z-index:2;   /* updated */ 
} 
ul li:hover ul{ 
display:block; 
} 

HTML代码，

<nav><ul class="fancyNav"> 
<li id="quemsomos" class="menlog"><a href="index.php"><img src="imgs/Logo.png" width="37" height="45" /></a></li> 
<li id="quemsomos"><a href="quemsomos.php?web=1"><font face="din" size="4">QUEM SOMOS</font></a> 

    <!--start of sub menu--> 
    <ul> 
    <li><a href="#">Test DropDown</a></li> 
    <li><a href="#">Test DropDown</a></li> 
    <li><a href="#">Test DropDown</a></li> 
    </ul> 
<!--end of sub menu--> 

</li> 

感谢

Answer 1

试试这个CSS

ul li:hover ul{ 
display:block; 
position:absolute 
} 

感谢

检查这个http://jsfiddle.net/RHCn7/4/