Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
Like Tree1Likes
  • 1 Post By fastsol

Thread: horizonatal drop down menu

  1. #1
    New Coder
    Join Date
    Aug 2014
    Posts
    10
    Thanks
    10
    Thanked 0 Times in 0 Posts

    horizonatal drop down menu

    how to change my following code to make this horizontal drop down menu
    Code:
    <!doctype html>
    <html>
    <head>
    <style>
     #abc
    {
        background-color:#4bc2d8;
        width:100%;
        height:50px;
        font-weight:700;
        list-style:none;
    }
    #abc li
    {
        margin-left: 30px;
        padding-left: 30px;
        
    }
    #abc li a{
        margin-left: 30px;
        padding-left:30px;
        text-decoration: none;
    }
     #abc li a:hover
    {
        background-color:#3075ba;
        
     }
    
    </style>
    </head>
    <body>
    <ul id="abc">
    <li><a href="">Home</a></li>
    <li><a href="">About us</a></li>
    <li><a href="">Contact us</a></li>
    <li>
        <a href="">Blog</a>
          <ul>
              <li><a href="">Blog1</a></li>
              <li><a href="">Blog2</a></li>
              <li><a href="">Blog3</a></li>
          </ul>
        
    </li>
    <li><a href="">Services</a></li>
    </ul>
    </body>    
    </html>

  • #2
    New Coder
    Join Date
    Aug 2014
    Posts
    97
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Code:
    #abc li {
            margin-left: 30px; 
           padding-left: 30px; 
        display: inline-block;
    }
    You'll need more css than what you have to take care of the nested <ul> for the dropdown list.
    Here is a tutorial How To Create a Pure CSS Dropdown Menu

  • #3
    New Coder
    Join Date
    Aug 2014
    Posts
    10
    Thanks
    10
    Thanked 0 Times in 0 Posts
    why we use display:inline-block;
    what property i apply if i hover on the link it will display the shaded background at full space instead of a box having small height
    its difficult to understand that tutorial
    Last edited by hareem; 09-04-2014 at 05:51 PM.

  • #4
    New Coder
    Join Date
    Aug 2014
    Posts
    97
    Thanks
    0
    Thanked 18 Times in 18 Posts
    The inline-block makes it so the <li> items display in a line rather than on top of each other.
    Try this
    Code:
    <!doctype html>
    <html>
    <head>
    <style>
    .center {
        text-align: center;
    }
    ul {
        margin: 0px;
        padding: 0px;
    }
    #abc
    {
        background-color:#4bc2d8;
        width:100%;
        height:50px;
        font-weight:700;
        list-style:none;
        position: relative;
    }
    #abc li
    {
        display: inline-block; 
    }
    #abc li a{
        margin: 0px 30px;
        padding: 10px;
        text-decoration: none;
        display: block;
    }
    #abc li a:hover
    {
        background-color:#3075ba;
    }
    #abc li ul {
        display: none;    
    }
    #abc li ul li {
        display: block;
    }
    #abc li ul li a{
        margin: 0px 15px;
        padding: 10px;
        text-decoration: none;
        display: block;
    }
    #abc li:hover ul{
        display: block;
        position: absolute;
        top: 40px;
        margin-left: 15px;
        
    }
    </style>
    </head>
    <body>
    <div class="center">
    <ul id="abc">
    <li><a href="">Home</a></li>
    <li><a href="">About us</a></li>
    <li><a href="">Contact us</a></li>
    <li>
        <a href="">Blog</a>
          <ul>
              <li><a href="">Blog1</a></li>
              <li><a href="">Blog2</a></li>
              <li><a href="">Blog3</a></li>
          </ul>
        
    </li>
    <li><a href="">Services</a></li>
    </ul>
    </div>
    </body>    
    </html>
    hareem likes this.

  • Users who have thanked fastsol for this post:

    hareem (09-05-2014)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •