我想让我的弹出式菜单可触摸。但它消失了。我已经阅读了一些关于这一点的内容，但这些都不起作用：
- 将display:none置于hover之上似乎没有任何影响。
- 将position: absolute中的#navbar ul ul更改为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%;
}
这是指向小提琴的链接：http://jsfiddle.net/KsAZ8/2339/
答案 0 :(得分：2)
这是因为您的下拉列表和顶级导航项之间有一个小空间。如果你快速移动鼠标就可以解决问题，但这并不是必需的。例如，您可以将margin-top设置为0。
<强> Demo
答案 1 :(得分：1)
问题出在这里
#navbar ul {
list-style-type: none;
position: relative;
text-align: center;
color: purple;
margin: 10px; //remove this margin
border-radius: 5px;
padding: 5px;
}
此处添加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;
}
注意：您可能还需要更改其他css以使其具有与当前相同的外观