#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    2
    Rep Power
    0

    How to subnav??? with css


    Hoi CSS fanatics,

    I am a new member and still learning. Made a navigation in CSS with hover effect. But now I want to create a subnav, but it does not work.
    Can somebody give me the golden tip how to code the CSS so that the navigation bar will work?
    This is the code that I use for the CSS
    /* begin navigatiebalk */ #navigation { position: relative; font: 20px Verdana, Arial, Helvetica, sans-serif; box-shadow: 0 1px 2px #C6C6C6; color: #CCCCCC; text-align: left; height: auto; background-color: #9b9b9b; width:906px; margin:0px auto 0px auto; padding: 10px; z-index: 6; } #navigation ul { list-style: none; margin: 0; padding: 0; } #navigation li { display: inline; text-align: center; margin: 0px 10px 0px 10px; padding: 0; } #navigation li a:link, #navigation li a:visited { background-color: #9b9b9b; color: #CCCCCC; text-decoration: none; } #navigation li a:hover { background-color: #9b9b9b; color: #FF6633; text-decoration: none; } /* einde navigatiebalk */
    And this is what i use for the html
    <div id="navigation"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ITEM 1</a></li> <li><a href="#">ITEM 2</a></li> <li><a href="#">ITEM 3</a></li> <li><a href="#">ITEM 4</a></li> </ul> </div>
    For the html I suppose that this code will do for the subnavigation
    <div id="navigation"> <ul> <li> <a href="#">HOME</a></li> <ul> <li><a href="#">ITEM 2</a></li> <li><a href="#">ITEM 2a</a></li> <li><a href="#">ITEM 2 b</a></li> <li><a href="#">ITEM 2c</a></li> </ul> </li> <li> <a href="#">ITEM 3</a></li> </ul> </div>
    But as I already mentioned, for the subnavigation it is still way too high for me.
    Would appreciate it very much if somebode could help me with this problem.
    Thnx,
    jef
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    2
    Rep Power
    0

    solution


    Originally Posted by jefgees
    Hoi CSS fanatics,

    I am a new member and still learning. Made a navigation in CSS with hover effect. But now I want to create a subnav, but it does not work.
    Can somebody give me the golden tip how to code the CSS so that the navigation bar will work?
    This is the code that I use for the CSS


    And this is what i use for the html


    For the html I suppose that this code will do for the subnavigation


    But as I already mentioned, for the subnavigation it is still way too high for me.
    Would appreciate it very much if somebode could help me with this problem.
    Thnx,
    jef
    Finally I got through this problem.
    For those who are interested, hereby the code:
    #navigation { position: relative; font: 20px Verdana, Arial, Helvetica, sans-serif; color: #ffffff; text-align: left; height: 30px; background-color: #9b9b9b; width:906px; margin:0px auto 0px auto; padding: 10px; z-index: 6; } #navigation ul {margin:0px; padding:0px;} #navigation ul li { display:inline; height:30px; float:left; list-style:none; margin-left:15px; position:relative; } #navigation li a {color:#fff; text-decoration:none;} #navigation li a:hover { background-color: #9b9b9b; color: #fe9e00; text-decoration: none;} #navigation li ul { margin:0px; padding:0px; display:none; position:absolute; left:0px; top:20px; background-color:#999; } #navigation li:hover ul { display:block; width:160px; } #navigation li li { list-style:none; display:list-item; width:100%; } #navigation li li a {color:#fff; text-decoration:none;} #navigation li li a:hover {background-color: #9b9b9b; color: #fe9e00; text-decoration: none;}
    thnx,

    jef

IMN logo majestic logo threadwatch logo seochat tools logo