Jump to content

What's wrong with my dropdown menu why does it takes the entire line when it dropdown?


giannis196

Recommended Posts

hi, yesterday i started to write code of a page for fun and i came across one problem.
my dropdown menu takes the entire line + it push down the left menu (it's id is Smenu for "small menu")

here is my html code:
 

<html>
<head>
<title>Website</title>
<link rel="stylesheet" type="text/css" href="Style.css">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<body>
    <div>
        <ul class="navmenu">
            <li><a href="#Home">Home</a></li>
            <li><a href="#News">News</a></li>
            <li id="rolldown"><a href="#Contact"><span id="sArrow">Contact&#9660;</span></a>
                <ul class="dropdown">
                    <li>telephones</li>
                    <li>email</li>
                    <li>mail</li>
                    <li>fax</li>
                </ul>
            </li>
        </ul>

<div>
<div id="container">
    This is our website, feel free to contact us if you don't find something that you need.
</div>
</div>

<div id="Smenu">
        <div>
<ul>
<a href="#history"><li  class="top">Our history</li></a>
<a href="#workers"><li>Our workers</li></a>
<a href="#buildings"><li>Our buildings</li></a>
<a href="#tools"><li>Our tools</li></a>
<a href="#targets"><li>Our targets</li></a>
<a href="#ourjob"><li>Our job so far</li></a>
<a href="#havedone"><li class="bottom">What we've done</li></a>
</ul>
</div>
</div>
</div>
</body>
</html>

and here is my css code:

html, body {
    margin: 0;
}
html{
    height: 100%;
    background-image: linear-gradient(rgb(189, 189, 189), rgb(88, 88, 88))
}
/*-------------navmenu---------*/
.navmenu{
    
    overflow: hidden;
    background-color: gold;
    text-decoration: none;
    display: block;
    font-size: 20px;
    color: white;
    text-align: center;
    margin-top: 1%;
}
.navmenu a{
    text-decoration: none;
}
.navmenu li{
    float: left;
    color: darkslategray;
    list-style-type: none;
    padding-right: 50px;
    padding-left: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 100%;
}
.navmenu li:hover{
    background-color: lightgreen;
}
.navmenu li:active{
    background-color: darkgreen;
    color: lightgray;
}
  .dropdown{
      display: none;
}
#rolldown:hover > .dropdown, .dropdown:hover{
       display: block;
       background-color: lightgreen;
}
#rolldown:hover > .dropdown, .dropdown:active{
    display: block;
    background-color: darkgreen;
}
.dropdown{
    width: 200px;
    z-index: -2;
}
/*---------Smenu--------------*/
#Smenu .bottom{
    border-radius: 0px 0px 10px 10px;
}
#Smenu .top{
    border-radius: 10px 10px 0px 0px;
}
#Smenu ul{
    text-align: center;
}
#Smenu ul li{
    font-size: 150%;
    margin-left: -40px;
    list-style-type: none;
    padding-bottom: 5%;
    padding-top: 5%;
}
#Smenu{
    transform: translateY(30%);
    left: 1%;
    width: 10%;
    position: relative;
    background-color: greenyellow;
    border-radius: 10px 10px 10px 10px;
}
#Smenu a:visited{
    color: darkblue;
}
#Smenu a:link{
    color: darkblue;
    text-decoration: none;
}
#Smenu li:hover{
    background-color: green
}
#Smenu li:active{
    background-color: darkgreen;
    color: blue;
}
/*------------container---------*/
@media all and (orientation: landscape){
#container{
    position: absolute;
    left: 20%;
    top: 30%;
    min-height: 40%;
    min-width: 60%;
    background-color: rgba(100, 200, 255, 50%);
    z-index: -20;
}
}
@media all and (orientation: portrait){
    #container{
        position: absolute;
        left: 20%;
        top: 30%;
        min-height: 60%;
        min-width: 30%;
        background-color: rgba(100, 200, 255, 50%);
    }
    }
#container{
    border: 5px solid black;
    border-radius: 0px 15px 0px 15px;
}

so, what's wrong with it?
1) why does it takes the entire line
2) why does it push down the "Smenu"?


Thanks!

Link to comment
Share on other sites

ok i figured out what's wrong with the dropdown i had add a css style to the entire navbar

i still have 2 more problems that i can't figure out:
1) the dropdown menu (at "Contact") adding space to the left as a result it's moving when someone hover the mouse over it
2) the Smenu that's at the left stills moving down when the dropdown menu opens

here is my html code:

 

<html>
<head>
<title>Website</title>
<link rel="stylesheet" type="text/css" href="Style.css">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<body>
    <div class="navmenubg">&nbsp;</div>
    <div>
        <ul class="navmenu">
            <li><a href="#Home">Home</a></li>
            <li><a href="#News">News</a></li>
            <li id="rolldown"><a href="#Contact"><span id="sArrow">Contact&#9660;</span></a>
                <ul class="dropdown">
                    <li>telephones</li>
                    <li>email</li>
                    <li>mail</li>
                    <li>fax</li>
                </ul>
            </li>
        </ul>

<div>
<div id="container">
    This is our website, feel free to contact us if you don't find something that you need.
</div>
</div>

<div id="Smenu">
        <div>
<ul>
<a href="#history"><li  class="top">Our history</li></a>
<a href="#workers"><li>Our workers</li></a>
<a href="#buildings"><li>Our buildings</li></a>
<a href="#tools"><li>Our tools</li></a>
<a href="#targets"><li>Our targets</li></a>
<a href="#ourjob"><li>Our job so far</li></a>
<a href="#havedone"><li class="bottom">What we've done</li></a>
</ul>
</div>
</div>
</div>
</body>
</html>

and here is my css code:

 

html, body {
    margin: 0;
}
html{
    height: 100%;
    background-image: linear-gradient(rgb(189, 189, 189), rgb(88, 88, 88))
}
/*-------------navmenu---------*/
.navmenubg{
    background-color: rgba(255, 217, 0, 0.5);
    position: fixed;
    left: 0px;
    width: 100%;
    opacity: 10%;
    height: 43px;
    z-index: -60000;
  }

.navmenu{
    overflow: hidden;
    text-decoration: none;
    display: block;
    font-size: 20px;
    color: white;
    margin-top: 1%;
}
.navmenu a{
    text-decoration: none;
}
.navmenu li{
    float: left;
    color: darkslategray;
    list-style-type: none;
    padding-right: 50px;
    padding-left: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 100%;
}
.navmenu li:hover{
    background-color: lightgreen;
}
.navmenu li:active{
    background-color: darkgreen;
    color: lightgray;
}
  .dropdown{
      display: none;
}
#rolldown:hover > .dropdown, .dropdown:hover{
       display: block;
       background-color: lightgreen;
}
#rolldown:hover > .dropdown, .dropdown:active{
    display: block;
    background-color: darkgreen;
}
.dropdown{
    width: 200px;
    z-index: -2;
}
/*---------Smenu--------------*/
#Smenu .bottom{
    border-radius: 0px 0px 10px 10px;
}
#Smenu .top{
    border-radius: 10px 10px 0px 0px;
}
#Smenu ul{
    text-align: center;
}
#Smenu ul li{
    font-size: 150%;
    margin-left: -40px;
    list-style-type: none;
    padding-bottom: 5%;
    padding-top: 5%;
}
#Smenu{
    transform: translateY(30%);
    left: 1%;
    width: 10%;
    position: relative;
    background-color: greenyellow;
    border-radius: 10px 10px 10px 10px;
}
#Smenu a:visited{
    color: darkblue;
}
#Smenu a:link{
    color: darkblue;
    text-decoration: none;
}
#Smenu li:hover{
    background-color: green
}
#Smenu li:active{
    background-color: darkgreen;
    color: blue;
}
/*------------container---------*/
@media all and (orientation: landscape){
#container{
    position: absolute;
    left: 20%;
    top: 30%;
    min-height: 40%;
    min-width: 60%;
    background-color: rgba(100, 200, 255, 50%);
    z-index: -20;
}
}
@media all and (orientation: portrait){
    #container{
        position: absolute;
        left: 20%;
        top: 30%;
        min-height: 60%;
        min-width: 30%;
        background-color: rgba(100, 200, 255, 50%);
    }
    }
#container{
    border: 5px solid black;
    border-radius: 0px 15px 0px 15px;
}

can someone figure out how to solve those 2 problems?
Thanks!

Edited by giannis196
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...