How to Make Dropdown ul menu align with parent li title?

[Anthony10]

I am creating a navigation menu for my website.

 

How do I make the dropdown ul align with its parent li. For example, I want the dropdown for pc components to be directly under pc components, instead of under home.

 

Another quick probably easily solved question:

How do I make the background color of the dropdown ul (appears orange) span the entire width of the box instead of just the width of the text?

 

Sorry for a lot of messy code. Thanks in advance!

 

HTML:

<div class="nav">

    <div class="logo">

      <a href="/"><img src="#"/></a>

    </div>

    <div class="side">

      <div class="account">

        <ul>

          <li><a href="/">login</a></li>

          <li><a href="/">register</a></li>

        </ul>

      </div>

      <div class="search">

        <form method="get" action="http://www.a10technology.com/search.php"> 

          <table cellpadding="0px" cellspacing="0px"> 

          <tr>

            <div class="search-text">

              <td style="">

                <input type="text" name="zoom_query" value="Search..." onfocus="if(this.value=='Search...') this.value='';" onblur="javascript: if(this.value==''){this.value='Search...';}" style="background-color: #444; color: #999; border: none; padding: 5px"> 

              </td>

            </div>

              <td style=""> 

                <input type="submit" value=">" style="font-size: 14px; background-color: #444; color: #999; border: none; padding: 5px; width: 25px; height: 26px; filter: grayscale(100%);">

              </td>

          </tr>

          </table>

        </form>

      </div>

      <div class="side-nav">

        <ul>

          <a href=""><li>about</li></a>

          <a href=""><li>forums</li></a>

          <a href=""><li>advertising</li></a>

          <a href=""><li>social</li></a>

          <a href=""><li>contact</li></a>

        </ul>

      </div>

    </div>

    </div>

  <div class="navigation">

    <ul class="nav-title-ul">

      <li>

        <a href="/index" class="nav-title">home</a>

      </li>

      <li>

        <a href="/pc-components" class="nav-title">pc components</a>

          <ul class="dropdown-ul">

            <li class="nav-dropdown"><a href="/pc-components/cpus">CPUs</a></li>

            <br>

            <li class="nav-dropdown"><a href="/pc-components/gpus">GPUs</a></li>

            <br>

            <li class="nav-dropdown"><a href="/pc-components/cooling">Cooling</a></li>

            <br>

            <li class="nav-dropdown"><a href="/pc-components/motherboards">Motherboards</a></li>

            <br>

            <li class="nav-dropdown"><a href="/pc-components/ram">RAM</a></li>

            <br>

            <li class="nav-dropdown"><a href="/pc-components/storage">Storage</a></li>

            <br>

            <li class="nav-dropdown"><a href="/pc-components/psus">PSUs</a></li>

            <br>

            <li class="nav-dropdown"><a href="/pc-components/psus">Monitors</a></li>

          </ul>

      </li>

      <li>

        <a href="/smartphones-tablets" class="nav-title">smartphones & tablets</a>

          <ul class="dropdown-ul">

            <li class="nav-dropdown"><a href="/smartphones-tablets/smartphones">All Smartphones</a></li>

            <br>

            <li class="nav-dropdown"><a href="/smartphones-tablets/tablets">All Tablets</a></li>

            <br>

            <li class="nav-dropdown"><a href="/smartphones-tablets/htc">HTC</a></li>

            <br>

            <li class="nav-dropdown"><a href="/smartphones-tablets/google">Google</a></li>

            <br>

            <li class="nav-dropdown"><a href="/smartphones-tablets/lg">LG</a></li>

            <br>

            <li class="nav-dropdown"><a href="/smartphones-tablets/samsung">Samsung</a></li>

            <br>

            <li class="nav-dropdown"><a href="/smartphones-tablets/apple">Apple</a></li>

            <br>

            <li class="nav-dropdown"><a href="/smartphones-tablets/microsoft">Microsoft</a></li>

            <br>

            <li class="nav-dropdown"><a href="/smartphones-tablets/misc">Misc</a></li>

          </ul>

      </li>

      <li>

        <a href="/systems" class="nav-title">systems</a>

          <ul class="dropdown-ul">

            <li class="nav-dropdown"><a href="/systems/all-in-ones">All in Ones</a></li>

            <br>

            <li class="nav-dropdown"><a href="/systems/mac">Mac</a></li>

            <br>

            <li class="nav-dropdown"><a href="/systems/laptop">Laptop</a></li>

            <br>

            <li class="nav-dropdown"><a href="/systems/desktop">Desktop</a></li>

            <br>

            <li class="nav-dropdown"><a href="/systems/htpcs">HTPCs</a></li>

            <br>

            <li class="nav-dropdown"><a href="/systems/console">Consoles</a></li>

          </ul>

      </li>

    </ul>

  </div>

 

CSS:

body {

  margin: 0;

  padding: 0;

}


input:focus {outline: none; }


a {

  text-decoration: inherit;

  color: inherit;

}


h1 {

  padding: 0;

  margin: 0;

}


h2 {

  padding: 0;

  margin: 0;

}


h3 {

  padding: 0;

  margin: 0;

}


p {

  padding: 0;

  margin: 0;

}


ul {

  margin: 0;

  padding: 0;

}


div {

  margin-left: auto;

  margin-right: auto;

}


div.nav {

  height: 75px;

  width: 690px;

  background-color: #333;

  overflow: hidden;

}


    div.logo {

      width: 277px;

      height: 75px;

      float: left;

    }


        div.logo img {

          width: 277px;

          height: 75px;

        }


    div.side {

      margin: 0;

      padding-right: 35px;

      padding-left: 0px;

      padding-top: 0px;

      padding-bottom: 0px;

      width: 378px;

      height: 75px;

      float: right;

    }


    div.account {

      padding-left: 27px;

      float: left;

    }


        div.account ul {

          margin: 0;

          padding-top: 10px;

        }


        div.account li {

          display: inline;

          text-transform: capitalize;

          color: #5F5FBF;

          font-size: 15px;

          padding-right: 5px;

        }


    div.search {

      padding-top: 5px;

      float: right;

    }


    div.side-nav {

      padding-top: 10px;

    }


        div.side-nav ul {

          margin: 0;

          float: right;

          padding-top: 5px;

        }


        div.side-nav li {

          color: #ccc;

          text-transform: uppercase;

          font-size: 14px;

          padding: 0 3px;

          display: inline;

        }


    div.navigation {

      background-color: #000;

      padding: 0;

      width: 690px;

    }


        .navigation ul {

          background-color: ;

          position: absolute;

          width: 690px;

        }


        .navigation li {

          height: 35px;

          display: inline;

          list-style-type: none;

          padding-bottom: 1px;

        }


        .navigation li:hover {

          color: white !important;

          background-color: #444;

        }


        .navigation li ul {

          display: none;

          height: auto;

          margin: 0;

          padding: 0;

        }


        .navigation li:hover ul {

          display: block;

        }


        a.nav-title {

          color: ;

          text-transform: uppercase;

          padding-right: 5px;

          padding-left: 5px;

        }


        .nav-title-ul {

          background-color: #f7f7f7;

        }


        ul.dropdown-ul {

          width: auto;

          background-color: #000;

          text-align: center;

        }


        ul.dropdown-ul li:hover{

          background-color: orange;

        }


        li.nav-dropdown {


        }

[Jeroen1322]

Can you post a link to the website? It is easier to see what's wrong. Or if it isn't online then a photo or something.

[Shan-Dysigns]

There are many ways to do this, but try changing

<ul class="dropdown-ul">

to

<ul class="dropdown-ul menu2">

 

and then add another class in your css

.menu2 {
    position: absolute;
    left: 50px;
}
 

This isn't the way I would do everything, but you can make adjustments to align better.

[Anthony10]

There are many ways to do this, but try changing

<ul class="dropdown-ul">

to

<ul class="dropdown-ul menu2">

 

and then add another class in your css

.menu2 {

    position: absolute;

    left: 50px;

}

 

This isn't the way I would do everything, but you can make adjustments to align better.

Thanks

 

How would you do it? I am real new to coding, so any tips on how to do this more efficiently would be very helpful, thanks!

[omniomi]

Can you post a link to the website? It is easier to see what's wrong. Or if it isn't online then a photo or something.

 

Not OP but I copied it to a webserver... you can see the issue here: http://omniomi.com/test.htm ... hover over the lower menu items.

[Shan-Dysigns]

Thanks

 

How would you do it? I am real new to coding, so any tips on how to do this more efficiently would be very helpful, thanks!

 

Well, this is one of those things that would be better to step back a few steps and correct a few things, but for now, I will  show you how to get what you want. Give me a minute.

[Shan-Dysigns]

Without knowing your background knowledge, I will suggest this:

 

<li><a href="/pc-components" class="nav-title">pc components</a>

<ul class="dropdown-ul menu2"> // add a new class called menu2 //

 

<li><a href="/smartphones-tablets" class="nav-title">smartphones & tablets</a>

<ul class="dropdown-ul menu3"> // add a new class called menu3 //

 

Add two new classes to your css:

 

.menu2 {
    position: absolute;
    left: 55px;
}
.menu3 {
    position: absolute;
    left: 190px;
}

 

Based upon the way you have your navigation items coded, you will have to eyeball the alignment for the drop down menus, so you can edit the "55px" and "190px" to adjust the alignment better.

[Shan-Dysigns]

But like I said, there are other issues that should be addressed first. Your drop down menus are appearing on top of the navigation links, and it looks like you have extra code (both HTML and CSS) that is not necessary. Is there another website that shows the kind of menu you are trying to accomplish? Where did you get this starter code? Maybe I can start you off properly from the beginning instead of trying to clean up what you have now.

[Anthony10]

But like I said, there are other issues that should be addressed first. Your drop down menus are appearing on top of the navigation links, and it looks like you have extra code (both HTML and CSS) that is not necessary. Is there another website that shows the kind of menu you are trying to accomplish? Where did you get this starter code? Maybe I can start you off properly from the beginning instead of trying to clean up what you have now.

I am going to message you about this so it doesn't affect the coding subthread., thanks for all the help.