Question

我的下拉菜单没有出现，有人可以帮我吗？它应该出现在“Interno”下面但是当我点击它时什么都没有出现！我在互联网上找到了这个菜单，我尝试使用它，但似乎我错了这里的完整项目（代码太长）：https://drive.google.com/file/d/0B6769AiSruENc0xWTm5IVlY5NDQ/view?usp=sharing

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Sito della Cattedrale di San Cataldo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="asubtleorange.css" />
    <link rel="stylesheet" href="stili/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="stili/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="page"> 
    <div id="header">
        <div class="title">CATTEDRALE DI SAN CATALDO</div>
     </div>
    <div id="bar">
        <div class="menuLink"><a href="index.html">Home</a></div>
        <div class="menuLink"><a href="storia.html">Storia</a></div>
        <div class="menuLink"><a href="esterno.php">Esterno</a></div>
        <div class="menuLink"><a href="#">Interno</a>
        <ul class="sub-menu">
                    <li><a href="#">In Cinemas Now</a></li>
                    <li><a href="#">Coming Soon</a></li>
                    <li><a href="#">On DVD/Blu-ray</a></li>
                    <li><a href="#">Showtimes &amp; Tickets</a></li>
                </ul>
        </div>
    </div>
    <div id="pageContent">

    <div class="articleTitle">L'esterno della Cattedrale</div>


      <div class="articleContent">


         <div class="item-page"  style="text-align:center;">
    <div id="slider" class="nivoSlider"  style="margin:auto;">
<img src="images/esterno/esterno01.jpg" alt=""  style="background-color:#333333;"/>
<img src="images/esterno/esterno02.jpg" alt=""style="background-color:#333333;"/>
<img src="images/esterno/esterno03.jpg" alt=""style="background-color:#333333;"/>
<img src="images/esterno/esterno04.jpg" alt="" style="background-color:#333333;"/>
<img src="images/esterno/esterno05.jpg" alt="" style="background-color:#333333;"/>
<img src="images/esterno/esterno06.jpg" alt="" style="background-color:#333333;"/>
<img src="images/esterno/esterno07.jpg" alt=""style="background-color:#333333;"/>
<img src="images/esterno/esterno08.jpg" alt=""style="background-color:#333333;"/>
<img src="images/esterno/esterno09.jpg" alt="" style="background-color:#333333;"/>
<img src="images/esterno/esterno10.jpg" alt=""style="background-color:#333333;"/>
<img src="images/esterno/esterno11.jpg" alt=""style="background-color:#333333;"/>
</div>
     <p>bla bla bla</p>
 </div></div></div> </div>
    <div id="footer"></div>
        <script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
  $('#slider').nivoSlider({
  effect:'fade',
  pauseTime: 5000
  });
});

function PNGManagement1 () {
      setTimeout (function(){
      $('.nivoSlider .nivo-main-image').animate({opacity:0},500)
      },20);
}
function PNGManagement2 () {
      setTimeout (function(){
      $('.nivoSlider .nivo-main-image').css({opacity:1});
      },20);
}

</script>

</body>
</html>

的CSS

/*============================*/
/*=== Stili per lo slider ===*/
/*============================*/
#slider {
    border: 0px solid #333;
    width:640px;
    height:427px;
    margin:40px auto;
    background:url(../images/loading.gif) no-repeat 50% 50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}

.nivo-controlNav {
    position:absolute;
    left:260px;
    bottom:-42px;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(../images/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}

.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(../images/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:-40px;
}
a.nivo-prevNav {
    left:-40px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}






/*----- Menu Outline -----*/
.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:#3e3436;
}

.menu {
    width:1000px;
    margin:0px auto;
}

.menu li {
    margin:0px;
    list-style:none;
    font-family:'Ek Mukta';
}

.menu a {
    transition:all linear 0.15s;
    color:#919191;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    color:#be5b70;
}

.menu .arrow {
    font-size:11px;
    line-height:0%;
}

/*----- Top Level -----*/
.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:19px;
}

.menu > ul > li > a {
    padding:10px 40px;
    display:inline-block;
    text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background:#2e2728;
}

/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}

.sub-menu {
    width:160%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:#2e2728;
}

.sub-menu li {
    display:block;
    font-size:16px;
}

.sub-menu li a {
    padding:10px 30px;
    display:block;
}

.sub-menu li a:hover, .sub-menu .current-item a {
    background:#3e3436;
}

Answer 1

这是一个带导航功能的JSFiddle。

JSFiddle

我现在补充说：

.menuLink:hover ul {
display: block;
}

以及让您的UL子菜单无法启动。然后，当你悬停你的ul时，它会显示并且以下代码使它保持不变：

.menu-link:active {
display: block;
}

这应该会让你有一个坚实的开始，让它成为你自己的！

html＆amp;＆amp; CSS - 下拉菜单不会出现

1 个答案: