omer omer - 4 months ago 9
HTML Question

Drop down menu disapper before touched

I am trying to make my pop up menu touchable. But it disappears. I have read a little bit about this and none of these things work:
- putting the

display:none
above the
hover
didn't seem to have any affect.
- changing the
position: absolute
in
#navbar ul ul
to
position: relative
does make a different but it smushes my
nav-bar
. There's got to be an easier way. At least I hope so.

HTML:

<!doctaype>
<html>
<head>
<link type="text/css" rel="stylesheet" href="omer1.css">
<link type="text/css" rel="stylesheet" href="omer1media.css">
</head>
<body>
<div id="header">
<h3>my_ducati.com</h3>
</div>
<div id="navbar">
<ul >
<li ><a href="#">home</a></li>
<li ><a href="#">menu</a></li>
<li ><a href="#">about</a></li>
<li ><a href="#">social</a>
<ul >
<li><a href="https://www.facebook.com/">facebook</a></li>
<li><a href="https://www.facebook.com/">youtube</a></li>
<li><a href="https://thepiratebay.se/">thepiratebay</a></li>
</ul>
</li>
</ul/>
</div>
<div class="sideright price1">
<h2>prices $$$ 1</h2>
<p>allot of money</p>
<p>some more of that sweet sweet money</p>
<p>just a little bit of that</p>
<p>money money money </p>
</div>

<div class="sideleft price3">
<h2>prices $$$ 3</h2>
<p>allot of money</p>
<p>some more of that sweet sweet money</p>
<p>just a little bit of that</p>
<p>money money money </p>
</div>

<div class="sideright price2">
<h2>prices $$$ 2</h2>
<p>allot of money</p>
<p>some more of that sweet sweet money</p>
<p>just a little bit of that</p>
<p>money money money </p>
</div>

<div class="sideleft price4">
<h2>prices $$$ 4</h2>
<p>allot of money</p>
<p>some more of that sweet sweet money</p>
<p>just a little bit of that</p>
<p>money money money </p>
</div>

<div>
<img class="picsidbarright" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQJfN4FkcUduNWHxpFB62YH1O8WjaM3seuHtwPXfjmh83HOVW77">
</div>

<div>
<img class="picsidbarleft" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQJfN4FkcUduNWHxpFB62YH1O8WjaM3seuHtwPXfjmh83HOVW77">
</div>

<div class="main">
<h1>ducati</h1>
<p>
Ducati Motor Holding S.p.A. is an Italian company that designs and manufactures motorcycles. Headquartered in Bologna, Italy,
Ducati is owned by German automotive manufacturer Audi through its Italian subsidiary Lamborghini, which is all owned by the
Volkswagen Group
<br/><br>
In 1926 Antonio Cavalieri Ducati and his three sons, Adriano, Marcello, and Bruno Cavalieri Ducati; founded Società
Scientifica Radio Brevetti Ducati in Bologna to produce vacuum tubes, condensers and other radio components. In 1935 they
had become successful enough to enable construction of a new factory in the Borgo Panigale area of the city. Production
was maintained during World War II, despite the Ducati factory being a repeated target of Allied bombing
<br/><br>
Meanwhile, at the small Turinese firm SIATA (Societa Italiana per Applicazioni Tecniche Auto-Aviatorie),
Aldo Farinelli began developing a small pushrod engine for mounting on bicycles. Barely a month after the official liberation
of Italy in 1944, SIATA announced its intention to sell this engine, called the "Cucciolo"
(Italian for "puppy," in reference to the distinctive exhaust sound) to the public. The first Cucciolos were available alone,
to be mounted on standard bicycles, by the buyer; however, businessmen soon bought the little engines in quantity, and offered complete motorized-bicycle units for sale.
</p>



</div>

<div class="main">
<h1>Motorcycle designs</h1>
<p>
Ducati is best known for high performance motorcycles characterized by large capacity four-stroke, 90° V-twin engines,[12] with a desmodromic valve design.
[13] Ducati refers to this configuration as L-twin because one cylinder is vertical while the other is horizontal, making it look like a letter "L". Modern
Ducatis remain among the dominant performance motorcycles available today partly because of the desmodromic valve design, which is nearing its 50th year of use.
Desmodromic valves are closed with a separate, dedicated cam lobe and lifter instead of the conventional valve springs used in most internal combustion engines in consumer vehicles.
This allows the cams to have a more radical profile, thus opening and closing the valves more quickly without the risk of valve-float, which causes a loss of power that is likely when
using a "passive" closing mechanism under the same conditions
<br/><br>
While most other manufacturers use wet clutches (with the spinning parts bathed in oil)[14] Ducati previously used multiplate
dry clutches in many of their motorcycles. The dry clutch eliminates the power loss from oil viscosity drag on the engine,
even though the engagement may not be as smooth as the oil-bath versions, but the clutch plates can wear more rapidly.
Ducati has converted to wet clutches across their current product lines
<br/><br>
Ducati also extensively uses the Trellis Steel Frame configuration,
although Ducati's MotoGP project broke with this tradition by introducing a revolutionary carbon fibre frame for the Ducati Desmosedici GP9.
</p>

</div>

<div id="footer">
&copy; feel free to still. I do not give a...
</div>

</body>
</html>


CSS:

body{
background-color:gray;
margin: 0px;
font-family:Verdana,Georgia,serif;
font-size:14px;
position:relative;

}

#header{
background-color:blue;
margin: 10px;
height:90px;
border-radius:5px;
text-align:center;
}

h3{
font-size:250%;
color:lightgray;
font-family:"Century Gothic","Gill sans",Arial;
padding:20px 0px 0px 0px;
margin:0px;
text-align:center;
}
#navbar ul ul{
position:absolute;
display:none;
text-align:left;
background-color:#333;
border:5px solid #222;
border-top:0;
margin-left:-5px;
/* margin-bottom:-5px; */
min-width:200px;
}

#navbar{
background-color:blue;
margin: 10px;
height:35px;
border-radius:5px;
}

#navbar ul {
list-style-type:none;
position:relative;/*puts the pop menu under the navbar...*/
text-align:center;
color:purple;
margin:10px;
border-radius:5px;
padding:5px;

}

#navbar ul li{
display:inline-block;

}

#navbar ul li a, visited{
text-decoration:none;
font-family:Arial;
color:#fff;
padding: .2em 1em;
display:block;


}

#navbar ul li:hover{
background-color:#fff;

}
#navbar ul li a:hover{
display: block;
background-color:#fff;
color:black;
text-decoration:none;

}

#navbar ul li:hover ul{
display:block;

}

#navbar ul ul li{
display:block;

}
#navbar ul ul li a,visited{
color:white;
display: block;
}
#navbar ul ul li a:hover{
color:#099;
display: block;

}

.main{
background-color:lightskyblue;
margin: 10px 240px 10px 240px;
border-radius:5px;
padding:20px;
font-size: 110%;
}

h1{
color:green;
font-size:120%;
}

h2{
color:green;
font-size:120%;
}
.sideright{
background-color:lightgreen;
margin: 0px 10px 10px 10px;
border-radius:5px;
padding:20px;
font-size: 105%;
float:right;
width:180px;
clear:right;
white-space:normal;
text-align:center;
}
.sideleft{
background-color:lightblue;
margin: 0px 10px 10px 10px;
border-radius:5px;
padding:20px;
font-size: 105%;
float:left;
width:180px;
clear:left;
white-space:normal;
text-align:center;
}

.picsidbarright{

margin: 0px 10px 10px 10px;
border-radius:5px;

font-size: 105%;
float:right;
width:220px;
clear:right;
opacity:1.0;
transition: opacity 1s ease-in-out;
}
.picsidbarleft{

margin: 0px 10px 10px 10px;
border-radius:5px;

font-size: 105%;
float:left;
width:220px;
clear:left;
opacity:1.0;
transition: opacity 1s ease-in-out;
}

.picsidbarright:hover {
opacity:0.4;
}

.picsidbarleft:hover {
opacity:0.4;
}

#footer{
background-color:blue;
margin: 10px;
height:20px;
border-radius:5px;
clear:both;
color:lightgray;
text-align:center;
padding:15px;
font-size:90%;
}


Here's a link to the fiddle : http://jsfiddle.net/KsAZ8/2339/

Answer

The problem is here

#navbar ul {
  list-style-type: none;
  position: relative;
  text-align: center;
  color: purple;
  margin: 10px; //remove this margin
  border-radius: 5px;
  padding: 5px;
}

and here add padding-top

#navbar ul ul {
  position: absolute;
  display: none;
  text-align: left;
  background-color: #333;
  border: 5px solid #222;
  border-top: 0;
  margin-left: -5px;
  /* margin-bottom: -5px; */
  min-width: 200px;
}

Note: you may need to change other css too to have the same look as current