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 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    81
    Thanks
    45
    Thanked 0 Times in 0 Posts

    Another problem, need help!

    So here is a basic dropdown menu I'm trying to make, but unfortunately I'm unable Need some help please although I was able to make a normal nav with hover but right after I put another ul all messed up


    <ul id="nav">
    <li> <a href="#"> Home </a> </li>
    <li> <a href="#"> Videos </a> </li>
    <li> <a href="#"> Guides </a>

    <ul>
    <li> <a href="#"> Guides </a> </li>
    <li> <a href="#"> Tutorials </a> </li>
    <li> <a href="#"> Contacts </a> </li>
    </ul>


    </li>
    <li> <a href="#"> Tutorials </a> </li>
    <li> <a href="#"> Contacts </a> </li>
    </ul>





    ul#nav {
    display:block;
    height:30px;
    width:600px;
    background-color:black;}

    ul#nav li{
    float:left;list-style:none;}

    ul#nav li a{
    padding:0 25px;
    display:block;
    height:30px;
    text-decoration:none;
    line-height:30px;
    color:white;}

    ul#nav li a:hover{
    background-color:green;
    color:red;}

  • #2
    New Coder
    Join Date
    Mar 2013
    Posts
    81
    Thanks
    45
    Thanked 0 Times in 0 Posts

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello h123er2,
    The good news is that your markup is somewhat correct. So is your CSS but it's just not complete.

    You do need to fix your DocType and other errors. First off, I would suggest that any new site should have a Strict DocType, not a transitional. Have a look at the link in my signature about DocTypes.

    You style the ul#nav, it's li's and the anchors in those li's but you don't style the dropped ul. You need CSS that hides the dropped ul until it's parent li is hovered. Then you need to style how you want that ul and it's li's to look.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    h123er2 (03-30-2013)

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Look at this example of a simple CSS dropdown menu for some ideas.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    h123er2 (03-30-2013)

  • #5
    New Coder
    Join Date
    Mar 2013
    Posts
    81
    Thanks
    45
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Look at this example of a simple CSS dropdown menu for some ideas.
    What is that Position:relative doing in list?

  • #6
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Quote Originally Posted by h123er2 View Post
    What is that Position:relative doing in list?
    Take a look at this section of the code:

    Code:
    ul#nav ul {
                    position: absolute;
    }
    Simply put, you want the child list to be absolutely positioned "relative" to its parent container. In order to do that, you need to give its parent container a relative position.

  • #7
    New Coder
    Join Date
    Nov 2012
    Location
    India
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    For the navigation drop down menu below code help you to create as you are looking.
    Code:
    <ul id="menu">
      <li><a href="">Home</a></li>
      <li><a href="">About Us</a>
        <ul>
        <li><a href="">The Team</a></li>
        <li><a href="">History</a></li>
        <li><a href="">Vision</a></li>
        </ul>
      </li>
      <li><a href="">Products</a>
        <ul>
        <li><a href="">Cozy Couch</a></li>
        <li><a href="">Great Table</a></li>
        <li><a href="">Small Chair</a></li>
        <li><a href="">Shiny Shelf</a></li>
        <li><a href="">Invisible Nothing</a></li>
        </ul>
      </li>
      <li><a href="">Contact</a>
        <ul>
        <li><a href="">Online</a></li>
        <li><a href="">Right Here</a></li>
        <li><a href="">Somewhere Else</a></li>
        </ul>
      </li>
    </ul>
    Code:
    ul {
      font-family: Arial, Verdana;
      font-size: 14px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    ul li {
      display: block;
      position: relative;
      float: left;
    }
    li ul { display: none; }
    ul li a {
      display: block;
      text-decoration: none;
      color: #ffffff;
      border-top: 1px solid #ffffff;
      padding: 5px 15px 5px 15px;
      background: #2C5463;
      margin-left: 1px;
      white-space: nowrap;
    }
    ul li a:hover { background: #617F8A; }
    li:hover ul {
      display: block;
      position: absolute;
    }
    li:hover li {
      float: none;
      font-size: 11px;
    }
    li:hover a { background: #617F8A; }
    li:hover li a:hover { background: #95A9B1; }


  •  

    Posting Permissions

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