I need help building a css drop down menu

Discussion in 'CSS' started by madmn, Jul 5, 2013.

0
  1. #1
    Here is what i got

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


    <div>
    </div>

    </li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Shopping Cart</a></li>
    <li><a href="#">My Account</a></li>
    <li><a href="#">Specials</a></li>
    </ul>


    ----------

    ul#nav {list-style-type:none; margin:0; padding:0; overflow:hidden; background-color:#448080;
    }
    ul#nav li {float:left; list-style-type:none;}
    ul#nav li a {display:block; padding:9px 17px 9px 17px;
    text-decoration:none; text-align:center;
    font-family:Arial; font-size:8pt; font-weight:bold; color:#ffffff;
    text-transform:uppercase; border-right:1px solid #607987;
    background-color:#448080; text-transform:uppercase; letter-spacing:.08em}
    ul#nav li a:hover {background-color:#448080; color:#fff}
    ul#nav li a.first {border-left:0}
    ul#nav li a.last {border-right:0}

    The dropdown part has a border around it but not on top and the links are in two side by side collumns. no boxes around subs
     
    madmn, Jul 5, 2013 IP
  2. James Jasper

    James Jasper Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #2
    Why do you have those <div> </div> elements in the middle of your code?
     
    James Jasper, Aug 5, 2013 IP
  3. ashishvrm86

    ashishvrm86 Active Member

    Messages:
    277
    Likes Received:
    10
    Best Answers:
    1
    Trophy Points:
    88
    #3
    This is not a valid html structure for <ul>.
    Instead of using <DIV> in between <ul><DIV></ul> tags, use nested <ul> structure:

     <ul>
      <li> text </li>
      <li> text </li>

              <ul>
                      <li></li>
            </ul>

</ul>
    Code (markup):
     
    ashishvrm86, Aug 5, 2013 IP
  4. kalpeshscm

    kalpeshscm Greenhorn

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    <div class="chromestyle" id="chromemenu">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#" rel="dropmenu1">Resources</a></li>
    <li><a href="#" rel="dropmenu2">News</a></li>
    </ul>
    </div>
    <!--1st drop down menu -->
    <div id="dropmenu1" class="dropmenudiv">
    <a href="#">Dynamic Drive</a>
    <a href="#">CSS Drive</a>
    <a href="#">JavaScript Kit</a>
    </div>
    <!--2nd drop down menu -->
    <div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
    <a href="#">CNN</a>
    <a href="#">MSNBC</a>
    <a href="#">BBC News</a>
    </div>
    <script type="text/javascript">
    </script>

    Its from dynamicdrive.com

    kalpesh
     
    kalpeshscm, Aug 6, 2013 IP