为什么这jQuery的datetimepicker看起来如此变形？

Question

我想使用datetimepicker：http://trentrichardson.com/

功能似乎工作，但它看起来很糟糕 - 看到图片。谁能帮我找出为什么是这样？

浏览器是firefox。

头有...

<link rel="stylesheet" type="text/css" href="/css/mainmenu.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="/css/smoothness/jquery-ui-1.8.21.custom.css" /> 
    <link rel="stylesheet" type="text/css" media="screen" href="/css/dttimepicker.css" /> 

    <script src="/jscript/jquery-1.7.2.min.js" type="text/javascript"></script> 
    <script src="/jscript/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script> 
    <script src="/jscript/jquery-ui-timepicker-addon.js" type="text/javascript"></script> 

，它看起来像这样：

，并注意到，当我删除我的MainMenu的CSS它显示正常！这里是我的MainMenu css文件：

<div class="bvmainmenu"> 
    <ul> 
     <li><a href="/" id="Home">Home</a></li> 
     <li><a id="Reports">Reports</a> 
      <ul> 
       <li><a href="...">....</a></li> 
       <li><a href="...">....</a></li> 
       <li><a href="...">....</a></li> 
      </ul> 
     </li> 
     <li><a id="Managment">Managment</a> 
      <ul> 
       <li><a href=".....">.....</a></li> 
       <li><a>....</a></li> 
      </ul> 
     </li> 
     <li><a id="Admin">Admin</a> 
      <ul> 
       <li><a href="...">....</a></li> 
       <li><a href="....">....</a></li> 
       <li><a href="...">...</a></li> 
       <li><a href="...">...</a></li> 
       <li><a href="...">...</a></li> 
       <li><a href="/">item3</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

菜单都有其自己的类，这里是它的CSS：

.bvmainmenu{           /*main bvmainmenu properties*/ 
    border:none; 
    border:0px; 
    margin:0px; 
    padding:0px; 
    font-family:verdana,geneva,arial,helvetica,sans-serif; 
    font-size:14px; 
    font-weight:bold; 
    color:8e8e8e; 
    } 
.bvmainmenu ul{          /*main bvmainmenu items bar*/ 
    background:url(/images/bvmainmenu-bg.gif) top left repeat-x; 
    height:43px; 
    list-style:none; 
    margin:0; 
    padding:0; 
    } 
    .bvmainmenu li{ 
     float:left;        /*main bvmainmenu item positioning*/ 
     padding:0px 8px 0px 8px; 
     } 
    .bvmainmenu li a,span{         /*main bvmainmenu items text properties etc*/ 
     color:#666666; 
     display:block; 
     font-weight:bold; 
     line-height:43px; 
     padding:0px 25px; 
     text-align:center; 
     text-decoration:none; 
     } 
     .bvmainmenu li a:hover{ 
      color:#000000; 
      text-decoration:none; 
     } 
    .bvmainmenu li ul{ 
     background:#e0e0e0; 
     border-left:2px solid #000000; 
     border-right:2px solid #000000; 
     border-bottom:2px solid #000000; 
     display:none; 
     height:auto; 
     filter:alpha(opacity=95); 
     opacity:0.95; 
     position:absolute; 
     width:auto;        /*225px; this will make all drop downs of same width*/ 
     z-index:200; 
     } 
    .bvmainmenu li:hover ul{      /*shows drop down bvmainmenu box on hover*/ 
     display:block; 
     } 
    .bvmainmenu li ul li {        /*drop down bvmainmenu box*/ 
     display:block; 
     float:none; 
     padding:0px; 
     width:auto;        /*225px; this will make all drop downs of same width*/ 
     } 
    .bvmainmenu li ul li a{ 
     display:block; 
     font-size:12px; 
     font-style:normal; 
     padding:0px 5px 0px 5px;   /*top rt bt lf def:0,10,0,15*/ 
     text-align:left; 
     line-height:1.5;      /*added for visual effect, you can use value normal*/ 
     } 
     .bvmainmenu li ul li a:hover{     /*drop down bvmainmenu items*/ 
      background:#949494; 
      color:#000000; 
      opacity:1.0; 
      filter:alpha(opacity=100); 
      } 
    .bvmainmenu p{ 
     clear:left; 
     } 

谁能告诉什么是搞砸吗？为什么这个小部件看起来很有趣？字体太大了！在展厅（用户界面网站），它看起来如此闪亮！

thx。 拉杰夫

Answer 1

.bvmainmenu li a,span 

跨越未封装离子菜单类

（修订）

如果你想封装跨度它凸轮要么

：

.bvmainmenu li a,.bvmainmenu span 

或

.bvmainmenu li a span 

取决于你想实现什么，最后只会匹配所有在.bvmainmenu里面的span，而不会影响“a”，以前的wil会影响锚点（li a）以及里面的所有跨度.bvmainmenu