下拉菜單不會出現在html5-css3

我試圖讓我的網站「手工」（僅限於代碼），並且我正在開發Web 。下拉菜單不會出現在html5-css3

我有一個問題...

我試圖讓一個下拉菜單，你在我的代碼看。問題是，只有當我在頁面「0.Home.html」時纔有效。當我在其他頁面的下拉菜單無法正常工作....

正如你在所有我有相同的「myStyle.css」文件相關的頁面的頁面看，我用同樣的在所有文件中標記（僅限html5）....

你能幫助糾正我的錯誤嗎，所以我會向你學習如何用正確的方式做到這一點？

我發佈了我的代碼...

在此先感謝！

文件「0.Home.html」

<!DOCTYPE html> 
 

 
<html lang="el"> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    <meta name="author" content="" > 
 
    <meta name="description" 
 
\t content="Αρχική"> 
 
    <title>Αρχική Σελίδα</title> 
 
    <link rel="stylesheet" type="text/css" href="myStyle.css"/> 
 
    <link rel="shortcut icon" href=""/> 
 
</head> 
 

 
<body id="top"> 
 

 
<div id="header"> 
 
    <figure class="lorie-photos"> 
 
    <img src="" alt="" 
 
\t width="297" height="245"/> 
 
    </figure> 
 
    <h1 id="title1">AAAAAAAA</h1> 
 
    <h3 id="title2">Mathematician - Computer Scientist</h3> 
 
</div> 
 

 
<nav> 
 
\t <ul> 
 
    \t \t <li>Αρχική</li> 
 
    \t \t <li><a href="1.Programming.html">Προγραμματισμός</a> 
 
    \t \t \t <ul> 
 
      \t \t <li>Η γλώσσες C και C++</li> 
 
      \t \t <li>Η γλώσσα JAVA</li> 
 
      \t \t <li>Η γλώσσα PHP</li> 
 
      \t \t <li>Η γλώσσα JAVASCRIPT</li> 
 
     \t \t </ul> 
 
    \t \t </li> 
 
    \t \t <li><a href="2.Algoriths.html">Αλγόριθμοι</a></li> 
 
    \t \t <li><a href="3.DataStructures.html">Δομές Δεδομένων</a></li> 
 
    \t \t <li><a href="4.DataBases.html">Βάσεις Δεδομένων</a></li> 
 
\t </ul> 
 
</nav> 
 

 
    <hr/> 
 
    
 
    <h1>Βιογραφικό</h1> 
 

 
    <!-- ------------------------------------------------------------ --> 
 
    
 
    <p><a href="#top">Επιστροφή στην κορυφή της σελίδας</a></p> 
 
    
 
    <hr/> 
 
    
 
    <div id="footer"> 
 
    <ul id="nav"> 
 
     <li>Αρχική</li> 
 
     <li><a href="1.Programming.html">Προγραμματισμός</a></li> 
 
     <li><a href="2.Algoriths.html">Αλγόριθμοι</a></li> 
 
     <li><a href="3.DataStructures.html">Δομές Δεδομένων</a></li> 
 
     <li><a href="4.DataBases.html">Βάσεις Δεδομένων</a></li> 
 
    </ul> 
 
    <p> 
 
     <a href="https://www.facebook.com" title="facebook">facebook</a> 
 
     <a href="https://twitter.com/" title="twitter">twitter</a> 
 
     <a href="http://instagram.com/" title="instagram">instagram</a> 
 
     <a href="http://www.france24.com/en/rss/" title="RSS feeds"> 
 
\t  RSS feeds</a> 
 
    </p> 
 
    &copy; Copyright 2016 
 
    </div> 
 
    
 
</body> 
 

 
</html>

文件「1.Programming.html」

<!DOCTYPE html> 
 

 
<html lang="el"> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    <meta name="author" content="" > 
 
    <meta name="description" 
 
\t content="Προγραμματισμός"> 
 
    <title>Προγραμματισμός</title> 
 
    <link rel="stylesheet" type="text/css" href="myStyle.css"/> 
 
    <link rel="shortcut icon" href=""/> 
 
</head> 
 

 
<body id="top"> 
 

 
<div id="header"> 
 
    <figure class="lorie-photos"> 
 
    <img src="" alt="" 
 
\t width="297" height="245"/> 
 
    </figure> 
 
    <h1 id="title1">AAAAAAAA</h1> 
 
    <h3 id="title2">Mathematician - Computer Scientist</h3> 
 
</div> 
 

 
<nav> 
 
\t <ul> 
 
    \t \t <li><a href="0.Home.html">Αρχική</a></li> 
 
    \t \t <li>Προγραμματισμός</li> 
 
    \t \t \t <ul> 
 
      \t \t <li>Η γλώσσες C και C++</li> 
 
      \t \t <li>Η γλώσσα JAVA</li> 
 
      \t \t <li>Η γλώσσα PHP</li> 
 
      \t \t <li>Η γλώσσα JAVASCRIPT</li> 
 
     \t \t </ul> 
 
    \t \t </li> 
 
    \t \t <li><a href="2.Algoriths.html">Αλγόριθμοι</a></li> 
 
    \t \t <li><a href="3.DataStructures.html">Δομές Δεδομένων</a></li> 
 
    \t \t <li><a href="4.DataBases.html">Βάσεις Δεδομένων</a></li> 
 
\t </ul> 
 
</nav> 
 

 
    <hr/> 
 
    
 
    <p><a href="0.Home.html">Επιστροφή στην Αρχική</a></p> 
 
    <h1>Προγραμματισμός</h1> 
 

 
    <!-- ------------------------------------------------------------ --> 
 
    
 
    <p><a href="#top">Επιστροφή στην κορυφή της σελίδας</a></p> 
 
    
 
    <p><a href="0.Home.html">Επιστροφή στην Αρχική</a></p> 
 
    
 
    <hr/> 
 
    
 
    <div id="footer"> 
 
    <ul id="nav"> 
 
     <li><a href="0.Home.html">Αρχική</a></li> 
 
     <li>Προγραμματισμός</li> 
 
     <li><a href="2.Algoriths.html">Αλγόριθμοι</a></li> 
 
     <li><a href="3.DataStructures.html">Δομές Δεδομένων</a></li> 
 
     <li><a href="4.DataBases.html">Βάσεις Δεδομένων</a></li> 
 
    </ul> 
 
    <p> 
 
     <a href="https://www.facebook.com" title="facebook">facebook</a> 
 
     <a href="https://twitter.com/" title="twitter">twitter</a> 
 
     <a href="http://instagram.com/" title="instagram">instagram</a> 
 
     <a href="http://www.france24.com/en/rss/" title="RSS feeds"> 
 
\t  RSS feeds</a> 
 
    </p> 
 
    &copy; Copyright 2016 
 
    </div> 
 
    
 
</body> 
 

 
</html>

文件「2。 Algoriths.html「

<!DOCTYPE html> 
 

 
<html lang="el"> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    <meta name="author" content="" > 
 
    <meta name="description" 
 
\t content="Αλγόριθμοι"> 
 
    <title>Αλγόριθμοι</title> 
 
    <link rel="stylesheet" type="text/css" href="myStyle.css"/> 
 
    <link rel="shortcut icon" href=""/> 
 
</head> 
 

 
<body id="top"> 
 

 
<div id="header"> 
 
    <figure class="lorie-photos"> 
 
    <img src="" alt="" 
 
\t width="297" height="245"/> 
 
    </figure> 
 
    <h1 id="title1">AAAAAAAA</h1> 
 
    <h3 id="title2">Mathematician - Computer Scientist</h3> 
 
</div> 
 
\t 
 
<nav> 
 
\t <ul> 
 
    \t \t <li><a href="0.Home.html">Αρχική</a></li> 
 
    \t \t <li><a href="1.Programming.html">Προγραμματισμός</a></li> 
 
    \t \t \t <ul> 
 
      \t \t <li>Η γλώσσες C και C++</li> 
 
      \t \t <li>Η γλώσσα JAVA</li> 
 
      \t \t <li>Η γλώσσα PHP</li> 
 
      \t \t <li>Η γλώσσα JAVASCRIPT</li> 
 
     \t \t </ul> 
 
    \t \t </li> 
 
    \t \t <li>Αλγόριθμοι</li> 
 
    \t \t <li><a href="3.DataStructures.html">Δομές Δεδομένων</a></li> 
 
    \t \t <li><a href="4.DataBases.html">Βάσεις Δεδομένων</a></li> 
 
\t </ul> 
 
</nav> 
 

 
    <hr/> 
 
    
 
    <p><a href="0.Home.html">Επιστροφή στην Αρχική</a></p> 
 
    <h1>Αλγόριθμοι</h1> 
 
    
 
    <!-- ------------------------------------------------------------ --> 
 
    
 
    <p><a href="#top">Επιστροφή στην κορυφή της σελίδας</a></p> 
 
    
 
    <p><a href="0.Home.html">Επιστροφή στην Αρχική</a></p> 
 
    
 
    <hr/> 
 
    
 
    <div id="footer"> 
 
    <ul id="nav"> 
 
     <li><a href="0.Home.html">Αρχική</a></li> 
 
     <li><a href="1.Programming.html">Προγραμματισμός</a></li> 
 
     <li>Αλγόριθμοι</li> 
 
     <li><a href="3.DataStructures.html">Δομές Δεδομένων</a></li> 
 
     <li><a href="4.DataBases.html">Βάσεις Δεδομένων</a></li> 
 
    </ul> 
 
    <p> 
 
     <a href="https://www.facebook.com" title="facebook">facebook</a> 
 
     <a href="https://twitter.com/" title="twitter">twitter</a> 
 
     <a href="http://instagram.com/" title="instagram">instagram</a> 
 
     <a href="http://www.france24.com/en/rss/" title="RSS feeds"> 
 
\t  RSS feeds</a> 
 
    </p> 
 
    &copy; Copyright 2016 
 
    </div> 
 
    
 
</body> 
 

 
</html>

文件「3.DataStructures.html」

<!DOCTYPE html> 
 

 
<html lang="el"> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    <meta name="author" content="" > 
 
    <meta name="description" 
 
\t content="Δομές Δεδομένων"> 
 
    <title>Δομές Δεδομένων</title> 
 
    <link rel="stylesheet" type="text/css" href="myStyle.css"/> 
 
    <link rel="shortcut icon" href=""/> 
 
</head> 
 

 
<body id="top"> 
 

 
<div id="header"> 
 
    <figure class="lorie-photos"> 
 
    <img src="" alt="" 
 
\t width="297" height="245"/> 
 
    </figure> 
 
    <h1 id="title1">AAAAAAAA</h1> 
 
    <h3 id="title2">Mathematician - Computer Scientist</h3> 
 
</div> 
 

 
<nav> 
 
\t <ul> 
 
    \t \t <li><a href="0.Home.html">Αρχική</a></li> 
 
    \t \t <li><a href="1.Programming.html">Προγραμματισμός</a></li> 
 
    \t \t \t <ul> 
 
      \t \t <li>Η γλώσσες C και C++</li> 
 
      \t \t <li>Η γλώσσα JAVA</li> 
 
      \t \t <li>Η γλώσσα PHP</li> 
 
      \t \t <li>Η γλώσσα JavaScript</li> 
 
     \t \t </ul> 
 
    \t \t </li> 
 
    \t \t <li><a href="2.Algoriths.html">Αλγόριθμοι</a></li> 
 
    \t \t <li>Δομές Δεδομένων</li> 
 
    \t \t <li><a href="4.DataBases.html">Βάσεις Δεδομένων</a></li> 
 
\t </ul> 
 
</nav> 
 

 
    <hr/> 
 
    
 
    <p><a href="0.Home.html">Επιστροφή στην Αρχική</a></p> 
 
    <h1>Δομές Δεδομένων</h1> 
 

 
    <!-- ------------------------------------------------------------ --> 
 

 
    <p><a href="#top">Επιστροφή στην κορυφή της σελίδας</a></p> 
 

 
    <p><a href="0.Home.html">Επιστροφή στην Αρχική</a></p> 
 
    
 
    <hr/> 
 
    
 
    <div id="footer"> 
 
    <ul id="nav"> 
 
     <li><a href="0.Home.html">Αρχική</a></li> 
 
     <li><a href="1.Programming.html">Προγραμματισμός</a></li> 
 
     <li><a href="2.Algoriths.html">Αλγόριθμοι</a></li> 
 
     <li>Δομές Δεδομένων</li> 
 
     <li><a href="4.DataBases.html">Βάσεις Δεδομένων</a></li> 
 
    </ul> 
 
    <p> 
 
     <a href="https://www.facebook.com" title="facebook">facebook</a> 
 
     <a href="https://twitter.com/" title="twitter">twitter</a> 
 
     <a href="http://instagram.com/" title="instagram">instagram</a> 
 
     <a href="http://www.france24.com/en/rss/" title="RSS feeds"> 
 
\t  RSS feeds</a> 
 
    </p> 
 
    &copy; Copyright 2016 
 
    </div> 
 
    
 
</body> 
 

 
</html>

文件「4.DataBases.html」

<!DOCTYPE html> 
 

 
<html lang="el"> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    <meta name="author" content="" > 
 
    <meta name="description" 
 
\t content="Βάσεις Δεδομένων"> 
 
    <title>Βάσεις Δεδομένων</title> 
 
    <link rel="stylesheet" type="text/css" href="myStyle.css"/> 
 
    <link rel="shortcut icon" href=""/> 
 
</head> 
 

 
<body id="top"> 
 

 
<div id="header"> 
 
    <figure class="lorie-photos"> 
 
    <img src="" alt="" 
 
\t width="297" height="245"/> 
 
    </figure> 
 
    <h1 id="title1">AAAAAAAA</h1> 
 
    <h3 id="title2">Mathematician - Computer Scientist</h3> 
 
</div> 
 

 
<nav> 
 
\t <ul> 
 
    \t \t <li><a href="0.Home.html">Αρχική</a></li> 
 
    \t \t <li><a href="1.Programming.html">Προγραμματισμός</a></li> 
 
    \t \t \t <ul> 
 
      \t \t <li>Η γλώσσες C και C++</li> 
 
      \t \t <li>Η γλώσσα JAVA</li> 
 
      \t \t <li>Η γλώσσα PHP</li> 
 
      \t \t <li>Η γλώσσα JAVASCRIPT</li> 
 
     \t \t </ul> 
 
    \t \t </li> 
 
    \t \t <li><a href="2.Algoriths.html">Αλγόριθμοι</a></li> 
 
    \t \t <li><a href="3.DataStructures.html">Δομές Δεδομένων</a></li> 
 
    \t \t <li>Βάσεις Δεδομένων</li> 
 
\t </ul> 
 
</nav> 
 

 
    <hr/> 
 
    
 
    <p><a href="0.Home.html">Επιστροφή στην Αρχική</a></p> 
 
    <h1>Βάσεις Δεδομένων</h1> 
 
    
 
    <!-- ------------------------------------------------------------ --> 
 
    
 
    <p><a href="#top">Επιστροφή στην κορυφή της σελίδας</a></p> 
 
    
 
    <p><a href="0.Home.html">Επιστροφή στην Αρχική</a></p> 
 
    
 
    <hr/> 
 
    
 
    <div id="footer"> 
 
    <ul id="nav"> 
 
     <li><a href="0.Home.html">Αρχική</a></li> 
 
     <li><a href="1.Programming.html">Προγραμματισμός</a></li> 
 
     <li><a href="2.Algoriths.html">Αλγόριθμοι</a></li> 
 
     <li><a href="3.DataStructures.html">Δομές Δεδομένων</a></li> 
 
     <li>Βάσεις Δεδομένων</li> 
 
    </ul> 
 
    <p> 
 
     <a href="https://www.facebook.com" title="facebook">facebook</a> 
 
     <a href="https://twitter.com/" title="twitter">twitter</a> 
 
     <a href="http://instagram.com/" title="instagram">instagram</a> 
 
     <a href="http://www.france24.com/en/rss/" title="RSS feeds"> 
 
\t  RSS feeds</a> 
 
    </p> 
 
    &copy; Copyright 2016 
 
    </div> 
 
    
 
</body> 
 

 
</html>

文件「myStyle.css」

/* The background image */ 
 
body{ 
 
    background-image: url('../Photos/0.Background.jpg'); 
 
    background-size: 1000000%; 
 
} 
 

 
/* Header formatting */ 
 
#header{ 
 
    overflow: hidden; 
 
} 
 

 
/* Title formatting */ 
 
#title1{ 
 
    font-family: 'Comic Sans MS', Verdana, sans-serif; 
 
    text-align: center; 
 
    font-size: 50; 
 
} 
 

 
#title2{ 
 
    font-family: 'Comic Sans MS', Verdana, sans-serif; 
 
    color: red; 
 
    text-align: center; 
 
    font-size: 30; 
 
} 
 

 
/*************************************************************************/ 
 
/****************** Main Navigation menu formatting **********************/ 
 
/*************************************************************************/ 
 

 
nav{ 
 
\t /*margin: 100px auto;*/ 
 
\t text-align: center; 
 
} 
 

 
nav ul{ 
 
\t list-style: none; 
 
\t background: #efefef; 
 
\t background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
 
\t background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); /* Firefox */ 
 
\t background: -o-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Opera */ 
 
\t background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Safari */ 
 
\t box-shadow: 5px 5px 20px rgba(0,0,0,0.15); 
 
\t padding: 0 20px 0 20px; 
 
\t border-radius: 10px; 
 
\t position: relative; 
 
\t display: inline-table; 
 
} 
 

 
nav ul:after{ 
 
\t content: ""; 
 
\t clear: both; 
 
\t display: block; 
 
} 
 

 
nav ul li{ 
 
\t float: left; 
 
\t padding: 25px; 
 
} 
 

 
nav ul li:hover{ 
 
\t background: #4b545f; 
 
\t background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
 
\t background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
 
\t background: -o-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
 
\t background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); 
 
\t color: #ffffff; 
 
} 
 

 
nav ul li a:hover{color: #ffffff;} 
 

 
/*************************************************************************/ 
 
/************ Navigation Programming submenu formatting ******************/ 
 
/*************************************************************************/ 
 

 
nav ul ul{ 
 
\t background: #5f6975; 
 
\t padding: 5; 
 
\t border-radius: 10px; 
 
\t position: absolute; 
 
\t top: 100%; 
 
\t display: none; 
 
} 
 

 
nav ul ul li{ 
 
\t float: none; 
 
\t border-top: 1px solid #6b727c; 
 
\t border-bottom: 1px solid #575f6a; 
 
\t position: relative; 
 
\t display: block; 
 
} 
 

 
nav ul li:hover > ul{ 
 
\t display: block; 
 
} 
 

 
nav ul li a:hover > ul{ 
 
\t display: block; 
 
} 
 

 
nav ul ul li a{ 
 
\t padding: 25px; 
 
\t color: #ffffff; 
 
} 
 

 
nav ul ul li a:hover{ 
 
\t background: #4b545f; 
 
} 
 

 
/*************************************************************************/ 
 

 
/* Headers h1, h2, h3 formatting */ 
 
h1{ 
 
    font-family: Verdana, Arial, sans-serif; 
 
    color: red; 
 
} 
 

 
h2{ 
 
    font-family: Verdana, Arial, sans-serif; 
 
} 
 

 
/* Hyperlinks formatting */ 
 
a:link{color: blue;} 
 
a:visited{color: purple;} 
 
a:focus{color: maroon;} 
 
a:hover{color: green;} 
 
a:active{color: blue;} 
 

 
a{ 
 
    text-decoration: none; 
 
    border-bottom: 1px solid; 
 
} 
 

 
/* index-group formatting */ 
 
#index-group{ 
 
    overflow: hidden; 
 
} 
 

 
/* Photos formatting */ 
 
.lorie-photos{ 
 
    float: left; 
 
} 
 

 
.photo{ 
 
    border-bottom: none; 
 
} 
 

 
figcaption{ 
 
    color: maroon; 
 
    text-align: center; 
 
} 
 

 
/* Paragraphs line-height */ 
 
p{ 
 
    line-height: 150%; 
 
    font-size: large; 
 
} 
 

 
/* Lists formatting */ 
 
ul, ol{ 
 
    font-size: large; 
 
    line-height: 150%; 
 
} 
 

 
/* Footer formatting */ 
 
#footer{ 
 
    text-align: center; 
 
} 
 

 
/* 
 
font-style: italic; 
 
line-height: 150%; 
 
*/

來源

2015-11-23 Mylonas Thomas

看看你0.home.html文件第二次看你的列表元素的佈局比較其他網頁。

爲了使列表以包含一個<ul>元件，所述<ul>必須嵌套的<li>。您的其他網頁不這樣做，這就是您的菜單無法使用的原因。

來源

2015-11-24 00:16:13 quesoflorecido

我的朋友我看到了....我有一個錯誤.....謝謝你的寶貴幫助！我只是網絡編程的新手！ –

下拉菜單不會出現在html5-css3

回答

相關問題