title: CSS: Menu Dropdown showing horizontally
body: <p>I want to bring 3 items(Dvr &amp; Kits.spy camares,alarmes) under drop down menu for Products but these items are also coming horizontally inside bottom_menu
  please help me i am new in css</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> * {
     margin: 0px;
     padding: 0px;
   }
   .header_wrap {
     width: 100%;
     height: 160px;
     background: red;
     position: relative;
   }
   .main_wrap {
     width: 100%;
     height: 1475px;
     background: green;
   }
   .footer_wrap {
     width: 100%;
     height: 325px;
     background: aqua;
   }
   .main {
     width: 1000px;
     height: 100%;
     background: blue;
     margin: auto;
   }
   footer {
     width: 1000px;
     height: 100%;
     background: aqua;
     margin: auto;
   }
   .header_top_wrap {
     width: 100%;
     height: 23px;
     background: #ccc;
   }
   .header_bottom_wrap {
     width: 100%;
     height: 40px;
     background: #06F;
     position: absolute;
     bottom: 0px;
     left: 0px;
   }
   .header_top {
     width: 1000px;
     height: 100%;
     background: purple;
     margin: auto;
   }
   .header_bottom {
     width: 1000px;
     height: 100%;
     background: black;
     margin: auto;
   }
   .bottom_menu &gt; li {
     display: inline-block;
   }
   .bottom_menu &gt; li &gt;a {
     display: block;
     text-decoration: none;
     color: #fff;
     font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
     padding: 0px 65px;
     height: 45px;
     line-height: 45px;
     text-align: center;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Welcome to Cctvcart store&lt;/title&gt;
    &lt;link rel="stylesheet" href="css/style.css" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div class="header_wrap"&gt;
      &lt;div class="header_top_wrap"&gt;
        &lt;div class="header_top"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--end of header top wrap --&gt;
      &lt;div class="header_bottom_wrap"&gt;
        &lt;div class="header_bottom"&gt;
          &lt;ul class="bottom_menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Company&lt;/a&gt;
  
  
  
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;
              &lt;u1 class="submenu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;DVR &amp; Kits&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;spy camraes&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;alarms&lt;/a&gt;
                &lt;/li&gt;
              &lt;/u1&gt;
            &lt;/li&gt;
  
            &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Support&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Multimedia&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
  
  
  
  
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--end of bottom  wrap --&gt;
    &lt;/div&gt;
    &lt;!--end of header wrap --&gt;
    &lt;div class="main_wrap"&gt;
      &lt;div class="main"&gt;
      &lt;/div&gt;
      &lt;!--end of main  --&gt;
    &lt;/div&gt;
    &lt;!--end of main wrap --&gt;
    &lt;div class="footer_wrap"&gt;
      &lt;footer&gt;&lt;/footer&gt;
    &lt;/div&gt;
    &lt;!--end of footer wrap --&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>