爲什麼這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