I'm having trouble making my pop-up menu touchable. It keeps disappearing. I've tried a few things but nothing seems to work:
- Placing the display:none above the hover didn't make a difference.
- Changing the position: absolute in #navbar ul ul to position: relative did change something but messed up my nav-bar. There must be a simpler solution. Hopefully.
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>
/* Remaining HTML code omitted for brevity */
#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/