Navigation2

Question

davy_yg 2 Posting Whiz

10 Years Ago

Hello,

I have been working on my navigation so that my dropdown menu button won't overlap the other menu.

navigation.php

<div id="navigation"><!-- <img src="images/navigation bar.jpg" alt="nav bar"> --></div> 

<div id="navcontainerbar">
<ul>

<li><a href="index.php">HOME</a></li>
    <li>

    <ul id="nav">
        <li><a class="fly" href="#">PORTFOLIO</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>    
<li class="service"><a href="services.php">SERVICES</a></li>
<li><a href="blog.php">BLOG</a></li>
<li><a href="contact.php">CONTACT</a></li>

</ul>
</div>

style.css

/* navigation */

#navigation {margin: 20px 0 0 280px; width: 700px; height: 50px; background-color: yellow; border-radius: 10px;}

#navcontainerbar { margin: -30px 0 0 0;}
#navcontainerbar ul { margin: 0 0 0 0; list-style-type: none; margin: 0; padding: 0; text-align: center; }

#navcontainerbar ul li { display: inline; font-family:arial;}
#navcontainerbar ul li .service{ margin: 0 0 0 100px; display: inline; font-family:arial;}
#navcontainerbar ul li a { text-decoration: none; padding: .2em 1em; color:black;  background-color: green;}
#navcontainerbar ul li a:hover { color:white; background-color:orange; }

/* 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:absolute;
    z-index:2;
}
#nav ul {
    left:-9999px;
    position:absolute;
    top:10px;
    width:auto;
}

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

#nav li {
    margin: 150px 0 0 250px;
    float:left;
    margin-right:5px;
    position:relative;
}
#nav li a {
    margin: -180px 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:10px;
    overflow:hidden;
}
#nav li a.fly {
    background-color: #c8fa7f;
    z-index: 2;
}
#nav ul li {
    margin: 30px 0 0 0;
}
#nav ul li a {
    width:120px;
}
#nav ul li a.fly {
    padding-right:10px;
}

/*hover styles*/
#nav li:hover > a {
    background-color: #c8fa7f;
    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; z-index: 2;
}
#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 */

Try copy and paste my code and see how the dropdown menu overlap the other menu. How to fix it?

web-design

2 Contributors
4 Replies
108 Views
3 Days Discussion Span
Latest Post 10 Years Ago Latest Post by Alberto Bucur

Alberto Bucur 0 Junior Poster

10 Years Ago

Try this:

#nav {
    margin-left:-150px;
    height:41px;
    padding-left:5px;
    padding-top:5px;
    position:absolute;
 /*I add this line */
    left: 105px;
 /********/
    z-index:2;
 }

This put Portofolio in middle between HOME and SERVICES.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

davy_yg 2 Posting Whiz · Answer 1 · 2014-02-25T22:05:46+00:00

This time, I am getting closer. I just do not know how to shift portfolio to the left.

style.css

/* navigation */

#navigation {margin: 20px 0 0 280px; width: 700px; height: 50px; background-color: yellow; border-radius: 10px;}

#navcontainerbar { margin: -30px 0 0 100px;}
#navcontainerbar ul { margin: 0 0 0 0; list-style-type: none; margin: 0; padding: 0; text-align: center; }

#navcontainerbar ul li { display: inline; font-family:arial;}
.service{ margin: 0 0 0 120px; position: relative; display: inline; font-family:arial;}
#navcontainerbar ul li a { text-decoration: none; padding: .2em 1em; color:black;  background-color: green;}
#navcontainerbar ul li a:hover { color:white; background-color:orange; }

/* navigation pop up */

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

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

#nav li {
    margin: 150px 0 0 250px;
    float:left;
    margin-right:5px;
    position:relative;
}
#nav li a {
    margin: -180px 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:10px;
    overflow:hidden;
}
#nav li a.fly {
    background-color: #c8fa7f;
    z-index: 2;
}
#nav ul li {
    margin: 30px 0 0 0;
}
#nav ul li a {
    width:120px;
}
#nav ul li a.fly {
    padding-right:10px;
}

/*hover styles*/
#nav li:hover > a {
    background-color: #c8fa7f;
    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; z-index: 2;
}
#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 */

navigation.php

<div id="navigation"><!-- <img src="images/navigation bar.jpg" alt="nav bar"> --></div> 

<div id="navcontainerbar">
<ul>

<li><a href="index.php">HOME</a></li>
    <li>

    <ul id="nav">
        <li><a class="fly" href="#">PORTFOLIO</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>    
<li class="service"><a href="services.php">SERVICES</a></li>
<li><a href="blog.php">BLOG</a></li>
<li><a href="contact.php">CONTACT</a></li>

</ul>
</div>

davy_yg 2 Posting Whiz · Answer 2 · 2014-02-27T14:41:42+00:00

Thanks getting close. Now, I am revising my navigation style. Cek this one:

navigation.php

<div id="navigation"><!-- <img src="images/navigation bar.jpg" alt="nav bar"> --></div> 

<div id="navcontainerbar">
<ul>

<li><a href="index.php">HOME</a></li>
    <li>

    <ul id="nav">
        <li><a class="fly" href="#">PORTFOLIO</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>    
<li class="service"><a href="services.php">SERVICES</a></li>
<li><a href="blog.php">BLOG</a></li>
<li><a href="contact.php">CONTACT</a></li>

</ul>
</div>

style.css

/* css style for Innovation */


#container {width: 1024px; margin: 0 auto; background-color:white; }

#logo {margin: -10px 0 0 20px; position: fixed; z-index:3;}
#proyek {margin: -15px 0 0 550px;}
#coffee {margin: 10px 0 0 920px; position: fixed; z-index:3;}

/* navigation */

#navigation {margin: -5px 0 0 10px; width: 900px; height: 120px; background-color:#655700; border-radius: 0; position: fixed; z-index:2;}

#navcontainerbar { margin: 50px 0 0 250px; position: fixed; z-index:2;}
#navcontainerbar ul { margin: 0 0 0 0; list-style-type: none; margin: 0; padding: 0; text-align: center; }

#navcontainerbar ul li { display: inline; font-family:arial;}
.service{ margin: 0 0 0 120px; position: relative; display: inline; font-family:arial;}
#navcontainerbar ul li a { text-decoration: none; /*padding: .2em 1em;
*/ padding: 50px 10px 40px 10px; color:white;  background-color: #655700; }
#navcontainerbar ul li a:hover { color:white; background-color:#fef900; }

/* navigation pop up */

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

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

#nav li {
    margin: 150px 0 0 250px;
    float:left;
    margin-right:5px;
    position:relative;
}
#nav li a {
    margin: -180px 0 0 140px;
    background:#655700;
    /*background:#c1c1bf;*/
    color:#000;
    display:block;
    float:left;
    font-size:16px;
    padding:0px;
    text-decoration:none;
    width: 85px;
    /*height: 18px;*/
}
#nav > li > a {
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    -o-border-radius:0px;
    border-radius:0;
    overflow:hidden;
}
#nav li a.fly {
    /*background-color: #c8fa7f;*/
    background-color: #655700;
    z-index: 2;
}
#nav ul li {
    margin: 30px 0 0 0;
}
#nav ul li a {
    background-color: #c8fa7f;
    width:120px;
}
#nav ul li a.fly {
    padding-right:10px;
}

/*hover styles*/
#nav li:hover > a {
    background-color: #008000;
    color:#000;
}

/*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; z-index: 2;
}
#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 */

Just one problem. I cannot see my pop up menu clearly.

How to fix the pop up menu?

Alberto Bucur 0 Junior Poster · Answer 3 · 2014-02-28T08:24:19+00:00

Change this:

#nav ul li {
    margin: 30px 0 0 0;
    top: 80px;
}
#nav ul li a {
    background-color: #c8fa7f;
    padding: 10px 10px 15px;
    width:150px;
}