3
Contributors
5
Replies
31
Views
4 Years
Discussion Span
Last Post by davy_yg
0

Thanks. Now, cek this site again: Innovation Web

Click on the portfolio menu. I wonder why the background for the drop down menu is similar like the main menu. How to distinguish them?

This is the codes:

index.php

<ul id="navlist">
<li id="about"><a href="index.php"></a></li>
    <ul id="nav">
        <li><a class="fly" href="#"></a>
            <ul class="dd">
                <li><a href="portfolio.php">Web Porfolio</a></li>
                <li><a href="marketing-portfolio.php">Marketing Portfolio</a></li>             
            </ul>
        </li>     
    </ul>
<li id="services"><a href="services.php"></a></li>
<li id="blog"><a href="blog.php"></a></li>
<li id="contact"><a href="contact.php"></a></li>
</ul>

style.css

/* navigation pop up */

/* main menu styles */
/*
#nav,#nav ul {
    background-image:url(./images/tr75.png);
    list-style:none;
    margin:0;
    padding:0;
}
*/
#nav {
    height:41px;
    padding-left:5px;
    padding-top:5px;
    position:relative;
    z-index:2;
}
#nav ul {
    left:-9999px;
    position:absolute;
    top:37px;
    width:auto;
}

#nav ul ul {
    left:-9999px;
    position:absolute;
    top:0;
    width:auto;
}

#nav li {
    float:left;
    margin-right:5px;
    position:relative;
}
#nav li a {
    margin: -5px 0 0 140px;
    background:#c1c1bf;
    color:#000;
    display:block;
    float:left;
    font-size:16px;
    padding:0px;
    text-decoration:none;
}
#nav > li > a {
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    -o-border-radius:0px;
    border-radius:0px;

    overflow:hidden;
}
#nav li a.fly {
    background:url('images/navbar.jpg') -150px 0;
}
#nav ul li {
    margin:0;
}
#nav ul li a {
    width:120px;
}
#nav ul li a.fly {
    padding-right:10px;
}

/*hover styles*/
#nav li:hover > a {
    background: url('images/navbar.jpg') -150px -40px;
    color:#fff;
}

/*focus styles*/
    #nav li a:focus {
    outline-width:0;
}

/*popups*/
#nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
    left:0;
}
#nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
    left:140px;
}

/* navigation pop up end */

Thanks before.

0

Your hover style is going into effect (Lines 69 - 73).

I'd replace the images with text, for real text and style accordingly.

0

I can code the text, but how to code the background (like the navigation bar) and the box button without jpg file ?

Edited by davy_yg

0

Well, think I can create the navigation bar with round circle at the end and the box button but how to create navigation bar with only one round circle at one end?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.