1. 首頁
  2. 問答
  3. css本地或遠程網站上不工作 - 但工作在jsfiddle？

css本地或遠程網站上不工作 - 但工作在jsfiddle？

2014-11-08 121 views
0

我有一個網站，其上有一個CSS菜單。下拉菜單項目正在顯示，但只要您嘗試點擊該菜單項，下拉菜單即會關閉。導航工程JSFiddle jsFiddle examplecss本地或遠程網站上不工作 - 但工作在jsfiddle？

然而，它不能在本地或部署時工作。 Deployed version

菜單HTML如下：（部分頁面）

<div> 
    <ul id="menu"> 

     <li><a href="/">Home</a></li> 
     <li class="menu dropdown"><a href="#" class="drop">Testing</a> 
     <div class="dropdown_1column">   
      <div class="col_1">     
       <ul class="simple"> 
        <li><a href="/testing/">Overview</a></li> 

       </ul> 
      </div> 
     </div> 
     </li> 
     <li><a href="#">Accreditation</a></li> 
     <li><a href="#">Reports</a></li> 

     <li class="menu_right"><a href="#">Login</a></li> 

     <li class="menu_right dropdown" ><a href="#" class="drop">About</a> 
      <div class="dropdown_1column align_right">   
       <div class="col_1">     
        <ul class="simple"> 
         <li><a href="#">Our Standards</a></li> 
         <li><a href="#">Our Management</a></li> 
         <li><a href="#">Our Scientists</a></li> 
         <li><a href="#">Our Sponsosrs</a></li> 
        </ul> 
       </div> 
      </div> 
     </li> 
    </ul> 
</div>

和CSS是這樣的：

body, ul, li { 
    font-size:14px; 
    font-family:Arial, Helvetica, sans-serif; 
    line-height:21px; 
    text-align:left; 
} 

#menu { 
    list-style:none; 
    /* width:940px; */ 
    margin:3px auto 0px auto; 
    height:43px; 
    padding:0px 2px 0px 20px; 

    /* Rounded Corners */ 

    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 

    /* Background color and gradients */ 

    background: #014464; 
    background: -moz-linear-gradient(top, #0272a7, #013953); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); 

    /* Borders */ 

    border: 1px solid #002232; 

    -moz-box-shadow:inset 0px 0px 1px #edf9ff; 
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff; 
    box-shadow:inset 0px 0px 1px #edf9ff; 
} 

#menu li { 
    float:left; 
    display:block; 
    text-align:center; 
    position:relative; 
    padding: 4px 10px 4px 10px; 
    margin-right:30px; 
    margin-top:7px; 
    border:none; 
} 

#menu li.dropdown:hover { 
    border: 1px solid #777777; 
    padding: 4px 9px 4px 9px; 

    /* Background color and gradients */ 

    background: #F4F4F4; 
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); 

    /* Rounded corners */ 

    -moz-border-radius: 5px 5px 0px 0px; 
    -webkit-border-radius: 5px 5px 0px 0px; 
    border-radius: 5px 5px 0px 0px; 
} 

#menu li a { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:14px; 
    color: #EEEEEE; 
    display:block; 
    outline:0; 
    text-decoration:none; 
    text-shadow: 2px 2px 2px #000; 
} 

#menu li:hover a { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:14px; 
    color: #000; 
    display:block; 
    outline:0; 
    text-decoration:none; 
    text-shadow: 2px 2px 2px #AAF; 
} 

#menu li.dropdown:hover a { 
    color:#161616; 
    text-shadow: 1px 1px 1px #ffffff; 
} 
#menu li .drop { 
    padding-right:21px; 
    background:url("/img/drop.png") no-repeat right 8px; 
} 
#menu li:hover .drop { 
    background:url("/img/drop.png") no-repeat right 7px; 
} 

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns, 
.dropdown_5columns { 
    margin:4px auto; 
    float:left; 
    position:absolute; 
    left:-999em; /* Hides the drop down */ 
    text-align:left; 
    padding:10px 5px 10px 5px; 
    border:1px solid #777777; 
    border-top:none; 

    /* Gradient background */ 
    background:#F4F4F4; 
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); 

    /* Rounded Corners */ 
    -moz-border-radius: 0px 5px 5px 5px; 
    -webkit-border-radius: 0px 5px 5px 5px; 
    border-radius: 0px 5px 5px 5px; 
} 

.dropdown_1column {width: 140px;} 
.dropdown_2columns {width: 280px;} 
.dropdown_3columns {width: 420px;} 
.dropdown_4columns {width: 560px;} 
.dropdown_5columns {width: 700px;} 

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns, 
#menu li:hover .dropdown_4columns, 
#menu li:hover .dropdown_5columns { 
    left:-1px; 
    top:auto; 
} 

.col_1, 
.col_2, 
.col_3, 
.col_4, 
.col_5 { 
    display:inline; 
    float: left; 
    position: relative; 
    margin-left: 5px; 
    margin-right: 5px; 
} 
.col_1 {width:130px;} 
.col_2 {width:270px;} 
.col_3 {width:410px;} 
.col_4 {width:550px;} 
.col_5 {width:690px;} 

#menu .menu_right { 
    float:right; 
    margin-right:0px; 
} 
#menu li .align_right { 
    /* Rounded Corners */ 
    -moz-border-radius: 5px 0px 5px 5px; 
    -webkit-border-radius: 5px 0px 5px 5px; 
    border-radius: 5px 0px 5px 5px; 
} 

#menu li:hover .align_right { 
    left:auto; 
    right:-1px; 
    top:auto; 
} 

#menu p, #menu h2, #menu h3, #menu ul li { 
    font-family:Arial, Helvetica, sans-serif; 
    line-height:21px; 
    font-size:12px; 
    text-align:left; 
    text-shadow: 1px 1px 1px #FFFFFF; 
} 
#menu h2 { 
    font-size:21px; 
    font-weight:400; 
    letter-spacing:-1px; 
    margin:7px 0 14px 0; 
    padding-bottom:14px; 
    border-bottom:1px solid #666666; 
} 
#menu h3 { 
    font-size:14px; 
    margin:7px 0 14px 0; 
    padding-bottom:7px; 
    border-bottom:1px solid #888888; 
} 
#menu p { 
    line-height:18px; 
    margin:0 0 10px 0; 
} 

#menu li:hover div a { 
    font-size:12px; 
    color:#015b86; 
} 
#menu li:hover div a:hover { 
    color:#029feb; 
} 


.strong { 
    font-weight:bold; 
} 
.italic { 
    font-style:italic; 
} 

.imgshadow { /* Better style on light background */ 
    background:#FFFFFF; 
    padding:4px; 
    border:1px solid #777777; 
    margin-top:5px; 
    -moz-box-shadow:0px 0px 5px #666666; 
    -webkit-box-shadow:0px 0px 5px #666666; 
    box-shadow:0px 0px 5px #666666; 
} 
.img_left { /* Image sticks to the left */ 
    width:auto; 
    float:left; 
    margin:5px 15px 5px 5px; 
} 

#menu li .black_box { 
    background-color:#333333; 
    color: #eeeeee; 
    text-shadow: 1px 1px 1px #000; 
    padding:4px 6px 4px 6px; 

    /* Rounded Corners */ 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 

    /* Shadow */ 
    -webkit-box-shadow:inset 0 0 3px #000000; 
    -moz-box-shadow:inset 0 0 3px #000000; 
    box-shadow:inset 0 0 3px #000000; 
} 

#menu li ul { 
    list-style:none; 
    padding:0; 
    margin:0 0 12px 0; 
} 
#menu li ul li { 
    font-size:12px; 
    line-height:24px; 
    position:relative; 
    text-shadow: 1px 1px 1px #ffffff; 
    padding:0; 
    margin:0; 
    float:none; 
    text-align:left; 
    width:130px; 
} 
#menu li ul li:hover { 
    background:none; 
    border:none; 
    padding:0; 
    margin:0; 
} 

#menu li .greybox li { 
    background:#F4F4F4; 
    border:1px solid #bbbbbb; 
    margin:0px 0px 4px 0px; 
    padding:4px 6px 4px 6px; 
    width:116px; 

    /* Rounded Corners */ 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -khtml-border-radius: 5px; 
    border-radius: 5px; 
} 
#menu li .greybox li:hover { 
    background:#ffffff; 
    border:1px solid #aaaaaa; 
    padding:4px 6px 4px 6px; 
    margin:0px 0px 4px 0px; 
}

菜單不依賴於JQuery的或任何其他腳本。

來源

2014-11-08 Dave Gordon

+1

請儘量減少你的代碼仍然代表您的問題最少...... – 2014-11-08 04:05:20

回答

3

我確實認爲這是因爲您的標題「計算機犯罪服務實驗室」覆蓋在下拉列表上，因此您會將鼠標懸停在標題上方，而不是下拉菜單，因此下拉菜單消失可讓下拉菜單顯示更高的z - 指數值，如果它的位置，它會幫助你

來源

2014-11-08 03:59:53 Akshay

+0

嗯怪我認爲這是一套！感謝您注意到這一點。對於其他z-index實際上並不工作，除非你有位置：設置爲某物。 http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ – 2014-11-08 04:09:30

+0

@DaveGordon我說給z-index值，如果它的位置 – Akshay 2014-11-08 04:11:23

+0

所以你做到了！另一件我沒有注意到的事情，我會責怪它是在上午4點12分在這裏：P – 2014-11-08 04:12:29

4

離開Akshay的建議，我添加了以下樣式到您的網站。

.dropdown {z-index：100; }

它似乎已經解決了這個問題。如您所見，下拉菜單將突出顯示，並保留在鼠標指針下方。

z-index of 100 solves the problem

來源

2014-11-08 04:09:52

+1

尼斯從來沒有想過要做那樣的事情 – Akshay 2014-11-08 04:12:09

相關問題

 相關問題