0

hello,
I am trying to develop a dropdown menu , and doing it using lists but the CSS applied to the lists i have not been able to understand so could anyone help me out with it please.

Edited by sriraag

2
Contributors
5
Replies
15
Views
3 Years
Discussion Span
Last Post by sriraag
0

you need to provide your sample code and more details as to what you need assistance with. there are limitations with regards to applying styles to select elements.

0
Here is the Code.
I din't quiet understand the css and the class list's A,B,C nested lists why do they go under the Image slider?? 

<!Doctype>
<html lang="en">
<head>
  <title>Welcome</title>
  <link href="copyy.css" rel="stylesheet" type="text/css">
  <style type="text/css">
   /*-----------------------------------This css is for the MenuBar*-------------*/
   body {
    padding:0; 
    margin:0;
    font-family: Arial;
    font-size: 17px;
    width:700px;

    Here is the Code.
    I din't quiet understand the css and the class list's A,B,C nested lists why do they go under the Image slider?? 

    <!Doctype>
    <html lang="en">
    <head>
      <title>Welcome</title>
      <link href="copyy.css" rel="stylesheet" type="text/css">
      <style type="text/css">
       /*-----------------------------------This css is for the MenuBar*-------------*/
       body {
        padding:0; 
        margin:0;
        font-family: Arial;
        font-size: 17px;
        width:700px;
    }
    #nav {
        background-color: #222;
       border-radius: 10px;
       position: relative;
       right:-500px;
       box-shadow: 5px 5px;
    }
    #nav_wrapper {
        width: 960px;
        margin: 0 auto;
        text-align: left;
    }
    #nav ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        position: relative;
        min-width: 200px;

    }
    #nav ul li {

        display: inline-block;

    }
    #nav ul li:hover {
        background-color: #333;
    }
    #nav ul li a, visited {
        color: #CCC;
        display: block;
        padding: 15px;
        text-decoration: none;
    }
    #nav ul li:hover ul {
        display: block;
    }
    #nav ul ul {
        display: none;
        position: absolute;
        background-color: #333;
        border: 5px solid #222;
        border-top: 0;
        margin-left: -5px;
    }

    #nav ul ul li {
        display: block;
    }
    #nav ul ul li a:hover {
        color: #699;
        position: relative;
    }
       /* ------------------------MenuBar CSS Ends here*-----------------------*/
    #head
    {
      color:#98241c;

    }
    #container
    {
      position:relative;
      right:-100px;
      margin:20px;
      width:1350px;
      height:400px;

    }
    #img
    {
      border:2pxsolid lightgrey;
      position:absolute;
      width:1350px;
      height:300px;
       box-shadow: 10px 10px 5px #888888;
      border-top-left-radius:20px;
      border-bottom-right-radius:20px;
      border-top-right-radius:20px;
      border-bottom-left-radius:20px;

    }
    #left
    {
      position:absolute;
      left:0px;
      top:0px;
    }
      #right
      {
        position:absolute;
        right:0px;
        top:0px;

      }

      #previcon{
        position:relative;
        width:30px;
        height:30px;
        top:120px;
        right:-50px;
      }
        #nexticon{
            position:relative;
            width:30px;
            height:30px;
            top:120px;
            left:-50px;
        }
      </style>
      <script type="text/javascript">
      var imagecount=1;
      var total=3;
      function slide(x)
      {
        var Image=document.getElementById('img');
        imagecount = imagecount + x;
        if (imagecount < 1)
        {
        imagecount=total;
        }
        if(imagecount > total)
        {
        imagecount=1;
        }
        Image.src="img"+imagecount+".jpg";
      }
      </script>

    </head>
    <body background="bg1.png"></body>
    <div id="nav">
        <div id="nav_wrapper">
            <ul>
                <li><a href="#">Home</a>
                </li>
                <li> <a href="#">AboutUs</a>
                </li>
                <li> <a href="#">Gallery</a>
                </li>
                <li> <a href="#">Class</a>

                    <ul>
                        <li><a href="#">A</a>
                        </li>
                        <li><a href="#">B</a>
                        </li>
                        <li><a href="#">C</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- Nav wrapper end -->
    </div>
    <!-- Nav end -->
    <!---before menu-->

    <div id="container">
    <img id="img"   src="img1.jpg" alt="ImageFile"/>
    <div id="left"><img onclick="slide(-1)" id="previcon" src="prev.png" alt="Prev"/></div>
    <div id="right"><img onclick="slide(1)" id="nexticon" src="next.png" alt="Next"></div>
    </div>

    </body>
    </html>



}
#nav {
    background-color: #222;
   border-radius: 10px;
   position: relative;
   right:-500px;
   box-shadow: 5px 5px;
}
#nav_wrapper {
    width: 960px;
    margin: 0 auto;
    text-align: left;
}
#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    min-width: 200px;

}
#nav ul li {

    display: inline-block;

}
#nav ul li:hover {
    background-color: #333;
}
#nav ul li a, visited {
    color: #CCC;
    display: block;
    padding: 15px;
    text-decoration: none;
}
#nav ul li:hover ul {
    display: block;
}
#nav ul ul {
    display: none;
    position: absolute;
    background-color: #333;
    border: 5px solid #222;
    border-top: 0;
    margin-left: -5px;
}

#nav ul ul li {
    display: block;
}
#nav ul ul li a:hover {
    color: #699;
    position: relative;
}
   /* ------------------------MenuBar CSS Ends here*-----------------------*/
#head
{
  color:#98241c;

}
#container
{
  position:relative;
  right:-100px;
  margin:20px;
  width:1350px;
  height:400px;

}
#img
{
  border:2pxsolid lightgrey;
  position:absolute;
  width:1350px;
  height:300px;
   box-shadow: 10px 10px 5px #888888;
  border-top-left-radius:20px;
  border-bottom-right-radius:20px;
  border-top-right-radius:20px;
  border-bottom-left-radius:20px;

}
#left
{
  position:absolute;
  left:0px;
  top:0px;
}
  #right
  {
    position:absolute;
    right:0px;
    top:0px;

  }

  #previcon{
    position:relative;
    width:30px;
    height:30px;
    top:120px;
    right:-50px;
  }
    #nexticon{
        position:relative;
        width:30px;
        height:30px;
        top:120px;
        left:-50px;
    }
  </style>
  <script type="text/javascript">
  var imagecount=1;
  var total=3;
  function slide(x)
  {
    var Image=document.getElementById('img');
    imagecount = imagecount + x;
    if (imagecount < 1)
    {
    imagecount=total;
    }
    if(imagecount > total)
    {
    imagecount=1;
    }
    Image.src="img"+imagecount+".jpg";
  }
  </script>

</head>
<body background="bg1.png"></body>
<div id="nav">
    <div id="nav_wrapper">
        <ul>
            <li><a href="#">Home</a>
            </li>
            <li> <a href="#">AboutUs</a>
            </li>
            <li> <a href="#">Gallery</a>
            </li>
            <li> <a href="#">Class</a>

                <ul>
                    <li><a href="#">A</a>
                    </li>
                    <li><a href="#">B</a>
                    </li>
                    <li><a href="#">C</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- Nav wrapper end -->
</div>
<!-- Nav end -->
<!---before menu-->

<div id="container">
<img id="img"   src="img1.jpg" alt="ImageFile"/>
<div id="left"><img onclick="slide(-1)" id="previcon" src="prev.png" alt="Prev"/></div>
<div id="right"><img onclick="slide(1)" id="nexticon" src="next.png" alt="Next"></div>
</div>

</body>
</html>
`Inline Code Example Here`
0
    Here is the Code.
    I din't quiet understand the css and the class list's A,B,C nested lists why do they go under the Image slider?? 

    <!Doctype>
    <html lang="en">
    <head>
      <title>Welcome</title>
      <link href="copyy.css" rel="stylesheet" type="text/css">
      <style type="text/css">
       /*-----------------------------------This css is for the MenuBar*-------------*/
       body {
        padding:0; 
        margin:0;
        font-family: Arial;
        font-size: 17px;
        width:700px;
    }
    #nav {
        background-color: #222;
       border-radius: 10px;
       position: relative;
       right:-500px;
       box-shadow: 5px 5px;
    }
    #nav_wrapper {
        width: 960px;
        margin: 0 auto;
        text-align: left;
    }
    #nav ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        position: relative;
        min-width: 200px;

    }
    #nav ul li {

        display: inline-block;

    }
    #nav ul li:hover {
        background-color: #333;
    }
    #nav ul li a, visited {
        color: #CCC;
        display: block;
        padding: 15px;
        text-decoration: none;
    }
    #nav ul li:hover ul {
        display: block;
    }
    #nav ul ul {
        display: none;
        position: absolute;
        background-color: #333;
        border: 5px solid #222;
        border-top: 0;
        margin-left: -5px;
    }

    #nav ul ul li {
        display: block;
    }
    #nav ul ul li a:hover {
        color: #699;
        position: relative;
    }
       /* ------------------------MenuBar CSS Ends here*-----------------------*/
    #head
    {
      color:#98241c;

    }
    #container
    {
      position:relative;
      right:-100px;
      margin:20px;
      width:1350px;
      height:400px;

    }
    #img
    {
      border:2pxsolid lightgrey;
      position:absolute;
      width:1350px;
      height:300px;
       box-shadow: 10px 10px 5px #888888;
      border-top-left-radius:20px;
      border-bottom-right-radius:20px;
      border-top-right-radius:20px;
      border-bottom-left-radius:20px;

    }
    #left
    {
      position:absolute;
      left:0px;
      top:0px;
    }
      #right
      {
        position:absolute;
        right:0px;
        top:0px;

      }

      #previcon{
        position:relative;
        width:30px;
        height:30px;
        top:120px;
        right:-50px;
      }
        #nexticon{
            position:relative;
            width:30px;
            height:30px;
            top:120px;
            left:-50px;
        }
      </style>
      <script type="text/javascript">
      var imagecount=1;
      var total=3;
      function slide(x)
      {
        var Image=document.getElementById('img');
        imagecount = imagecount + x;
        if (imagecount < 1)
        {
        imagecount=total;
        }
        if(imagecount > total)
        {
        imagecount=1;
        }
        Image.src="img"+imagecount+".jpg";
      }
      </script>

    </head>
    <body background="bg1.png"></body>
    <div id="nav">
        <div id="nav_wrapper">
            <ul>
                <li><a href="#">Home</a>
                </li>
                <li> <a href="#">AboutUs</a>
                </li>
                <li> <a href="#">Gallery</a>
                </li>
                <li> <a href="#">Class</a>

                    <ul>
                        <li><a href="#">A</a>
                        </li>
                        <li><a href="#">B</a>
                        </li>
                        <li><a href="#">C</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- Nav wrapper end -->
    </div>
    <!-- Nav end -->
    <!---before menu-->

    <div id="container">
    <img id="img"   src="img1.jpg" alt="ImageFile"/>
    <div id="left"><img onclick="slide(-1)" id="previcon" src="prev.png" alt="Prev"/></div>
    <div id="right"><img onclick="slide(1)" id="nexticon" src="next.png" alt="Next"></div>
    </div>

    </body>
    </html>

Edited by sriraag

1

Ok so all of that code wasnt really necessary...

I thought you meant dropdown as in a select element. Now i understand that you were asking about a navigation menu.

In any case, there are several ways to handle this. A quick look at your CSS and I beleive one easy way is to apply a higher (could be any number, but higher than the z-index of the container) z-index property to the <ul> element for the second level of your menu. For example,

#nav_wrapper ul li ul { z-index: 9999 }

That results in the following...

Untitled.png

Edited by JorgeM

This question has already been answered. 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.