dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Css - Navigation menu <Ul> - Sub Menus

  1. #1
    Join Date
    Jul 2012
    Location
    Uk, Warrington
    Posts
    2

    Post Css - Navigation menu <Ul> - Sub Menus

    Hello,
    I am currently developing a site and I am trying to get into more css coding, I have go the basic css for the navigation done. Although what I want to do now is Make sub menus, so when you roll over one of the buttons. The menus appear.

    Here's my current Css:
    HTML Code:
    /*Naviagtion Bar Css */
    ul {
        margin: 0;
        padding: 0;
    	list-style:none;
    }
    li {
    padding-top:5px;
    color: #FFF;
    width:120px;
    float: left;
    margin: 0;
    padding: 0;
    }
    li a {
        display: block;
        width: 120px;
        height: 30px;
    	padding-top:20px;
    }
    #homepage a {
        background-image: url(../images/Button_NavBar_Unselected.png);
        background-repeat: no-repeat;
    }
    #homepage_current a {
        background-image: url(../images/Button_NavBar_CurrentPage.png);
        background-repeat: no-repeat;
    }
    #homepage a:hover {
        background-image: url(../images/Button_NavBar_Hover.png);
        background-repeat: no-repeat;
    }
     
    #guide a {
        background-image: url(../images/Button_NavBar_Unselected.png);
        background-repeat: no-repeat;
    }
    #guide_current a {
        background-image: url(../images/Button_NavBar_CurrentPage.png);
        background-repeat: no-repeat;
    }
    #guide a:hover {
        background-image: url(../images/Button_NavBar_Hover.png);
        background-repeat: no-repeat;
    }
     
    #blog a {
        background-image: url(../images/Button_NavBar_Unselected.png);
        background-repeat: no-repeat;
    }
    #blog_current a {
        background-image: url(../images/Button_NavBar_CurrentPage.png);
        background-repeat: no-repeat;
    }
    #blog a:hover {
        background-image: url(../images/Button_NavBar_Hover.png);
        background-repeat: no-repeat;
    }
     
    #media a {
        background-image: url(../images/Button_NavBar_Unselected.png);
        background-repeat: no-repeat;
    }
    #media_current a {
        background-image: url(../images/Button_NavBar_CurrentPage.png);
        background-repeat: no-repeat;
    }
    #media a:hover {
        background-image: url(../images/Button_NavBar_Hover.png);
        background-repeat: no-repeat;
    }
     
    #forum a {
        background-image: url(../images/Button_NavBar_Unselected.png);
        background-repeat: no-repeat;
    }
    #forum_current a {
        background-image: url(../images/Button_NavBar_CurrentPage.png);
        background-repeat: no-repeat;
    }
    #forum a:hover {
        background-image: url(../images/Button_NavBar_Hover.png);
        background-repeat: no-repeat;
    }
    #navbar {
    	position:relative;
    	top:5px;
    	float:left;
    	margin-top:30px;
    	margin-left:45px;
    	width:600px;
    	height: 50px;
    	z-index:-1;
    }
    Html Code:
    <div id="navbar" style="display: inline-block;">
    <ul>
    <li id="homepage_current"><a><strong>Home</strong></a></li>
    <li id="guide"><a><strong>Guide</strong></a>
    <ul>
    <li> Sub Menu 1 </li>
    <li> Sub Menu 2 </li>
    <li> Sub Menu 3 </li>
    </ul></li>
    <li id="blog"><a><strong>Blog</strong></a></li>
    <li id="media"><a><strong>Media</strong></a></li>
    <li id="forum"><a><strong>Forums</strong></a></li>
    </ul>
    </div>

    Any help would be appreciated. Here's a link to the page.

  2. #2
    Join Date
    Jul 2012
    Posts
    20
    It looks like you kind of have something working.

    Sub-menus can be a little complicated. I'll try to give you the short version, and you can fill in the blanks with your own styles.
    <div id="navigation">
    <ul>
    <li><a href="#">blah</a></li>
    <li><a href="#">blah blah</a></li>
    <li><a href="#">sub menu here</a>
    <ul class="drop-down">
    <li><a href="#">sub-menu item</a></li>
    <li><a href="#">sub-menu item 2</a></li>
    </ul>
    </li>
    <li>......</li>

    Define the background or not, background color, float:left of sub-menu items, padding, etc., in your css file.

    Sample CSS
    ul#navigation ul.drop-down {
    position:absolute;
    top:40px; /*how far away from the top menu*/
    margin:0;
    padding:12px 10px 8px 10px;
    width:230px;
    background-color:#161616;
    }
    ul#navigation ul.drop-down li {
    margin:0;
    list-style:none;
    display:inline;
    }
    ul#navigation ul.drop-down a {
    position:relative;
    list-style:none;
    display:inline;
    float:none;
    border:none;
    padding:6px 0px 8px 0px;
    background:none;
    font:12px Verdana, Copse, arial, serif;
    line-height:1.6em;
    color:#fff;
    /*border-top:2px solid #000;*/
    text-transform:none;
    }

    This is nowhere near complete, I'm just trying to give you the idea. Notice the </li> of the menu item with the drop down menu is placed below the second ul li items.

    Hope this helps a little.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles