Drop-Down menu using Unordered List

HTML-CSS
1

Hello everyone,
I am having an issue with drop-down menu. I tried to create a horizontal nav bar with drop-down menu using Unordered Lists. The problem arise when I added the sub-menus which push down my content and not perfectly aligned like blocks.
I am new to the Web Dev world and I will appreciate your help. Following my HTML code and CSS code.

Thank you.

<!doctype html>
<html>
<head>
<title>My first page</title>
    <link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
    <link href="styles1.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header>
    <div id="container" class="container">   
      <div class="logo">LOGO
        <!--<img src="img/logo.png"  width="300" alt="company's logo"/>-->
      </div>
    
     <nav>
        <li><a href="#"> Home</a>
            <ul>
                <li><a href="#"></a>Home111</li>
                <li><a href="#"></a>Home222</li>
            </ul>
        </li>
         <li><a href="#"> About</a></li>
         <li> <a href="#">Work</a></li>
         <li><a href="#"> Contact</a></li>
    </nav>
     </div>  <!--*End of container*/-->  
    </header>
    
     <div class="container"> 
         <div class="content">
         <h2> Welcome to My first Website</h2>
             <article>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet ante ac auctor volutpat. Nam consequat enim et nunc tempus congue. Proin aliquet eget sem vel elementum. Aliquam accumsan ex sed lectus malesuada, a feugiat magna fringilla. Donec luctus non orci et condimentum. Sed vitae justo magna. Aenean imperdiet urna tellus, non rhoncus leo venenatis a. Proin luctus euismod velit vel sagittis. Aenean vitae ex ornare, pellentesque magna non, feugiat ipsum. Nulla malesuada quis lacus sit amet venenatis. Quisque non felis quis velit volutpat malesuada. </p>
             
                <p> Donec non est ut leo placerat congue. Mauris efficitur velit sem, in imperdiet purus porta ut. Aenean sed justo tincidunt, congue enim vitae, consectetur tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec posuere est velit, nec tempor turpis commodo ut. Proin tempus aliquam pulvinar. Nunc ac aliquet tellus, quis lobortis tortor. Nulla consequat facilisis justo, quis facilisis odio scelerisque et.
                </p>

                <p>Suspendisse in interdum metus. Mauris auctor magna enim, ut viverra velit rutrum non. Proin nec mollis nisl. Suspendisse efficitur, lorem sit amet scelerisque molestie, eros lectus malesuada urna, id lobortis ante lectus ut nibh. Pellentesque at pulvinar quam. Quisque a ipsum tellus. Integer varius sem nec ligula scelerisque, ac faucibus metus imperdiet. Maecenas non urna suscipit, lobortis erat ut, egestas diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ac placerat nulla.</p>

             </article>
             
        <ul>
            <li>-placerat nibh vitae, tristique ipsum. Aliqua</li>     
            <li>-Proin aliquet eget sem vel elementum.</li> 
            <li>-Lorem ipsum dolor sit amet, consectetur ad </li>
            <li>-Lorem ipsum dolor sit amet, consectetur ad </li>
            <li>-Lorem ipsum dolor sit amet, consectetur ad </li>
            <li>-Lorem ipsum dolor sit amet, consectetur ad </li>
            <li>-Lorem ipsum dolor sit amet, consectetur ad </li>
             
        </ul>    
         

         </div>
    </div>
</body>
</html>

CSS CODE

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    color: darkgrey;
    background-color: #f3f3f3;
}

/*-------CONTENT----------*/
.content h2{
    color: white;
    background-color: #ff4739;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;    
}

.content article{
    float: left;
    width: 600px;
    
}

.content ul{
    float: right;
    width: 250px;
    background: #338989;
    padding: 20px;
    border-radius: 5px;
    list-style-type: none;    
}

.content ul li{
    color: white;
    margin-bottom: 5px;
}

/*--------ARTICLE----*/

article p{
    text-align: justify;
}

/*----------CONTAINER-----*/
.container{
    max-width: 960px;
    width: 96%;
    margin: auto;
        
}



header{
    background: #fff;
    margin-bottom: 20px;
    overflow: hidden;
    
}

.logo{
    float: left;
    margin-top: 10px;
    
}

/*------NAV------*/

nav{
    float: right;
    line-height: 70px;
    margin-top: 50px;
}

nav li{
    display: inline-block;
    padding: 10px 35px;
    margin-left: 10px;
    background: #f3f3f3;
    line-height: normal;
}

nav li ul li{
    display: none;
     padding: 10px 35px;
    margin-left: 10px;
    background: #f3f3f3;
    line-height: normal;
}
nav li:hover ul li{
    display: block;
}

nav a{
    text-decoration: none;
    color: darkgrey;    
}

nav a:hover{
    color: darkblue;
    text-decoration: none;
    
}

@media( max-width :1280px) {
    main{
        width: 100%;
    }
}
2

@housseinhassan, you don’t really have a dropdown defined. Take a look at this link, I think it’s what you’re trying to do.

https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp

3

Thank you for your the link. I have seen this tutorial and they are defining (or using) buttons to make the nav bar menus drop down. I my case I defined unordered list to use as drop-down menu.

Thanks agaiin

4
  1. This is not valid HTML, <li> is a list item and have to be a child of a list (ul/ol)
<nav>
  <li><a href="#"> Home</a>
    <ul>
      <li><a href="#"></a>Home111</li>
      <li><a href="#"></a>Home222</li>
    </ul>
  </li>
  <li><a href="#"> About</a></li>
  <li> <a href="#">Work</a></li>
  <li><a href="#"> Contact</a></li>
</nav>

  1. Your link text is not inside the link (Home111/Home222)

  2. You can use position absolute on the dropdown and give its container position relative.

  3. You should add some more classes for styling.

  4. I would suggest using something other then floats. They are not needed for page layout and causes a bunch of issues you have to be very aware of. Like your use of overflow hidden as a clear fix, that can cause an issue with your dropdown. I would suggest using a clearfix class.

Your page with the dropdown
https://codepen.io/anon/pen/pmYbOd

1 Like