CODEWITHSUNDEEP
htmlcss
A tax funded religion
A tax funded religion

Reputation: 37

changing a horizontal list to vertical

So I am working on a website and want to know How I can convert the drop down list to be vertical. At the moment it's clunked up together horizontally. here is the code. I want to make the list in "services" to be a drop down list. Html

<html>
  <head>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</head>

    <body>
    <img src="logo.png" alt="Lion" style="width:150px;height:150px;">
     <img src="logo2.png" alt="logo2" style="width:550px;height:150px;">
       <div id = "Navigation">
          <ul id = "nav-bars">
              <li> <a href = "#" >Home</a></li>
              <li> <a href = "#" >About Us</a></li>
              <li> <a href = "#" >Download</a></li>
              <li> <a href = "#" >Contact</a></li>
              <li> <a href = "#" >Services</a></li>
       </ul>
           <ul id = "services">

             <li>App Development</li>
             <li>Web Development</li>
             <li>Software Consulting</li>
           </ul>
       </div>
       <div id  = "registaration">
         <a id = "Login" href = "#">Login</a>
         <a id = "Signup" href = "#">Signup</a>
       </div>

   </body>


</html>

Css

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color:   #BCD4E6;

}

li {
    float: left;

}
@font-face {
    font-family: "NavFont";
    src: url("NavFont.ttf");
}
li a {
    display: block;
    color: orange;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;


}
a{
    font-family: NavFont;
    font-size: 20px;
    text-decoration:none;
}
li a:hover {
    background-color: #ACE5EE;
}
#registaration{
     position:relative;
     bottom:200px;
     left:1300px;

}
#Login{padding:4px;}
#Signup{padding:4px;}
body{
    overflow-x:hidden;
}
#services li{

}

Upvotes: 2

Views: 3403

Answers (2)

zgood
zgood

Reputation: 12571

To achieve this, you will first have to put your submenu for services nested inside its parent nav item.

Like this:

 <ul id="nav-bars">
    <li> <a href="#">Home</a></li>
    <li> <a href="#">About Us</a></li>
    <li> <a href="#">Download</a></li>
    <li> <a href="#">Contact</a></li>
    <li class="dropdown"> <a href="#">Services</a>
      <ul id="services">
        <li>App Development</li>
        <li>Web Development</li>
        <li>Software Consulting</li>
      </ul>
    </li>
  </ul>

Then you will have to update some styles for your menu. For your parent nav <ul> style (should probably style it by id) you will need to remove the overflow: hidden; to allow the submenu to display, and add an :after style as a clearfix to clear the first level of floated <li>'s

#nav-bars {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #BCD4E6;
}

#nav-bars:after {
  content: '';
  display:block;
  clear: both;
}

Next add position: relative; to your <li> so you can position the submenu off of it

li {
  float: left;
  position: relative;
}

Next style your submenu to be hidden by default and to only show on hover of the parent <li>

li.dropdown:hover > ul {
  display: block
}

#nav-bars > li.dropdown > ul {
  display:none;
  position: absolute;
  top: 100%;
  left: 0;

  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #BCD4E6
}

And lastly, to your original question, to get the submenu items to stack vertically simply remove the float:left;

#nav-bars > li.dropdown > ul > li {
  float: none;
}

Example:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #BCD4E6;
}

ul:after {
  content: '';
  display:block;
  clear: both;
}

li {
  float: left;
  position: relative;
}

li:hover > ul {
  display: block
}

ul > li > ul {
  display:none;
  position: absolute;
  top: 100%;
  left: 0;
}

ul > li > ul > li {
  float: none;
}

@font-face {
  font-family: "NavFont";
  src: url("NavFont.ttf");
}

li a {
  display: block;
  color: orange;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

a {
  font-family: NavFont;
  font-size: 20px;
  text-decoration: none;
}

li a:hover {
  background-color: #ACE5EE;
}

#registaration {
  position: relative;
  bottom: 200px;
  left: 1300px;
}

#Login {
  padding: 4px;
}

#Signup {
  padding: 4px;
}

body {
  overflow-x: hidden;
  height: 100%;
}

#services li {}
<img src="logo.png" alt="Lion" style="width:150px;height:150px;">
<img src="logo2.png" alt="logo2" style="width:550px;height:150px;">
<div id="Navigation">
  <ul id="nav-bars">
    <li> <a href="#">Home</a></li>
    <li> <a href="#">About Us</a></li>
    <li> <a href="#">Download</a></li>
    <li> <a href="#">Contact</a></li>
    <li> <a href="#">Services</a>
      <ul id="services">

        <li>App Development</li>
        <li>Web Development</li>
        <li>Software Consulting</li>
      </ul>
    </li>
  </ul>

</div>
<div id="registaration">
  <a id="Login" href="#">Login</a>
  <a id="Signup" href="#">Signup</a>
</div>

Upvotes: 4

Arashtad
Arashtad

Reputation: 254

In the solution I provided, .parent class handles the display mode on hover event. So you can add class="parent" to parent list items and put as submenus. Also, you need to relocate the child ul this way:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <img src="logo.png" alt="Lion" style="width:150px;height:150px;">
        <img src="logo2.png" alt="logo2" style="width:550px;height:150px;">
        <div id = "Navigation">
            <ul id = "nav-bars">
                <li><a href = "#" >Home</a></li>
                <li><a href = "#" >About Us</a></li>
                <li><a href = "#" >Download</a></li>
                <li><a href = "#" >Contact</a></li>
                <li class="parent">
                    <a href = "#">Services</a>
                    <div class="dropdown">
                        <ul id = "services">
                            <li>App Development</li>
                            <li>Web Development</li>
                            <li>Software Consulting</li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <div id  = "registaration">
            <a id = "Login" href = "#">Login</a>
            <a id = "Signup" href = "#">Signup</a>
        </div>
    </body>
</html>

Also, modify your CSS as follows:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color:   #BCD4E6;
}
li {
    float: left;
}
@font-face {
    font-family: "NavFont";
    src: url("NavFont.ttf");
}
li a {
    display: block;
    color: orange;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
a {
    font-family: NavFont;
    font-size: 20px;
    text-decoration:none;
}
li a:hover {
    background-color: #ACE5EE;
}
#registaration {
     position:relative;
     bottom:200px;
     left:1300px;
}
#Login {
    padding:4px;
}
#Signup {
    padding:4px;
}
body {
    overflow-x:hidden;
}
.dropdown {
    display: none;
    top: -9999em;
    position: absolute;
    width: 180px;
}
.parent:hover .dropdown {
    display: block;
    top: auto;
}
#services li {
    display: block;
    padding: 10px 15px;
}

Upvotes: 1

Related Questions