Hello, I have a navigation bar with a dropdown menu using ol. However, when I hover over the list items, the width of the list exceeds that of the ol element. I believe this is due to the white-space: nowrap CSS property, but I want the text in the dropdown list to be displayed on a single line. How can I achieve this?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#nav ol li").hover(function(){
$(this).find("ol").show(); //mouseover
},
function(){ //mouseout
$(this).find("ol").hide();
});
});
</script>
</head>
<body>
<div class="wrapper">
<div id="header">
</div>
<div id="nav">
<ol>
<li><a href="#">Home</a></li>
<li>
<a href="#"> SHUJIN </a>
<ol>
<li><a href="manga_demo.php"> SHUJIN Episode 1</a></li>
<li style="border:none;"><a href="manga_demo2.php"> SHUJIN Episode 2 </a></li>
</ol>
</li>
<li><a href="#">Contact Us</a></li>
</ol>
</div>
</body>
</html>
CSS
body
{
margin:0px; padding:0px;
background: url("../assets/grey.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.wrapper
{
margin:auto;padding:0px;width:70%;
}
#header
{
margin:0px;padding:0px;width:100%;height:100px;float:left;
background: #99d6ff;
background-image: url(""); /* fallback */
background-image: url(""), linear-gradient(#99d6ff, #006bb3); /* W3C */
background-blend-mode: multiply;
/*background-position: 10% 50%; มีsize 100% so this will not work*/
background-size: 100%;
background-repeat: no-repeat;
-webkit-box-shadow: 0px 0px 0px 2px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
}
#nav{margin:0px;padding:0px;width:100%;float:left;
background: #80ffe5; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#80ffe5, #00b38f); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#80ffe5, #00b38f); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#80ffe5, #00b38f); /* For Firefox 3.6 to 15 */
background: linear-gradient(#80ffe5,#00b38f); /* Standard syntax */
-moz-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
-webkit-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
box-shadow: 2px 2px 3px #888, -2px 0px 3px #888;
}
#nav ol{list-style:none;margin:0px;padding:0px;}
#nav ol li{display:block;padding:6px 10px;float:left;position:relative;}
#nav ol a{display:block;padding:5px 10px;color:#000;text-decoration:none; white-space: nowrap;text-align:center;}
#nav ol a:hover{color:green;}
#nav ol li:hover{background:lightgreen;
-webkit-transition: background-color 0.5s ease-out;
-moz-transition: background-color 0.5s ease-out;
-o-transition: background-color 0.5s ease-out;
transition: background-color 0.5s ease-out;
}
#nav ol li ol li:hover{background:lightgreen;
-webkit-transition: background-color 0.5s ease-out;
-moz-transition: background-color 0.5s ease-out;
-o-transition: background-color 0.5s ease-out;
transition: background-color 0.5s ease-out;
}
#nav ol ol{position:absolute;top:35px;left:0px;display:none;z-index: 1;
background: #80ffe5; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#80ffe5, #00b38f); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#80ffe5, #00b38f); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#80ffe5, #00b38f); /* For Firefox 3.6 to 15 */
background: linear-gradient(#80ffe5,#00b38f); /* Standard syntax */
}
#nav ol ol li{border-bottom:solid 1px lightgrey;width:100%;}