我想让我的弹出菜单可以触摸。但它消失了。我已经阅读了一些关于此的内容，但这些都不起作用:
- 将 display:none 放在 hover 上方似乎没有任何影响。
- 将 #navbar ul ul 中的 position: absolute 更改为 position: relative 确实有所不同，但它弄脏了我的 nav-bar 。必须有更简单的方法。至少我希望如此。
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">
© 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%;
}
这是 fiddle 的链接:http://jsfiddle.net/KsAZ8/2339/
最佳答案
这是因为您的下拉菜单和顶级导航项之间的空间很小。如果你移动鼠标的速度非常快，问题就解决了，但这不是必需的。例如，您可以将 margin-top 设置为 0。
关于html - 下拉菜单在触摸前消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31618999/