HTML and CSS Dropdown menu

Question

I am working on our company website and I'm very new to HTML and CSS. I am trying to make a drop down menu for the Nav bar and I have the gist of it, but it needs some help. The dropdowns are not lining up properly, the text is too large, and the border I have is spanning the entire length of the lists.

CSS:

.menu{
    padding:0;
    margin:25px 0 0 0;
}
.menu, .menu li{
    list-style: none;
    display: block;
    float:right;
    padding:12px;
    border-right: 1px solid #d8d8d8;
}
.menu li{
    float:left;
    display: block;
    width: 100px;
}
.menu ul{
    opacity: 0;
}
.menu ul li{
    background-color: white;
}
.menu li:hover > ul{
    opacity: 1;
}
.menu li.last-menu-item{
    border: none;
    padding-right:0;
}
.menu a{
    color:#132d3c;
    font-size:15px;
    font-family: 'sansationbold';
    text-transform: uppercase;
    text-decoration: none;
    font-weight:lighter;
}
.current-menu-item a{
    color:#f15c22;
}
.menu a:hover{
    color:#f15c22;
}

HTML:

<ul class="menu alignright">
            <li class="current-menu-item"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a>
                <ul>
                    <li><a href="about.html">Who We Ar</a></li>
                    <li><a href="about.html">Values</a></li>
                    <li><a href="about.html">Owners Message</a></li>
                    <li><a href="#">Infotek Blog</a></li>
                    <li><a href="stories.html">Success Stories</a></li>
                    <li><a href="partners.html">Partners</a></li>
                </ul>
            </li>
            <li><a href="products.html">Products &amp; Solutions</a>
                <ul>
                    <li><a href="p&s.html">Security Solutions</a></li>
                    <li><a href="p&s.html">Data Solutions</a></li>
                    <li><a href="p&s.html">Communication Solutions</a></li>
                    <li><a href="p&s.html">Connectivity Solutions</a></li>
                    <li><a href="p&s.html">Infrastructure Solutions</a></li>
                    <li><a href="resources.html">Resources</a></li>
                </ul>
            </li>
            <li class="last-menu-item"><a href="contact.html">Contact</a></li>
        </ul>

Can I get a little help?

http://jsfiddle.net/pQhpu/191/

Answer 1

Hi in this you're making some mistakes.

• Don't use opacity for hide the submenus, set it with the property display:none

• Set with position:relative your li and the ul inside them with position:absolute

View this demo an make any question http://jsfiddle.net/pQhpu/214/

EDIT

To resolve your request of centering the submenus in relation with his parent you can use Jquery. I created this function for you: Review the demo here http://jsfiddle.net/pQhpu/264/

$(document).ready (function () {

$('.menu li').mouseenter(function (){
     var $this = $(this),
         $sub =$(this).children('ul'),
         pad = parseInt($this.css('padding-left'),10)+parseInt($this.css('padding-right'),10),
         move=($this.width()+pad-$sub.width())/2;
    $sub.css ('left',move+'px');   
});

})

All you have to change here is the name route of your li that displays the submenu; in my case is '.menu li' . This function takes the width of the submenu and his parent and make an operation to make it centered.

Answer 2

For the borders, put them on the a instead of the actual li. And put your padding on the a as well to push the borders to the right. You usually have to add a class like '.last' to the last item if you don't want a floating border off to the right. Will have to make the widths larger to accommodate all the text on one line, or reduce the overall size. That should get you started.

Answer 3

First off, your design is horrible. I think you probably copied it from somewhere, but there are so many cross-over/overlaying elements. Define each different part(menu options, drop down options, etc.) seperately, rather than applying things to all lis and what not.

Here is a fix for the width. I made the divs larger. It was pretty hard. Next you'd have to define a class for all drop down items, and then make their font-size smaller, and apply the same width as menu items so they aren't slightly larger than the menu items. http://jsfiddle.net/pQhpu/200/

Answer 4

To correct the alignment issues add:

.menu, .menu li
    {
    padding: 12px 0 12px 0;
    }

This is shown in firebug but not in your code above

.menu, .menu li
    {
    padding: 12px;
    }

Answer 5

To prevent the border from spanning the entire length of the list, use the display property instead changing the opacity.

.menu ul{
    display: none;
}

.menu li:hover > ul{
    display: inline;
}