Bambi Bambi - 17 days ago 4
CSS Question

CSS - hover ul items not in vertical line

I'm brand new to

HTML
and
CSS
, and right now I'm following this tutorial. My problem see picture is that the items in my drop-down list are not in a vertical line, but all cluttered together.

I'm sure it's a simple problem with a simple solution but I am not making any progress finding one...

I would be so grateful for some suggestions! :)



* {
margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
margin-bottom: 10px;
}

/* ----- NAVIGATION BAR ----- */

#nav {
width:500px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
background-color: none;
}

#nav ul {
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}

#nav ul:after{
content: "";
clear: both;
display: block;
}

#nav ul li {
float: left;
}

#nav ul li a {
display: block;
padding: 10px 20px;
color: black;
text-decoration: none;
font-family: "Trocchi", serif;
}

#nav ul li:hover {
background: #76C5CF;
}

#nav ul li:hover a {
color: white;
}

#nav ul ul {
display: none;
background: none;
position: absolute;
top: 100%;
}

#nav ul li:hover > ul {
display: block;
}

/* ----- HEADER ----- */

#header {
width: 340px
margin: auto;
margin-top: 10px;
text-align: center;
}

#header h1 {
height: 50px;
font-family: "Trocchi", serif;
background-color:
}

#header h2 {
font-family: "Trocchi", serif;
position: relative;
display: inline;
}

/* ----- BACKGROUND ----- */
body {
background-color: #A6D7F3;
}

<!DOCTYPE html>
<html lang="en">

<head>
<title> Harley's Haunts </title>
<link rel="stylesheet" type="text/css" href="harleysHaunts.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Trocchi');
</style>
</head>

<body>

<div id="header">

<h1> HARLEY'S HAUNTS </h1>
<h2> It's a dog's world after all </h2>

</div>

<div id="nav">
<ul>
<li><a href="#"> About </a></li>
<li><a href="#"> Pet-Friendly Venues </a>
<ul>
<li><a href="#"> Cafes </a> </li>
<li><a href="#"> Restaurants </a> </li>
<li><a href="#"> Pubs/Bars </a> </li>
<li><a href="#"> Shops </a> </li>
</ul>
</li>
<li><a href="#"> Contact </a></li>
</ul>


</div>

</body>

</html>






Answer

All you have to do is add position:relative to #nav ul li :

#nav ul li {
        float: left;
        position: relative;
    }

but you should use this only for the li parent and you shouldn't use float:left in the li of the ul child.

So your css will become like this

#nav > ul > li {
     float: left;
     position: relative;
}