PrinceRocker February 2016

Nested 'ul' tags showing unexpected output - hidding one part of menu

Basically, my idea is to split the menu stubs like 4 on left side & 2 on right side and make it fixed. accordingly i have written the html & css, but on nesting ul tag inside another ul tag(for right side 2 menu stubs), the menu is getting shorten to those 2 menu stubs(which should be on right side).

here is my HTML & CSS.

Help me.

/* CSS Document */
body {margin: 0;}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
	position: fixed;
	  top: 0;
    width: 100%;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	border-right:1px solid white;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #4CAF50;}

ul.topnav ul.right {
    float: right;
    list-style-type: none;
}

@media screen and (max-width: 600px){
    ul.topnav ul.right, 
    ul.topnav li {float: none;}
}color:black;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles\stylo.css">
<title> - </title>
</head>

<body>
<ul class="topnav">
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
        

Answers


SHBelsky February 2016

You can use float to float each element left and right; both of your topnav elements were 100% width, which was why they appeared on top of one another. I've adjusted that and a few other things for the desired effect.

/* CSS Document */

body {
  margin: 0;
  width: 100%;
}
.nav-container {
  background-color: #333;
  height: 46px;
  max-width: 100%;
  position: fixed;
  width: 100%;
}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
}
ul.topnav li {
  float: left;
}
ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-right: 1px solid white;
}
ul.topnav li a:hover:not(.active) {
  background-color: #111;
}
ul.topnav li a.active {
  background-color: #4CAF50;
}
ul.topnav ul {
  list-style-type: none;
}
ul.topnav.left {
  left: 0;
}
ul.topnav.right {
  right: 0;
}

@media screen and (max-width: 600px) {
  ul.topnav ul.right,
  ul.topnav li {
    float: none;
  }
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="styles\stylo.css">
  <title>-</title>
</head>

<body>
  <div class="nav-container">
    <ul class="topnav left">
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href=" 

Post Status

Asked in February 2016
Viewed 2,031 times
Voted 4
Answered 1 times

Search




Leave an answer