CODEWITHSUNDEEP
jqueryhtmlcss
Faraz Akbari
Faraz Akbari

Reputation: 45

Sub Dropdown list In Navigation Bar

I want to make my "Poem From Me" and "Poem From Internet" drop down list going to under "Poems" section which is under About option. But now there is problem in there. This drop down list is behind "About" drop down list and i want to move it to the left next "Poems" option (I tried to use margin-left:250px) but it didn't work). I also want that whenever the person over his mouse on the "Poems" section the "Poem From Internet" and "Poem From Me" appears not the time that i hover over the "About" section! 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="shortcut icon" href="Photo.ico">
    <link href="StyleSheet.css" rel="stylesheet" />
    <link href="animate.css" rel="stylesheet" />
    <link href="animations.css" rel="stylesheet" />
    <link href="hover.css" rel="stylesheet" />
    <link href="gooeymenu.css" rel="stylesheet" />
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <script src="gooeymenu.js"></script>

    <title>Social Activism</title>


<!-- Start WOWSlider.com HEAD section -->
    <link rel="stylesheet" type="text/css" href="engine1//style.css" media="screen" />
    <script type="text/javascript" src="engine1//jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->

</head>
<body>
    <div style="background:#F5F5F0;">
        <div>
            <div style="float:left; margin-top:0; left:20px;"><img class="buzz" src="community-activism.png" width="80" height="80" /></div>
            <h1 style="color:black; opacity:40;" class="shrink"><strong>&nbsp;&nbsp;Social Activism</strong></h1>
        </div>
        <br />

        <div id="nav">
            <div id="nav_wrapper" style="margin:0 auto; display:inline-block;">

                <!-- Start WOWSlider.com BODY section id=wowslider-container1 -->
                <div id="wowslider-container1">
                    <div class="ws_images">
                        <ul>
                            <li><a href="http://time4thinkers.com/wp-content/uploads/2012/01/social-activism-2.jpg"><img src="data1/images/socialactivism2.jpg" alt="Social Activism" title="Social Activism" id="wows1_0" /></a></li>
                            <li><a href="http://www.etownian.com/wp-content/uploads/2013/04/Untitled-17-610x250.png"><img src="data1/images/untitled17610x250..png" alt="Social Activism " title="Social Activism " id="wows1_1" /></a></li>
                            <li><a href="http://www.empowernewsmag.com/userfiles/6c486cb1-da70-49e4-c500-c741e2f470ab.jpg"><img src="data1/images/volunteeringhands_a.jpg" alt="Social Activism " title="Social Activism " id="wows1_2" /></a></li>
                        </ul>
                    </div>
                    <div class="ws_bullets">
                        <div>
                            <a href="#" title="Social Activism"><img src="data1/tooltips/socialactivism2.jpg" alt="Social Activism" />1</a>
                            <a href="#" title="Social Activism "><img src="data1/tooltips/untitled17610x250..png" alt="Social Activism " />2</a>
                            <a href="#" title="Social Activism "><img src="data1/tooltips/volunteeringhands_a.jpg" alt="Social Activism " />3</a>
                        </div>
                    </div><span class="wsl"><a href="http://wowslider.com/vb">carousel bootstrap</a> by WOWSlider.com v6.4</span>
                    <a href="#" class="ws_frame"></a>
                    <div class="ws_shadow"></div>
                </div>
                <script type="text/javascript" src="engine1//wowslider.js"></script>
                <script type="text/javascript" src="engine1//script.js"></script>
                <!-- End WOWSlider.com BODY section -->
            </div>
            <div>
                <ul class="navigation">
                    <a class="main" href="#url" style="color:black;" id="blue">Home</a>

                </ul>
                <ul class="navigation">
                    <a class="main" href="#url" style="color:black;" id="blue">About &#9660;</a>

                    <li class="n1" id="selection">

                        <a href="Poem-From%20Internet.html" id="option">Poems &#9658;</a>
                        <ul>
                            <li class="n6">
                                <a href="#" id="option"> Poem From Internet </a>
                            </li>
                            <li class="n7">
                                <a href="#" id="option"> Poem By Me </a>

                            </li>
                        </ul>
                    </li>
                    <li class="n2" id="selection">
                        <a href="#" id="option"> Informational Media </a>

                    </li>
                    <li class="n3" id="selection">
                        <a href="#" id="option"> Visual/Video </a>

                    </li>
                    <li class="n4" id="selection">
                        <a href="#" id="option"> Photo Essay </a>
                    </li>

                    <li class="n5" id="selection">
                        <a href="#" id="option"> Me </a>
                    </li>   
                </ul>

                <ul class="navigation">
                    <a class="main" href="#url" style="color:black;" id="blue">From Internet &#9660; </a>

                    <li class="n1" id="selection">

                        <a href="Poem-From%20Internet.html" id="option">Poem</a>

                    </li>
                    <li class="n2" id="selection">
                        <a href="#" id="option"> Informational Media </a>

                    </li>
                    <li class="n3" id="selection">
                        <a href="#" id="option"> Visual/Video </a>

                    </li>
                    <li class="n4" id="selection">
                        <a href="#" id="option"> Photo Essay </a>
                    </li>

                </ul>
                <ul class="navigation">
                    <a class="main" href="#url" style="color:black;" id="blue">By Me &#9660;</a>

                    <li class="n1" id="selection">
                        <a href="poem%20-%20faraz%20akbari.html" id="option">Poem</a>

                    </li>
                    <li class="n2" id="selection">
                        <a href="#" id="option"> Informational Media </a>

                    </li>
                    <li class="n3" id="selection">
                        <a href="#" id="option"> Visual/Video </a>

                    </li>
                    <li class="n4" id="selection">
                        <a href="#" id="option"> Photo Essay </a>

                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

My CSS File:

body {
    background: #DCDCD8;
}
h2 {
    text-align: center;
    color: #CCC;
}
a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
    color: #999;
}
/* NAVIGATION */
 .navigation {
    list-style: none;
    padding: 0;
    width: 250px;
    height: 40px;
    margin: 0;
    background: #F5F5F0;
    position: relative;
    z-index: 100;
    display: inline-block;
    vertical-align:top;
    left:5px;
    top:0px;
}
.navigation, .navigation a.main {
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}
.navigation:hover, .navigation:hover a.main {
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
    height: 40px;
    font: bold 15px/40px arial, sans-serif;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    -webkit-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    position: relative;
    z-index: 100;
    display: inline-block;
}
.navigation li {
    width: 250px;
    height: 40px;
    background: #F7F7F7;
    font: normal 14px/40px arial, sans-serif !important;
    color: #999;
    text-align: center;
    margin: 0;
    -webkit-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: perspective(350px) rotateX(-90deg);
    -o-transform: perspective(350px) rotateX(-90deg);
    transform: perspective(350px) rotateX(-90deg);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.navigation li:nth-child(even) {
    background: #F5F5F5;
}
.navigation li:nth-child(odd) {
    background: #EFEFEF;
}
.navigation li.n1 {
    -webkit-transition: 0.2s linear 0.8s;
    -o-transition: 0.2s linear 0.8s;
    transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
    -webkit-transition: 0.2s linear 0.6s;
    -o-transition: 0.2s linear 0.6s;
    transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
    -webkit-transition: 0.2s linear 0.4s;
    -o-transition: 0.2s linear 0.4s;
    transition: 0.2s linear 0.4s;
}
.navigation li.n4 {
    -webkit-transition: 0.2s linear 0.2s;
    -o-transition: 0.2s linear 0.2s;
    transition: 0.2s linear 0.2s;
}
.navigation li.n5 {
    border-radius: 0px 0px 4px 4px;
    -webkit-transition: 0.2s linear 0s;
    -o-transition: 0.2s linear 0s;
    transition: 0.2s linear 0s;
}
.navigation:hover li {
    -webkit-transform: perspective(350px) rotateX(0deg);
    -o-transform: perspective(350px) rotateX(0deg);
    transform: perspective(350px) rotateX(0deg);
    -webkit-transition: 0.2s linear 0s;
    -o-transition: 0.2s linear 0s;
    transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
    -webkit-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.navigation:hover .n3 {
    -webkit-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.navigation:hover .n4 {
    transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
.navigation:hover .n5 {
    transition-delay: 0.8s;
    -o-transition-delay: 0.8s;
    transition-delay: 0.8s;
}
#option:hover ,#blue:hover {
    color: white;
    background-color:#19A3FF;
}
#option:active {
    color: white;
    background-color:#1c5f8d;
}
#blue:active {
    color: white;
    background-color: #1c5f8d;
}
#option {
    color: black;
}
#blue {
    color: black;
}

fiddle Example

Upvotes: 0

Views: 150

Answers (1)

samuelkitazume
samuelkitazume

Reputation: 11

First of all your problem might be about semantics and sintaxes. Some tips might be helpful for you. Inside every tag, the direct child has to be

  • s tag. You are using tag. You are using a lot of the same ID. IDs was made to be unique. You can clone ID's. If the ID's you are using defines a specific behavior you should use class attribute.

    Now, to help in your case, I tried to explain my point with this jsfiddle: http://jsfiddle.net/2r1hbr3k/1/

    <div class="nav-wrapper">
<div class="nav-item">
    <span class="label">Nav1</span>
    <ul class="options-list">
        <li class="option">
            <span class="label">Option 1</span>
            <ul class="sub-options-list">
                <li class="sub-option">
                    <span class="label">Sub option1</span>
                </li>
                <li class="sub-option">
                    <span class="label">Sub option2</span>
                </li>
                <li class="sub-option">
                    <span class="label">Sub option3</span>
                </li>
            </ul>
        </li>
        <li class="option">
            <span class="label">Option 2</span>
        </li>
        <li class="option">
            <span class="label">Option 3</span>
        </li>
    </ul>
</div>
<div class="nav-item">
    <span class="label">Nav2</span>
</div>
<div class="nav-item">
    <span class="label">Nav3</span>
</div>


    ul {
    list-style:none;
    margin:0;
    padding:0;
}
.nav-item {
    position:relative;
    float:left;
    border:1px solid grey;
    margin:0 5px;
}
.label {
    float:left;
    padding:5px 10px;
    width:100%;
    box-sizing:border-box;
}
.label:hover {
    background: #DDD;
}
.options-list,
.sub-options-list {
    display:none;
}
.nav-item:hover .options-list {
    display:block;
}
.option:hover .sub-options-list {
    display:block;
}
.options-list {
    position:absolute;
    top:100%;
    left:0;
    width:150px;
    border:1px solid #DDD;
}
.option {
    position:relative;
}
.sub-options-list {
    position:absolute;
    top:0;
    left:100%;
    width:150px;
    border:1px solid #DDD;
}

    You just have to set the style and animations you want, ok? Tell me if it worked.

    Upvotes: 1

    • Related Questions