CODEWITHSUNDEEP
htmlcss
user3660857
user3660857

Reputation: 335

Trouble aligning child menus with parent items

Hi im trying to create a navigation bar which when you hover the li another list come out from the side to show other options. My problem I can get to align with the first li but I'm not sure how to do it with the rest of the list. At the moment the drop down list stays in the same position.

Im sure I haven't explained it well enough here is my code.

<body class="menu">
<header>
    <nav class="menu-side">
    <ul>
              <li class="icon-home"><a href="Premiership.html"><span>Home</span></a></li>

            <li class="arrow"> <a  class="star" href="#">England</a>
                <ul>
                    <li><a class="ee" href="Premiership.html">Premiership</a>
                    </li>
                    <li><a href= "Unavailble.html">Championship</a>
                    </li>
                    <li><a href="Unavailble.html">League 1</a>
                    </li>
                    <li><a href="Unavailble.html">League 2</a>
                    </li>
                </ul>
            </li>
            <li class="arrow"> <a  href="#">France</a>
                <ul >
                    <li id="r"><a class="ee" href="Unavailble.html">Ligue 1</a> 
                    </li>
                </ul>
            </li>
            <li class="arrow"> <a href="#">Germany </a>

                <ul>
                    <li><a class="ee" href="Unavailble.html">Bundesliga</a>
                    </li>
                </ul>
            </li>
            <li class="arrow"> <a href="#">Italy</a>

                <ul>
                    <li><a class="ee" href="Unavailble.html">Serie A</a>
                    </li>
                </ul>
            </li>
            <li class="arrow"> <a href="#">Spain</a>
                <ul>
                    <li><a  class="ee" href="Unavailble.html">La Liga</a>
                    </li>
                </ul>
            </li>
        </ul>    
    </nav>

    </header>


</body>

https://jsfiddle.net/2zov6q2v/

Upvotes: 1

Views: 75

Answers (4)

Jacob
Jacob

Reputation: 2165

See this updated JSFiddle. Set li's to position: relative; and ul ul's to position: absolute. From there you can set ul ul's left to 100%. This pushes them all the way to the right of the parent. You can use left: calc(100% + 5px) to account for li's white right border when hovered. No need for messy margins.

Upvotes: 1

Chandru
Chandru

Reputation: 133

Change this style

.menu{
	position: relative;
	left: 0;
	
}

.menu-open{
left: 0;


}

.menu-open .menu-side{
left: 0;

}

.menu-side, menu {
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;

}

.menu-side{
	background-color: #333;
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 210px;
	height: 100%;
	padding: 2px;
}

body{
display: block;
	margin: 8px;
background: #f0f0f0;
}


nav ul{
    background-color: #43a286;
	color:white;
    padding: 0;
	text-align: center;
	margin: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: max-height 0.4s;
	-ms-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	-o-transition: max-height 0.4s;
	transition: max-height 0.4s;
}

nav ul li{
    display: block;
    padding: 20px;
    width: 80%;
    text-align: center;
    position: relative;
}

nav ul li:hover {
background-color: #399077;
	
}

nav ul .arrow:hover{
border-right: 10px solid white;
border-right-width: thick;
width: 79%;
}

nav ul ul {
	height: auto;
	display: none;
	background-color: #399077;
	left: 212px;
    position: absolute;
    top: 0;
	z-index:150;
}

nav ul ul li{
  display: block;
    width:75%;
	text-align: center;
}


nav ul li:hover ul{

	  display: block;
      width: 165px;
}

/*nav .ee:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 8px solid black;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  position: absolute;
  z-index: 1;
  top: 0%;
  left: 50%;
  margin-left: -6px
} */

nav ul li a, visited{
color:white;
font-family: 'CFJackStory-Regular', Helvetica, Arial, sans-serif;
display: block;
text-decoration: none;
}

nav ul ul li a:hover{
color:white;
font-size: 20px;
}
<body class="menu">
<header>
	<nav class="menu-side">
	<ul>
			  <li class="icon-home"><a href="Premiership.html"><span>Home</span></a></li>
			
            <li class="arrow"> <a  class="star" href="#">England</a>
                <ul>
                    <li><a class="ee" href="Premiership.html">Premiership</a>
                    </li>
                    <li><a href= "Unavailble.html">Championship</a>
                    </li>
                    <li><a href="Unavailble.html">League 1</a>
                    </li>
                    <li><a href="Unavailble.html">League 2</a>
                    </li>
                </ul>
            </li>
            <li class="arrow"> <a  href="#">France</a>
                <ul >
                    <li id="r"><a class="ee" href="Unavailble.html">Ligue 1</a> 
                    </li>
                </ul>
            </li>
            <li class="arrow"> <a href="#">Germany </a>

                <ul>
                    <li><a class="ee" href="Unavailble.html">Bundesliga</a>
                    </li>
                </ul>
            </li>
            <li class="arrow"> <a href="#">Italy</a>

                <ul>
                    <li><a class="ee" href="Unavailble.html">Serie A</a>
                    </li>
                </ul>
            </li>
            <li class="arrow"> <a href="#">Spain</a>
                <ul>
                    <li><a  class="ee" href="Unavailble.html">La Liga</a>
                    </li>
                </ul>
            </li>
        </ul>    
	</nav>
	
	</header>
	
	
</body>

Upvotes: 1

Keammoort
Keammoort

Reputation: 3075

Change margin of your lists:

nav ul ul {
    height: auto;
    display: none;
    position:absolute;
    background-color: #399077;
    margin-left: 89.5%;
    //top: 9%; delete this line
    margin-top: -38px; //add this line
    z-index:150;
}

jsfiddle

Upvotes: 1

isherwood
isherwood

Reputation: 61114

.menu {
  position: relative;
  left: 0;
}
.menu-open {
  left: 0;
}
.menu-open .menu-side {
  left: 0;
}
.menu-side,
menu {
  -webkit-transition: left 0.2s ease;
  -moz-transition: left 0.2s ease;
  transition: left 0.2s ease;
}
.menu-side {
  background-color: #333;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 210px;
  height: 100%;
  padding: 2px;
}
body {
  display: block;
  margin: 8px;
  background: #f0f0f0;
}
nav ul {
  background-color: #43a286;
  /* overflow: hidden; <----------------- here */
  color: white;
  padding: 0;
  text-align: center;
  margin: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: max-height 0.4s;
  -ms-transition: max-height 0.4s;
  -moz-transition: max-height 0.4s;
  -o-transition: max-height 0.4s;
  transition: max-height 0.4s;
}
nav ul li {
  display: block;
  padding: 20px;
  width: 80%;
  text-align: center;
  position: relative; /* <------------------ and here */
}
nav ul li:hover {
  background-color: #399077;
}
nav ul .arrow:hover {
  border-right: 10px solid white;
  border-right-width: thick;
  width: 79%;
}
nav ul ul {
  height: auto;
  display: none;
  position: absolute;
  background-color: #399077;
  left: 89.5%;
  top: 9%;
  z-index: 150;
}
nav ul ul li {
  display: block;
  width: 75%;
  text-align: center;
}
nav ul li:hover ul {
  display: block;
  width: 165px;
}
/*nav .ee:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 8px solid black;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  position: absolute;
  z-index: 1;
  top: 0%;
  left: 50%;
  margin-left: -6px
} */

nav ul li a,
visited {
  color: white;
  font-family: 'CFJackStory-Regular', Helvetica, Arial, sans-serif;
  display: block;
  text-decoration: none;
}
nav ul ul li a:hover {
  color: white;
  font-size: 20px;
}
<body class="menu">
  <header>
    <nav class="menu-side">
      <ul>
        <li class="icon-home"><a href="Premiership.html"><span>Home</span></a>
        </li>
        <li class="arrow"> <a class="star" href="#">England</a>

          <ul>
            <li><a class="ee" href="Premiership.html">Premiership</a>

            </li>
            <li><a href="Unavailble.html">Championship</a>

            </li>
            <li><a href="Unavailble.html">League 1</a>

            </li>
            <li><a href="Unavailble.html">League 2</a>

            </li>
          </ul>
        </li>
        <li class="arrow"> <a href="#">France</a>

          <ul>
            <li id="r"><a class="ee" href="Unavailble.html">Ligue 1</a> 
            </li>
          </ul>
        </li>
        <li class="arrow"> <a href="#">Germany </a>

          <ul>
            <li><a class="ee" href="Unavailble.html">Bundesliga</a>

            </li>
          </ul>
        </li>
        <li class="arrow"> <a href="#">Italy</a>

          <ul>
            <li><a class="ee" href="Unavailble.html">Serie A</a>

            </li>
          </ul>
        </li>
        <li class="arrow"> <a href="#">Spain</a>

          <ul>
            <li><a class="ee" href="Unavailble.html">La Liga</a>

            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </header>
</body>

Upvotes: 1

Related Questions