1
Я делаю страницу, где должно быть подменю. На моей странице я разделил ее на 3 категории (заголовок, содержание, нижний колонтитул). и я всегда вставляю меню и подменю в заголовок, я сначала протестировал его в файле test.html, однако, когда я применил его на своей главной странице, содержимое, похоже, перекрывает подменю.Подменю HTML/CSS не отображается
Ребята, вы знаете, как я могу это исправить?
это обычный шаблон я использовал (без подменю, его работает отлично)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample website</title>
<link href="style.css" rel="stylesheet" />
<!--internal style -->
</head>
<body>
<div id="container">
<header id="header">
<div id="menu" class="menu">
<ul class="menu2">
<li class="child"><a href="index.php" > HOME </a> </li>
<li><a href="#"> ABOUT THE PRODUCT </a>
<ul class="sub">
<li> <a href="#" > PRODUCT </a> </li>
<li> <a href="#" > PRODUCT REVIEWS </a> </li>
</ul>
</li>
<li> <a href="#" > BLOG </a>
<ul>
<li> <a href="#" > ARTICLES </a> </li>
<li> <a href="#" > RECIPES </a> </li>
</ul>
</li>
<li> <a href="#" > ABOUT US </a> </li>
<li> <a href="#" > CONTACT US </a> </li>
</ul>
</div>
</header>
<section id="content">
<h2>Welcome visitor!</h2>
<div id="news">
<center>
<p> insert text here </p>
</center>
</div>
</section>
<footer id="footer">
<div id="fmenu" class="fmenu">
<p>©2015 ALL RIGHTS RESERVED</p>
</footer>
</div>
</div>
</body>
</html>
здесь скриншот
я думаю, что его CSS-код для других моих вещей , поэтому il измените его. смотрите здесь, им не используя все в CSS, его просто шаблон я обычно делаю
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
margin-left: 20px;
margin-top: -25px;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
/* css starts here*/
body {
background: url(images/background.jpg);
font-family: Verdana !important;
font-size: 10pt;
line-height: 20px;
}
#header {
background: url(images/smoothteamLOGO2.jpg) no-repeat;
min-height: 270px;
overflow: hidden;
background-size: 100%;
}
#content {
background: #fff;
float: left;
width: 100%;
}
#container {
width: 826px;
margin: 0 auto;
box-shadow: 0 0 5px 1px #ccc;
}
/* added codes*/
#menu {
margin:0;
padding:0;
overflow: hidden;
}
#menu ul {
padding: 0;
margin-top: 245px;
line-height:30px;
margin-left:35px;
}
#menu li{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
}
#menu ul li {
display: inline-block;
}
#menu ul li a {
font-size: 14px;
font-weight: bold;
padding: 1px 14px 0;
margin: 0px;
color: #fff;
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
height:30px;
width:120px;
display:block;
text-shadow:1px 1px 1px #000;
padding-bottom:25px;
}
#menu ul ul{
position:absolute;
visibility:hidden;
top:32px;
}
#menu ul li:hover ul{
visibility:visible;
}
/*******************************/
#menu li:hover{
opacity: 0.6;
filter: alpha(opacity=60);
}
#menu ul li:hover ul li a:hover{
background:#ccc;
color:#000;
}
#menu a:hover{
color:#000;
}
.clearFloat{
clear:both;
margin:0;
padding:0;
}
ul.menu
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
margin-top: -47px;
margin-left: -35px;
font-size: 13px;
}
li.menu
{
display: inline-block;
}
a:link,a:visited
{
text-decoration:none;
}
a:hover,a:active
{
text-decoration: underline;
}
h2 {
text-align: left;
font-size: 25px;
margin-top: 16px;
font-weight: bold;
line-height: 28px;
color: #000;
margin: 10px 10px;
padding: 13px 10px;
}
#content p {
margin: 30px 30px;
}
#footer {
background: url(images/background2.jpg);
min-height: 25px;
background-size: 100%;
clear: both;
}
#fmenu ul {
padding: 0;
margin-top: 120px;
padding-top: 19px;
}
#fmenu ul li {
display: inline-block;
}
#fmenu ul li a {
font-size: 14px;
font-weight: bold;
padding: 1px 14px 0;
margin-top: 0px;
color: #000000;
}
ul.fmenu
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
margin-top: -47px;
margin-left: -35px;
font-size: 13px;
}
li.fmenu
{
display: inline-block;
color:: black;
}
#footer p {
margin-top: 10px;
margin-left: 209px;
display: inline;
width: 850px;
font-size: 11px;
color: #fff;
}
#signup form{
width: 400px;
}
#signup form ul{
list-style-type: none;
margin-left: 20px;
}
#signup ul li{
margin: 15px, 0;
}
#signup form label{
display: block;
}
#signup form input, textarea, select{
padding: 5px;
border: #ccc 3px solid;
width: 100%;
}
#news ul li{
list-style-type:none;
margin-left: 30px;
}
Я попробовал это, но он все еще не работает t позвольте мне просмотреть его, il попытаться опубликовать изображение, чтобы сделать мой вопрос ясным. – MisaChan
@MisaChan Посмотрите на корзину, он работает. Это живой рабочий пример. Вы можете это увидеть? –
thats weird mind появляется таким образом, есть способ, которым я могу опубликовать изображение для вас, чтобы увидеть? – MisaChan