CODEWITHSUNDEEP
htmlcssdrop-down-menu
MisaChan
MisaChan

Reputation: 279

HTML/CSS Submenu not visible

I am making a page where there should be a sub menu. In my page, i divided it into 3 category (header, content, footer). and I always insert the menu and sub menu in the header, I first tested it out in a test.html file, however, when i applied it in my main page, the content seems to be overlapping the sub menu.

do you guys have any idea on how i could fix this?

this is the usual template i used(without the sub menu, its working fine)

<!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>

here is a screenshot

enter image description here

i think its the css for my other things, so il change it. see here, im not using everything in the css, its just the template i usually do

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;
}

Upvotes: 1

Views: 861

Answers (3)

MisaChan
MisaChan

Reputation: 279

well in my question above, after searching so many forums, this one worked on me. I already knew it was the content that was blocking my drop down, coz when i move the ul up, you could see the text, i made a few adjustments as well. then when my drop down appeared, i was unable to click the sub menu that hits the content part. in a forum(that talks about opacity, another problem I'm encountering now), it says when there are 2 divs, it would affect everything, correct me if i wrong xD thats what i have read, so ok, they he said add this on that content page, so i added this line of code

position:relative;

and yes it worked :)

this is the what happens earlier, then add position: relative on #content to see the fix

https://jsbin.com/zulese/1/edit?html,css,output

Upvotes: 0

Danny B
Danny B

Reputation: 206

overflow:hidden on your css should fix it. This way it won't go over what you have defined.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

Just add overflow: hidden to here:

#menu {
  margin:0;
  padding:0;
  overflow: hidden;
}

Bin: http://jsbin.com/mezilowiva/edit?css,output

Upvotes: 1

Related Questions